사수없이, 다른 개발자 없이 혼자서 프로젝트를 해나가면서 기한 내에 맞춰야 하다보니 좋은 아키텍쳐, 클린한 코드를 작성하기 보단 기능 구현에만 힘썼고 기한 내에 프로젝트를 완수하면서 프로젝트를 상황에 맞는 아키텍쳐, 클린한 코드로 리팩토링하는 작업을 하려하는데 일단 회사 내에 경험자가 없다보니 혼자서 어떤 아키텍쳐로 구성할지, 어떻게 작성하는게 클린한 코드인지 고민이 많이 되고있다. 다음은 아키텍쳐를 공부하면서 React에 어떤 아키텍쳐를 써야할지 개인적으로 공부한 흔적이다.
React로 작업을 하다보면 어떤 폴더구조로 작업을 하는게 효율적인지 의문을 가질때가 있다. hook을 사용하는 사람이 있을것이고 Redux를 사용하는 사람도 있을것이다. 본인이 React를 사용함에 있어 어떤 방식으로 폴더구조를 구성하든지 처음에 폴더구조를 잘 구성해 놓아야 후에 작업 능률 하락 없이 작업 진행이 원할할 것이다.
이 블로그에서는 아키텍처 패턴에 대해서 설명해 놓았지만 본인만의 스타일이 있기 때문에 참고만 하는것이 좋을 것이다.
React는 프론트엔드 환경에서 주장이 없는(un-opinionated) 프레임워크이다. React는 어플리케이션을 구성하고 구조하는 방법을 제공하지 않는다. 어플리케이션을 구성하고 구조하는 것은 개발자나 팀이 상호작용하는 방식이다. 잘 짜여진 프로젝트는 개발자들이 자신의 구현에 더 깊이 생각하고 정리하도록 요구한다. 또한 잘 짜여진 프로젝트는 코드베이스를 쉽게 탐색, 수정 및 확장할 수 있다.
조직화된 코드베이스는 팀이 장기적으로 주어진 구조내에서 생산성을 향상시킬수 있다.
항상 React 어플리케이션의 시작점(Starting point)를 가지는게 좋다. 이 시작점은 assets, components, context, services, hooks, pages, utils 등 다양한 폴더로 구성된다. 이들 폴더 각각은 디렉토리의 목적을 달성하기 위해 다양한 파일이 있다.
create-react-app을 사용하여 React 어플리케이션을 만들었을때 index.js, App.js가 기본적으로 src 폴더 내에 구성된다. 아래는 기본적인 폴더 구성 예이다.
└── /src
├── /assets
├── /components
├── /context
├── /hooks
├── /pages
├── /services
├── /utils
└── App.js
├── index.js
여기서 디렉토리 이름을 코드베이스에있는 누구라도 이해할 수 있는 깔끔한 규칙을 따르는게 좋다.