React 환경설정

Nodejs

웹팩,바벨을 이용하기 위해선 설치해주어야 한다.

윈도우의 경우 아래 링크에서 다운로드
https://nodejs.org/ko/

Node.js

 

macOS or Linux의 경우 nvm이용

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
nvm install --lts

 

yarn

Node를 설치하면 npm이 설치됨. 대신 yarn을 사용하는 것을 추천
조금 개선된 버전의 npm이라 생각하면 됨. -> 더 나은 속도, 더 나은 최신 시스템을 사용하기 위함

https://classic.yarnpkg.com/en/docs/install#windows-stable

Yarn

 

VSCode

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

윈도우의 경우 Git Bash 다운

 Git Bash

https://git-scm.com/download/win

Git - Downloading Package

 

Create React APP 

Facebook에서 제작한 간소화된 React App 프로젝트.
해당 소스를 이용하면 React 설정 없이 바로 사용 가능

https://github.com/facebook/create-react-app

facebook/create-react-app

 

프로젝트 생성

npm create react-app my-app
cd my-app
npm start -- yarn이 설치되었다면 yarn start

웹이 실행됨. 

 

프로젝트 코드 확인

vscode로 프로젝트를 열어 확인.

 

package.json을 보면 굉장히 간단하다.
그이유는 react-script안에 대부분 필요한 라이브러리(웹팩, 바벨 등)을 이미 포함하고 있기 때문임.

 

만약 웹팩과 바벨과 같은 설정을 커스텀하게 변경할 필요한 경우
한번 실행하면 되돌릴 수 없으므로 주의

yarn eject

 

 

VS Code 확장 프로그램 설치

 

ESLint : 

자바스크립트 문법 및 코드 스타일을 검사해 주는 도구,

 

Reactjs Code Snippets :

리액트 컴포턴트 및 라이프사이클 함수를 작성할때 단축 단어를 사용하여 간편하개 자동 코드 생성하는 스니펫 모음.

 

Prettier-Code formatter :

코드 스타일을 자동으로 정리해 주는 도구

 

Prettier 설정

프로젝트 최상위 디렉터리에 .prettierrc 파일을 생성하여 다음과 같이 작성

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

 

 

chrome 웹스토어

 

리액트 개발자 도구 ( React Developer Tools )

 

 

스타일

레이아웃 flex 학습 시 참고 사이트

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

React icon

https://react-icons.github.io/react-icons/icons?name=md

React Icons

 

 

 

 

 

이글은 아래 강의를 보고 간단히 정리한 글입니다.
강의를 수강하시면 보다 상세한 정보를 얻으실 수 있습니다.

참조 : 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 - velopert(김 민준) (인프런)
참고문서 : https://react-anyone.vlpt.us/03.html