본문 바로가기

분류 전체보기153

리액트 공부조각 4. JSX 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 babel 이 JSX 를 JavaScript 로 변환을 해줍니다. 어떻게 변환되는지 한번 예시를 볼까요? 꼭 닫혀야 하는 태그 태그는 꼭 닫혀있어야 합니다. JSX 안에 자바스크립트 값 사용하기 JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 {} 으로 감싸서 보여줍니다. style 과 className JSX 에서 태그에 style 과 CSS class 를 설정하는 방법은 HTML 에서 설정하는 방법과 다릅니다. 우선, 인라인 스타일은 객체 형태로 작성을 해야 하며, background-color 처럼 - 로 구분되어 있는 이름들은 backgroundColor 처럼 camelCase 형태로 네이밍 해주어야 합니다. 그리고, CSS class .. 2022. 11. 27.
[React 오류] an expression no-unused-expressions [내용 TEXT] Compiled with problems:X ERROR [eslint] src\App.js Line 24:15: Expected an assignment or function call and instead saw an expression no-unused-expressions Search for the keywords to learn more about each error. [파파고 번역] 할당 또는 함수 호출이 필요하고 대신 사용되지 않는 식이 표시되었습니다. 각 오류에 대해 자세히 알아보려면 키워드를 검색하십시오. 2022. 11. 26.
[만남] 20221126_충전완♥ 🎀겨울되기 전, 가을에 얼굴 한번 보자고 만난 날🎀 🎼같이 들은 플레이리스트🎼 🎵 권진아 (KwonJinAh)의 킬링보이스를 라이브로! - 끝, Lonely Night, Fly Away, 씨스루,여기까지,KNOCK, 위로,운이좋았지,뭔가잘못됐어, 여행가ㅣ딩고뮤직 🎵 [회브리SING] 유회승 – I'll Never Love Again Cover Ver. 🎵 양희은(Yang HeeEun) X 악동뮤지션(AKMU) - 엄마가 딸에게(Mother to daughter) | 판타스틱 듀오2 (Fantastic Duo2) | SBS ENTER 이번 주 충전완료! 고마운 우리언니. 언니말대로 잘 챙겨먹고, 잘자고, 공부도 여유를 갖고 차근차근 채워나가자 2022. 11. 26.
[React 오류] 정의되지 않았습니다 - 변수명주의, 'post' is not defined no-undef 리액트 오류사항 [내용 TEXT] Compiled with problems:X ERROR [eslint] src\App.js Line 13:14: 'post' is not defined no-undef Search for the keywords to learn more about each error. [파파고 번역] [문제1] Q 아래 사진에서 왜 오류가 났을까? ㄴ Hint Line 13:14 줄, visual code "..."표시로 눈치주고 있다. [문제2] Q 아래 사진에서 왜 오류가 났을까? HINT : useState [앞으로..] How to prevent this problem? 항상 변수명 [단수, 복수] , [대문자, 소문자] 타자로 쓸거면 꼭꼭 2번씩 확인하고, 아니면 복붙으로 하도록.. 2022. 11. 26.
React 기초 3강 : 리액트에선 변수말고 state 만들어 쓰랬죠 (useState) https://www.youtube.com/watch?v=Qb8Oiy8i9IY&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy&index=4 데이터 저장에는 2가지 방법이 있다. 1. 변수에 넣거나 ( 위 사진의 방법 ) ↑ 2. state에 넣거나 ( 아래 사진들의 방법 ) ↓ 맨 윗줄, import React from 'react'; 👉 import React, {useState} from 'react'; //의미 : 리엑트에 있는 내장함수 하나를 쓰도록 하겠습니다. 로 고쳐서 타이핑 하여 리액트의 데이터 저장공간 state를 만든다. ㄴ이로써 useState() 라는 함수를 사용할 수 있다. (참고) ES6 destructuring 新문법 let [a,b] = useState.. 2022. 11. 26.
React 기초 2강 : 리액트에선 HTML대신 JSX 써야함 (JSX 사용법) https://www.youtube.com/watch?v=FqnAFX9lQPQ React 기초 2강 : 리액트에선 HTML대신 JSX 써야함 (JSX 사용법) App.js - 일종의 자바스크립트 이기 때문에 자바스크립트 문법에 맞추어서 작성해야한다. 에러사항은 터미널에 나와있어서 바로바로 수정할 수 있다. 🟢App.js 작성중 메인페이지 작동원리 index.js가 : App.js 파일의 내용을 public 에 있는 index.html 안에 박아 넣어주세요~ 라고 index.js 파일에서 말해주고 있다. 정확히 말하면, id가 root인 div 태그에 왜 App.js 를 다 가져다 주세요~ 🟠index.js 그래서 실제로 렌더링되는 것은 HTML 파일들 인데 div 안에 있는 내용들이 html 파일에 꽂히.. 2022. 11. 26.
React 기초 1강 : 리액트 설치와 셋팅법 (2022+ 스타일) React 기초 1강 : 리액트 설치와 셋팅법 (2022+ 스타일) https://www.youtube.com/watch?v=nahwuaXmgt8 1.Node.js 검색 후 최신버전 설치하세요. ㄴ Q. 저는 Node.js 설치가 이미 되어 있는데요? ㄴ A. 100% 에러남 최신버전으로 재설치 ㄱㄱ 2. Visual Studio Code 에디터 설치 3. 코드짤 응큼한 폴더 만드셈 4. 에디터에서 작업폴더 Open Folder 하셈 5. 리액트 프로젝트 생성은 터미널을 열고 npx create-react-app 프로젝트명 입력 $ npx create-react-app blog // 의미 : blog란 이름의 리액트 프로젝트를 만들겠다는 의미. npx : 라이브러리 설치를 도와주는 명령어, (nodejs.. 2022. 11. 26.
React 기초 0강 : 리액트왜 쓰는지 알려줌 (+ 수강시 필요 사전지식) https://www.youtube.com/watch?v=LclObYwGj90 React 기초 0강 : 리액트 왜 쓰는지 알려줌( + 수강시 필요 사전 지식) 모바일 App처럼 스무스하게 동작하는 웹들 메이저 SNS들도 마찬가지로 새로고침없이 웹탐색이 가능합니다. 일명 Web-app : 실제로 모바일앱과 비슷한 사용감. Web-app을 쉽게 만들 수 있는 React Web-app의 장점들 1. 모바일앱으로 발행이 쉬움 2. 앱처럼 뛰어난 UX 3. 그냥 웹사이트보다 비즈니스적 강점 (그래서 요즘 웹 개발자의 필수소양이 되었다.) 리액트 문법 특징 : 어려움 ~ 필요한 사전지식 ~ var let const if else for function return array object 다루기 addEventLis.. 2022. 11. 26.
[개념은 암기]키워드로 정리하는 자바스크립트 핵심 포인트 🟢Chapter01 자바스크립트 개요와 개발환경 설정 01-1 자바스크립트의 활용 자바스크립트 : 란 웹 브라우저에서 작동하는 프로그래밍 언어입니다. ECMAScript : 란 유럽컴퓨터제조협회에서 표준화한 자바스크립트의 공식 명칭입니다. 웹 애플리케이션 : 이란 기존의 웹 페이지보다 많은 기능을 구현한 웹 페이지를 말합니다. 01-2 개발환경 설치와 코드 실행 개발환경 : 이란 개발을 할 수 있는 환경을 의미합니다. 텍스트 에디터 : 란 코드를 작성할 수 있는 프로그램을 말합니다. 이 책에서는 텍스트 에디터로 비쥬얼 스튜디오 코드를 사용합니다. 구글 크롬 개발자 도구 : 란 구글 크롬이 개발자를 위해 오류 확인 등의 기능을 제공하는 도구입니다. 01-3 알아두어야 할 기본 용어 표현식 : 이란 값을 만.. 2022. 11. 26.
728x90
반응형

티스토리툴바