리액트 구조
node_modules 폴더
npm을 통해 설치된 패키지 매니저(Package manager)들이 모여 있는 디렉토리
리액트 프로젝트를 실행할 때 사용되는 dependency 모듈들이 모두 모여있는 폴더
설치되어있는 모듈들은 package.json 파일의 dependencies 부분 기제
프로젝트를 깃에 올릴 때 용량이 큰 node_modules은 보통 지우고 올림
이 디렉터리를 지우면 프로젝트는 실행되지 않지만, package.json의 dependencies 부분에 기록되어 있다면 npm install을 이용해 다시 설치 가능
public 폴더
이곳의 파일은 public/index.html 에만 쓰임
html 파일들과 이미지 파일 저장소
정적인 성격
favicon.icon
웹사이트의 상단에 위치하는 '파비콘' 이미지
manifest.json
앱 스토어없이 기기의 홈화면에 설치할 수 있는 웹 사이트
index.html
이름 수정 X, 페이지 템플릿
body 부분에 id가 root인 div 태그가 있고, 이 밑으로 리액트 코드가 실행되어 만들어진 DOM이 구현
가상 DOM을 위한 html 파일
src 폴더
대부분의 리액트 소스 코드 작성
리액트의 컴포넌트 저장소
webpack은 이곳에 있는 파일만 적용
app.css
app.js에 대한 css 파일
app.js
보여질 코드를 작성하는 작업 파일
app.test.js
react 구성 요소를 테스트하는데 사용되는 파일
index.js
이름 수정 X, 자바스크립트의 시작점
index.html와 비슷하게 가장 상위, 메인이 되는 파일
gitignore
git에 올리지 않는 것들을 이곳에 목록화
package-lock.json 파일
Package.json 파일
프로젝트 요약 설명서
필요한 라이브버리, 라이브러리의 버전들
리액트 앱 실행, 빌드, 테스트 등의 스크립트
프로젝트에서 자주 실행하는 명령어를 scripts로 작성하면 npm 명령어로 실행 가능
소스 코드를 입력할 때 문법이나 코드 포맷 체크 설정 명시
참고 사이트
https://eunyoe.tistory.com/entry/React-기초-02-React의-기본-구조와-구성-파일-알아보기
https://www.inflearn.com/course/따라하는-리액트/dashboard
