CRA 기본 세팅
CRA : create react app
많은 사람들은 리액트로 프론트 작업을 합니다.
리액트는 컴포넌트로 각 요소들을 분리해서 관리할 수 있기 때문에 많이들 사용합니다.
그럼 여기까진 알겠는데, 어떻게 하면 컴포넌트들을 효율적으로 재사용해서 사용할 수 있을까요? 🤔
프로젝트를 만들면서 여러번의 CRA초기세팅을 하고.. 어떤 디렉토리 구조와 컴포넌트 구조가 프로젝트를 진행할 때 더 보기 쉽고 효율적일지 궁금해졌습니다.
따라서 여러 사이트를 돌아다니면서 제만의 CRA 초기 작업에 대해 알려드리겠습니다.
CRA 초기 작업을 해 놔야 나중에 프로젝트를 다시 찾아봐도 기억하기 쉽고 손쉽게
코드들을 고쳐 나갈 수 있습니다!! 🧸🧸
결론부터 말하자면, 공식 문서에서 설명하는 것처럼 딱 정해진 폴더 구조와 컴포넌트 구조는 없기 때문에! 대규모 프로젝트나, 회사 규정에 따르지 않아도 된다면 자기만의 구조를 만들기를 바랍니다.🧐🧐🧐🧐
CRA 후에 디렉토리들 살펴보기 🔍🔍🔍
CRA로 초기세팅을 하면 기본적인 폴더들이 생성됩니다.
이러한 폴더들은 정확히 어떤 기능을 하는지 간략하게 설명하겠습니다. 👩🏻💻
🍎 node_modules
CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더
🍎 package.json
CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일
모든 프로젝트마다 package.json이 하나씩 존재한다.
"dependencies"
리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인이 가능.
실제 코드는 node.modules 폴더에 존재한다.
"scripts"
start : 프로젝트 development mode(개발 모드) 실행을 위한 명령어. npm run start
build : 프로젝트 production mode(배포 모드) 실행을 위한 명령어. 서비스 상용화.
❓❓ 근데 왜 node.modules과 package.json에서 이중으로 패키지를 관리할까?
🧄 실제 내가 작성한 코드, 내가 설치한 패키지는 내 로컬에만 존재.
🧄 github에 올릴 때 내가 작성한 코드와 함께 pacakge.json(추가로 설치한 패키지)를 넘긴다.
🧄 다른 사람이 그것을 (pull) 받아서 npm install만 입력하면 package.json에 기록되어 있는 패키지의 이름과 버전 정보를 확인하여 자동으로 설치한다.
🧄 이 때, github에 올릴 때, node.modules는 올리면 안되는데 (불필요한 용량 차지)
🧄 .gitignore 파일에 github에 올리고 싶지 않은 폴더와 파일을 작성할 수 있다.
🍎 .gitignore
.gitignore 파일에 github에 올리고 싶지 않은 폴더와 파일을 작성할 수 있다.
push를 해도 .gitignore 파일에 작성된 폴더와 파일은 올라가지 않는다.
🍎 package-lock.json (or yarn.lock)
프로그래머가 관리할 필요가 없고 npm 이나 yarn이 알아서 관리해주는 파일들
lock파일은 해당 프로젝트에 설치한 패키지 , 그패키지와 관련된 모든 패키지의 버전정보를 포함한다.
🍎 public
index.html을 포함하고 있다.
<div id="root><div>
가상 DOM을 위한 html파일 (빈 껍데기 파일)
💡 최종적으로 이 파일에 모든 작업물이 들어갑니다.
🍎 src
최종적으로 개발자들이 이곳에서 React 를 이용하고 관리한다.
나의 CRA 초기세팅 🔍🔍
📁 src 폴더 안에
💻 assets
프로젝트에서 사용할 이미지, 비디오, json파일 등 미디어 파일들을 모아두어 저장하는 곳입니다.
💻 components
공통 컴포넌트 관리 -> Header, Footer, Nav 등입니다.
💻 pages
페이지 단위의 컴포넌트 폴더로 구성
💡 components vs pages
여러 페이지에서 동시에 사용되는 컴포넌트의 경우 components 폴더에서 관리
페이지 컴포넌트의 경우 pages 폴더에서 관리
해당 페이지 내에서만 사용하는 컴포넌트의 경우 해당 페이지 폴더 하위에서 관리하는 것이 좋음!
💻 styles
css 는 내가 만든 파일이 들어있는 폴더에 만든는 것이 좋습니다.
하지만 css 외에 다른 라이브러리를 사용한다면 styles 폴더에 관리하는것이 좋습니다.
sass 사용시
reset.scss => css 초기화
common.scss => 공통으로 사용하는 css 속성 정의
styled component사용 시
GlobalStyle.js => css 초기화
theme.js => 공통으로 사용하는 css 속성 정의
이외에 media.js 등등 다양한 css 파일을 속성에 맞게 분류하여 모듈화.
💻 services
자바스크립트 모듈을 담는 폴더
💻 services
서버에서 받아오는 데이터들을 관리하는 폴더
💻 store
Redux, recoil 등 프로젝트에 전역적으로 써야하는 데이터를 관리하는 폴더
기본적인 폴더 구조 말고도 다양한 폴더구조가 있는 만큼 다양하게 접하고 공부하는게 좋다는
필요성을 느끼며 나중에 완벽한 규칙이 있는 폴더 구조가 나오면 어떨까 하는 생각이 들면서
블로그를 정리해 보았습니다. 🦕🦕🦕🦕🦕
