리액트 프로젝트를 생성하고 개발에 필요한 초기 세팅 과정을 알아봅니다.
1. Node.js / npm 설치
2. create-react-app을 이용해서 작업 환경 구축
3. 추가 라이브러리 설치
4. 프로젝트 폴더 구조 세팅
5. +@ 프로젝트 루트 설정, ESLint와 Prettier 추가
Node.js / npm 설치하기
Node.js는 자바스크립트 런타임입니다. 이를 이용하면 웹 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있습니다. npm은 node.js와 함께 설치되는 패키지 매니저입니다. 이를 사용하여 패키지 설치 및 관리할 수 있습니다.
노드제이에스 홈페이지에서 다운로드하여 설치할 수 있습니다. brew가 설치된 맥을 이용한다면 다음과 같은 커맨드로 설치할 수도 있습니다. brew install node
정상적으로 설치가 되었다면 다음 명령어로 확인할 수 있습니다. npm -v / npx -v
creat-react-app을 이용해서 작업 환경 구축하기
create-react-app이라는 도구를 사용하면 프로젝트에 필요한 작업 환경을 간편하게 구축할 수 있습니다. 터미널을 열고 원하는 디렉터리에서 다음과 같은 명령어를 실행하면 프로젝트가 만들어집니다. npx create-react-app <프로젝트명>
이미 프로젝트 폴더를 만든 상태라면 해당 위치에서 npx create-react-app .을 실행하면 됩니다.
*필요에 따라 추가 라이브러리 설치할 수 있습니다.
라우팅이 필요하다면 npm install react-router-dom --save
sass를 사용하고 싶다면 npm install node-saa --save
이외에도 여러 가지 라이브러리를 필요에 맞게 설치하면 됩니다.
프로젝트 폴더 구조 세팅
src 폴더 안에서 index.js 파일을 제외한 모든 파일 제거한 후 폴더 구조를 잡습니다. 예를 들어 Components 폴더는 여러 페이지에서 사용될 컴포넌트를 관리하는 역할을 합니다. Pages 폴더는 웹 사이트를 구성하는 각 페이지의 레이아웃에 해당하는 부모 컴포넌트를 관리합니다.
+@ 프로젝트 루트 설정, ESLint와 Prettier 추가
프로젝트 루트 설정(절대 경로를 이용하여 불러오기)
프로젝트 루트에 jsconfig.json 이름의 파일을 추가하고 아래 내용을 입력합니다.
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
이제 import SampleComponent from "../../Components/SampleComponent" 와 같이 불러오는 대신에 import SampleComponet from "Components/SampleComponent" 와 같은 형식으로 불러올 수 있습니다.
ESLint와 Prettier 추가하기
VSCode Extension을 열어 ESLint와 Prettier를 설치합니다. ESLint로 스타일을 체크하고 Prettier로 포맷팅을 처리하기 위해서 다음과 같이 패키지를 추가로 설치합니다.
npm install prettier eslint-config-prettier eslint-plugin-prettier -D
설치가 완료되면 프로젝트 루트에 .eslintrc.json을 추가하고 아래 내용을 입력합니다.
{
"extends": ["react-app", "plugin:prettier/recommended"]
}
VSCode Settings 추가
다음과 같은 설정을 추가합니다.
{
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
},
"editor.codeActionsOnSave": { "source.fixAll.eslint": true },
"eslint.alwaysShowStatus": true,
"prettier.disableLanguages": ["js"],
"files.autoSave": "onFocusChange",
"javascript.updateImportsOnFileMove.enabled": "always"
}