[React] 프로젝트 디렉토리 구성 / 리액트 프로젝트 디렉토리 구성

프로젝트를 구성할 때, 제일 먼저 선행되어야하며 누구나가 한 눈에 볼 수 있는 구조로 만들어야 합니다.

이는 주니어 개발자 뿐만 아니라 시니어 개발자들 역시 기존에 누군가 만들었던 프로젝트 룰에 따르다 보니,

실제로 디렉토리를 구성할 일은 없어서 중요도는 낮게 평가되지만, 설계를 하시는 분들에게는 굉장히 중요한 작업이 아닐 수 없습니다.

여기서는 React를 베이스로 설명하기 때문에 Web에서 사용되는 구조를 설명해 보겠습니다.

결국 마지막에 최상단(src 하위)에서 보게 될 디렉토리는 '3'개 또는 '4'개 입니다.

바로 'components', 'resources', 'views', ('utils')

* 'components' : 특정 기능이 들어간 페이지들을 담아놓은 디렉토리

* 'resources' : CSS, Image 들을 담아놓은 리소스 디렉토리

* 'views' : 화면에 보이는 최상단 카테고리별 혹은 최상단 메뉴별 페이지를 담아놓은 View 디렉토리

* 'utils' : 1번만 선언함으로써 여러 페이지에서 사용하는 기능을 담아놓은 디렉토리 ('components' 와 맥락은 비슷하나, 보여지지 않는 순수 기능만을 담은 script)

'components' 에는 Header / Footer / SideBar / Loader / Logout 등 공통으로 사용되는 페이지들이 해당됩니다.

'views' 에는 카테고리 및 메뉴의 고유 페이지가 해당됩니다.

'utils' 에는 'API' 호출을 위한 기능이나 'setStorage' 역할을 하는 function 들이 해당됩니다.

저는 'components'를 활용하길 좋아하는데요. 완전한 공통인 'common' 디렉토리를 만들고, 카테고리별로 공통디렉토리를 생성하여 관리 및 가독성을 높였습니다.

즐거운 코딩하세요 : )

티스토리툴바