[D-2] 프로젝트 생성 및 필요한 라이브러리 설치

프로젝트 생성

cd c:/dev/react
 
yarn create react-app todo-app

cd todo-app

yarn add node-sass classnames react-icons

(*) Sass 사용 : node-sass
(*) 조건부 스타일링 : classnames
(*) 예쁜 아이콘 사용 라이브러리: react-icons
(*) 코드 스타일 정리 : Prettier
(*) 자동완성 : jsconfig.json 파일 생성

---

VS CODE 실행 후 폴더를 열어서 생성된 프로젝트 폴더를 선택.

VS Code 실행 화면

---

src/

.prettierrc

 

{ 
  "singleQuote": true, 
  "semi": true, 
  "useTabs": false, 
  "tabWidth": 2, 
  "trailingComma": "all", 
  "printWidth": 80 
} 

---

프로젝트 글로벌 스타일 파일 수정 

src/

index.css

body { 
  margin: 0; 
  padding: 0; 
  background: #e9ecef; 
} 

---

App 컴포넌트 초기화 

src/

App.js

import React from 'react';

const App = () => {
  return (
    <div>
      Todo App을 만들자!
    </div>
  );
};

export default App;

---

JS 환경설정

src/

jsconfig.json

{ 
    "compilerOptions": { 
        "target": "es6" 
    } 
} 

---

리액트 서버 실행

cd /c/dev/react/todo-app

yarn start

---

리액트 개발자 도구 설치

구글 크롬 웹스토어 > React Developer Tools 검색 후 설치
https://chrome.google.com/webstore/category/extensions