[React] CRA 내 파일 구성에 대한 개인적 고찰

 

[ CRA가 기본으로 제공하는 초기 구성 ]

=> 폴더: node_modules, public, src

=> 파일: .gitgnore, package-lock.json, package.json, README.md

 

 

public 폴더엔 정적 파일들을, src 폴더엔 동적 파일들을 넣는다고 한다.

그래서 public 폴더에 index.html 파일을 넣고,

src 폴더에 App.js와 index.js 파일을 넣는 것으로 보통 CRA를 시작한다. 

 

내가 고민한 부분은 위 세 파일을 제외한 

프로젝트 설계를 하는 과정에서 발생하는 파일들을 어떻게 구조화할 것이냐에 대한 것이다. 

(public / src 폴더에 넣을 것이냐, 폴더 내부에서 하위 폴더 구조화는 어떻게 할 것이냐 등..)

 

 

이 것엔 정답은 물론 없거니와, 나보다 훨씬 다양한 프로젝트와 공부를 하신 분들이 써놓으신 훌륭한 글들이 많지만

일단 현재의 내가 생각한 효율적인 구조와 그 이유에 대해 기록하고자 한다. 

 

 

1) src 폴더 안엔 (App.js 파일 / index.js 파일) / Components 폴더 / Containers 폴더 / Pages 폴더

 

• Components 폴더: 재사용 가능한 요소가 되는 파일들을 저장한다.
  • ex) Navigation 바 안에 있는 버튼 하나 등...
  • 모든 파일명이 '-Item'으로 끝나도록 통일함
• Containers 폴더: 페이지의 일부를 구성하는 한 부분 (Components 폴더 내 요소를 사용하든, 사용하지 않든)
  • ex) Navigation 바 자체, Header 자체 등..
  • 모든 파일명이 '-Container'로 끝나도록 통일함
• Pages 폴더: App.js에서 바로 import하여 사용 가능한 단위
  • App.js는 무조건 pages 폴더 내 파일들로만 구성되어 있을 것
  • ex) Home 화면 등..
  • 모든 파일명이 '-Page'로 끝나도록 통일함

 

!) 구분한 부모 폴더에 상관없이 모든 파일의 이름이 속한 Page의 이름으로 시작하도록 통일하였다.

그러나 여러 페이지에서 사용되는 컴포넌트라면..?!........... 고민이 된다.....😵‍💫🤕🤢

 

 

 

2) public 폴더 안엔 ( index.html 파일 ) /  imgs 폴더 / css 파일

** 그 전에 알아야 할 지식!

CRA는 보안 상의 이유로 src 폴더 안의 파일들에 대한 직접적인 외부 접근을 막는다. 이는 빌드된 번들 파일만을 외부에 노출시키는 데 목적이 있습니다. 소스 코드를 숨기고 번들 파일만을 배포함으로써 보안적인 측면에서 이점을 가진다. 

 

• imgs 폴더: src 폴더에 비해 보안에는 취약하지만 그만큼 외부에서 접근이 가능, 쉽기 때문.
  • 공개적으로 접근 가능하도록 하고 싶은 이미지, favicon 등은 public 폴더에 넣어놓을 것
  • 그러나, 외부에서 접근 불가하게 하고 싶은 이미지가 있을 경우 src 폴더에 넣을 것

• css 파일: src 폴더 내 파일들의 경우 import 작업이 필요한 데 비해, public 폴더 내 파일은 바로 index.html에 link 태그를 이용해 가져와 사용할 수 있어 간단 편리하기 때문

 

 

---

 

위 내용을 작성하면서도 또 내 생각에 허점과 의구심이 들어버렸지만(ㅠㅠ)

머리로만 이해하는 게 아니라 일단 이렇게 글로 직접 적어보고 읽어보니 어느정도 그림이 그려지는 것 같다. 

 

더 큰 프로젝트를 진행하면서 위 생각에 대한 반론이나 더 나은 아이디어가 생겼을 때 또 작성하여

현재와 비교해 성장한 나를 발견하면 

또 그 나름의 재미가 있을 것 같다:)

 

 

이제 침대로 쩜푸해야짓....!!! Guten Abent!