Contents Toaster

** 김민준 저, 「리액트를 다루는 기술」 참고하여 작성했습니다. Prettier - Code Formatter 가독성을 위해 들여쓰기가 제대로 안 된 경우 한번에 맞춰주는 포매터이다. VS Code 왼쪽 Extenstion 탭(Ctrl + Shift + X)에서 "prettier"라고 검색 목록 최상단 prettier의 install 버튼을 눌러 설치해준다 루트 디렉터리(src나 public 디렉터리가 위치한 곳)에 .prettierrc 파일을 생성해서 다음을 입력한다 { "singleQuote": true, //큰따옴표 대신 작은 따옴표로 "semi":true, //세미콜론 항상 붙이기 "useTabs": false, //탭 대신 공백으로 들여쓰기 "tabWidth": 2 // 공백은 두 칸씩 } F..

VS Code 문법 검사 도구 ESLint ESLint는 코드를 잘못 쓴 경우, 에러/경고 메시지를 VS Code 에디터에서 바로 확인할 수 있게 해준다 에디터 VS Code의 Extensions 탭(Ctrl + Shift + X)에서 eslint 라고 검색하면 나온다 install 눌러주면 설치됨 주석 표기가 잘못된 경우 아래와 같이 나옴 VS Code의 view > problem 창을 열면 자세한 에러 메시지를 볼 수 있음

CONTENTS 필수 컴포넌트 return 규칙 JSX 변수 선언 JSX 조건문 인라인 CSS 스타일 태그의 class 이름 1. 필수 컴포넌트 return 규칙 하나의 태그 컴포넌트의 경우 return 값 내부는 하나의 최상위 태그 로 감싸져 있어야 한다. v.16 이전 버전에서는 로 감싸는 경우가 많고 v.16 이후 버전부터는 사용이 가능하다. 이는 로 축약해서 사용할 수 있다. 한편, return 안의 괄호()는 필수가 아니다. /* src/App.js */ import React from 'react'; function App() { return( 하나로 감싸주이소 안해주면 에러나요 ); } export default App; undefined 렌더 방지 undefined 값이 return되어 렌..

내용의 흐름 node.js 설치 yarn 설치 Visual Studio Code 에디터 설치 create react-app 리액트 프로젝트 생성 작업 시작하기 1. node.js 설치 설치 다운로드 웹사이트 : https://nodejs.org/ko/ 다운한 버전: v.16.17.0.LTS 운영체제: Windows 64 용 다운받은 파일 더블클릭 후 모두 "Next" 눌러서 설치 완료 (옵션변경 안함) Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치 확인 명령프롬프트 실행 (제목표시줄 검색칸에 "cmd" 입력) cmd 창에 아래와 같이 쳤을 때, 버전 명이 v16.17.0과 같이 나오..