컴포넌트나 소스파일들을 import 해올 때에는 해당 파일의 위치를 경로를 통해 명시해야 합니다. 하지만 프로젝트의 규모가 커질수록 불러오는 path의 경로가 난잡해지기 마련입니다. 특히 새로운 파일을 생성하거나 이미지를 추가하였을 때 해당 파일이 사용되는 곳에 경로를 추가하는 작업은 끔찍한 경험 중 하나입니다.. 이 때 오늘 배울 절대 경로를 사용한다면 보다 간결하고 직관적인 방식으로 경로를 추가할 수 있습니다. 오늘은 React의 대표적인 오버라이딩 패키지인 Craco를 설치하고, 이를 이용하여 Typescript Path alias를 설정하는 방법에 대해 알아보겠습니다. Craco 소개 CRA(Create-React-App)은 기본적으로 디렉터리 구조를 간결하게 하기 위해 WebPack설정이 들어있..

프로젝트를 진행하다 보면 크기가 커질수록 관리해야할 파일은 늘어나고 이에 따라 각 파일들을 용도에 맞게 분류해야할 필요성을 느끼게 됩니다. 저도 최근에는 프로젝트를 시작하기 전에 필요한 폴더들을 미리 생성하고 전체적인 프레임을 설계한 이후 개발을 진행하고 있습니다. 이번 포스팅은 리액트를 사용할 때 폴더의 구조를 어떻게 잡으면 좋을지에 대해 다뤄보겠습니다. 먼저 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..