1. React의 폴더 구조
(1) 보일러 플레이트
우리는 이렇게 초기 셋팅이 완료된 폴더를 보일러플레이트라고 한다.
보일러플레이트는 회사마다 다를 수 있다.
각 폴더의 한줄 요약..
(2) 프론트엔드의 각 페이지 화면들(pages)
pages 폴더는 프론트엔드의 페이지 화면들을 모아놓은 폴더이다.
api 폴더는 사용하지 않으므로 삭제하는것이 좋다.
(3)제품 설명서(package.json)
package.json파일은 핵심이 되는 파일로, 제품 설명서와 같은 역할을 한다.
Next는 React 기반 프레임워크이다.
Next를 설치하였기 때문에 react, react-dom도 자동으로 함께 설치가 된다.
2. github 관련 사용법
(1) git 클론하는법
=> git clone 주소
(2) git clone 후 package.json 파일에 next, react,등 히스토리 목록이 있을때 한꺼번에 다운 받는법
=>yarn install
(3) 코드 최적화 하는법(배포하기 전에 실행)
=>yarn build
그 외에
.next 폴더 =>yarn dev 했을때 자동적으로 생성되는 폴더
node_modules => package.json 파일에 있는 히스토리 목록의 실제 기능구현 코드를 담고 있는 폴더
yarn.lock=> node_modules 폴더에 있는 기능구현코드의 코드를 담고 있는 파일
.gitignore=> 깃허브에 코드 올리시 .next나node_modules 와 같은 불필요한 파일들은 깃허브 업로드시에 배제하고 올리도록 만들어놓은 파일
<왜 node_modules와 .next를 깃허브에 업로드할때 올리지 않는가??>
우리가 나중에 소스코드 활용 목적을 보면 모든 사람들이 파일을 실행 시킬려고 다운로드 받지는 않을 것이다. 그래서 파일을 실제 실행 목적으로
다운로드 받는 사람도 있지만 면접관이나 다른 사람들이 소스 코드를 보고 싶다라고 할때 보통 실행을 하려고 보는 경우도 있지만, 이 소스코드가 어떻게 작성되어 있는지 그 내용만 보려고 하는 사람도 존재하기 때문에 굳이 node_modules와 .next를 깃허브에 올려 파일 다운로드하는데 용량과 시간을
낭비하지 않도록 하는것이다.
