프로젝트를 진행하다 보면 크기가 커질수록 관리해야할 파일은 늘어나고 이에 따라 각 파일들을 용도에 맞게 분류해야할 필요성을 느끼게 됩니다. 저도 최근에는 프로젝트를 시작하기 전에 필요한 폴더들을 미리 생성하고 전체적인 프레임을 설계한 이후 개발을 진행하고 있습니다. 이번 포스팅은 리액트를 사용할 때 폴더의 구조를 어떻게 잡으면 좋을지에 대해 다뤄보겠습니다. 먼저 CRA를 설치했을 때 기본적으로 설치되는 폴더 및 파일들의 역할에 대해서 간단히 살펴보겠습니다. CRA의 초기 폴더구조 my-app ├── node_modules ├── public ├── src ├── .gitignore ├── package.json ├── package-lock.json └── README.md node_modules 현재 ..

페이지를 제작하다 보면 공통 요소들이나 단일 요소를 담거나 감쌀 때 container나 wrapper를 많이 사용하게 됩니다. container와 wrapper 모두 일반적으로 '어떠한 요소들을 포함한다'는 의미를 지니고 있으며 클래스 네임으로 많이 사용되는 단어입니다. CSS 코드를 작성하면서 제가 작성한 코드를 확인해보니 두 용어를 혼용하여 사용하고 있었다는 점을 알게 되었습니다. 해당 이슈에 대해 향후 코드를 작성하거나 리뷰할 때 참고할 만한 Coding Convention이 있을까 궁금하여 자료 조사를 시작하였습니다. 클래스 네이밍을 container로 정할까, wrapper로 정할까 container와 wrapper 모두 무언가를 포함한다는 점에서 같은 의미의 단어로 사용할 수 있습니다. Rea..