Create React App / React 프로젝트 구조
2022. 11. 14. 17:10ㆍ프로그래밍/React
- 목차
Create React App
- 리액트 개발에 사용되는 툴 설치와 기본 설정들을 한 번에 할 수 있음
- babel, webpack ...
- 작업 폴더 안에서 명령어 실행
- 1분정도 소요됨
npm
npm init react-app [프로젝트명]
npx
npx create-react-app [프로젝트명]
yarn
yarn create react-app [프로젝트명]yarn start
- 개발용 모드로 프로젝트 실행
yarn build
- 배포 시 빌드할 때 사용
yarn test
- 작성한 유닛테스트, 테스트코드 실행
yarn eject
- 숨겨진 툴/설정 값들을 밖으로 빼냄
- 다시 되돌릴 수 없기 때문에 정말 필요한 경우에만 사용
프로젝트 구조
.yarn
- yarn 실행에 필요한 파일들
node_modules
- npm 을 이용해 설치한 라이브러리 파일들
- 설치한 모든 라이브러리 파일이 있기 때문에 실행/빌드 시 속도가 느림
.pnp.mjs
- yarn 을 이용해 설치한 라이브러리, 버전 정보, 저장 위치가 작성된 파일
- node_modules 의 단점 개선
- play and plug
yarn.lock
- 사용하는 라이브러리, 버전 정보가 작성된 파일
public
- 정적인 리소스들
- favicon.ico
- index.html
- 리액트 애플리케이션에서 유일하게 존재하는 html 파일
- PWA 에 필요한 manifest.json
- 이미지들
- robots.txt
- 크롤링 로봇에게 사이트에 대한 정보를 명시하는 파일
src
- 동적으로 작성한 코드들
- App.js
- index.js
- reportWebVitals.js
- 웹 사이트의 성능을 측정함
- setupTests.js
- 유닛 테스트
.gitignore
- git 에 커밋하지 말아야 할 것들을 작성한 파일
package.json
- 프로젝트 이름, 버전, 명령어 스크립트, 브라우저 버전 지원 정보
- 사용하는 외부 라이브러리 버전관리 가능
README.md
- 프로젝트에 대한 전반적인 설명을 작성한 파일
yarn eject 실행
숨겨진 툴들의 정보가 package.json 에 추가됨
리액트로 애플리케이션을 만들 때 필요한 툴들
- babel
- webpack
- browserslist : 브라우저 지원 정보 설정
- dotenv : 환경변수 설정
- eslint : 코드 스타일 감시
- jest : 테스트용
- css-minimizer-webpack-plugin : css 축약하는 webpack 플러그인
- postcss
- tailwindcss
- react-app-polyfill
- react-dom ...
BABEL
- javascript 트랜스 컴파일러
- 최신 자바스크립트 문법으로 코드를 작성하고 바벨을 이용해서 프로젝트를 빌드함
- 사용자에게 배포하기 전에 최신 문법을 예전 버전의 문법으로 변환해줌
- 사용자의 브라우저 버전을 신경쓰지 않고 javascript 최신 문법이나 typescript 를 사용할 수 있음
Webpack
- 작성한 코드들을 포장해서 사용자에게 배포할 수 있게 도와줌
- 모듈 번들러
- 사용되지 않는 코드를 삭제해줌
- 코드를 압축해줌
- 파일 사이즈를 줄여줌
ESLint
- 코드를 올바르게 작성하고 있는지 검사해줌
Jest
- 유닛테스트를 작성하고 코드가 올바르게 작동하는지 테스트를 할 수 있게 해주는 프레임워크
유용한 VSCode 익스텐션
- Material Theme
- Material Icon Theme
- Auto Import
- Prettier
- CSS Modules
HTML & CSS 관련 익스텐션
- IntelliSense for CSS class names in HTML
- HTML to CSS autocompletion
- HTML CSS Support
- CSS Peek
- Auto Rename Tag
