[React] 리액트 기본 빠르게 셋팅하기

 

Node.js 설치하기

리액트로 개발을 진행하기 위해서는 Node.js를 설치해야합니다. 리액트가 Node.js와 직접적인 관계는 없지만 프로젝트를 개발하는데 필요한 주요 도구들이 Node.js를 사용하기 때문이죠.

 

Node.js

 

 

설치가 잘 되었는지 명령프롬프트에서 확인해봅니다.

> node -v

 

 

 

yarn 설치하기

Yarn

 

명령프롬프트 창을 관리자 모드로 실행시킵니다.

> npm install --global yarn

 

설치가 잘 되었는지 명령프롬프트 창에서 확인합니다.

> yarn --version

 

 

 

 

create-react-app 으로 프로젝트 생성하기

create-react-app은 여러가지의 설치 과정을 생략하고 간편하게 프로젝트 작업 환경을 구축해주는 도구입니다.

후에 설정을 커스터마이징 할 수 있습니다.

 

해당 명령어를 프로젝트를 만들고 싶은 디렉터리에서 실행 하세요.

> yarn create react-app hello-react

 

설치가 완료되었으면 프로젝트 디렉터리로 이동한 뒤 개발 전용 서버를 구동합니다.

> cd hello-react
> yarn start

 

짜잔 다음과 같은 초기 프로젝트 페이지를 만날 수 있습니다!

만약 자동으로 띄어지지 않을 경우 http://localhost:3000/ 로 접속해 보세요.

 

---

+ 보고 있는 책에서 prettier 설정을 해주고 있길래 빠르게 적어봅니다

.prettierrc 파일 생성

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

코드 스타일을 정리해주는 prettier설정파일

jsconfig.json 파일 생성

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

프로젝트에서 자동 import 기능이 제대로 작동할 수 있게 해줌