[React] 리액트 설치방법 및 사용방법을 알아보자

① Node.js 다운로드

 

Node.js

② VScode 다운로드

 

Visual Studio Code - Code Editing. Redefined

③ React 프로젝트 설치

 

npm이란?

패키지 관리 도구이자 의존성 관리를 해준다.

 

yarn

yarn create react-app first-app
npx create-react-app my-app

yarn start 하게 된다면
locallhost:3000

 

④ npm vs npx vs yarn 차이는 무엇일까?

NPM	NPX	Yarn
자바스크립트 런타임 환경 기본 패키지	npm에 속해있는 npm 패키지 실행 도구	npm,npx와는 결이 다른 패키지 관리자
node와 함께 설치하는 Getting Started가 많다.	해당 패키지를 실행만 되게 해준다	안전하고 안정적이며 재현 가능한 프로젝트 이다.
사용빈도가 높다.	가볍게 사용할 수 있다.	npm의 점유률이 높아 npm에 관련된 자료가 더 많다.

⑤ 확장 프로그램 설치

 

1. ESLint (문법검사)

2. Prettier (문자 포맷)

3. Reactjs Code Snippets (단축키 및 자동생성)

 

⑥ VScode 세팅

1.  .prettierrc 파일 생성 (자신이 작업하는 폴더 최상단으로)

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

2. 저장시에 코드 자동 정렬

3. default 포멧터 prettier 적용하기

※ 작업하는 폴더를 지정하고 .prettierrc 파일을 생성해야만 한다.