개인적인 Angular 프로젝트 폴더링

개발자가 프로젝트의 폴더링을하고 있는 모습이다.

  Angular 개발을 하면서 지금까지 폴더링을 어떻게 하면 더 한눈에 볼 수 있고 찾기 쉽게 볼 수 있을까 하는 생각을 많이 했다. 다른 Angular 개발자들의 코드가 있으면 그들의 폴더링을 유심히 관찰해봤고, 그들 사이에서 공통점을 몇가지 찾을 수 있었다. 이제 그 공통점들은 이제 나의 것이 되었고 개인적인 Angular 프로젝트 폴더링에 대해 설명해보고자 한다.

  필자의 폴더링 방식은 가장 큰 컴포넌트를 기준으로 폴더를 만들고 그것에 속한 컴포넌트를 폴더에 집어 넣는 식으로 하고 있다. 그리고 컴포넌트들끼리 서로 같이 사용하는 컴포넌트나 서비스들은 shared라는 폴더를 만들어 관리한다. 말은 복잡하지만, 그림으로 보면 쉽게 이해할 수 있다.

  필자의 폴더링 방식의 대전제는 하나의 수정사항이 생겼을 때, 연쇄적으로 발생하는 수정사항이 존재한다면 비슷한 위치에서 수정할 파일들을 찾을 수 있어야한다는 것이다. 이것이 지켜져야 수정사항 발생시에 파일을 찾는 수고를 덜 수가 있고, 쓸데없는 시간이 줄어들기 때문에 생산성이 높아진다.

   위 그림은 내 폴더링 방식을 설명하기 위한 예시 페이지이다. 해당 코드는 여기에서 확인 할 수 있고, 해당 페이지는 여기에서 확인 할 수 있다.

  위 그림은 예시 프로젝트의 폴더링 구조이다. @angular/cli로 만들어진 app 폴더 밑에 페이지를 가지는 file과 info, main 폴더를 두고 그 안에 그것들에 대한 모듈, 컴포넌트, 라우팅 모듈을 둔다. 그리고 그 페이지를 구성하는 작은 컴포넌트들에 대한 폴더를 위치시키면서 해당 페이지에 연관된 컴포넌트라는 것을 인식시킨다.

  그리고 shared 폴더에 component 폴더를 만들어서 그 안에 여러 컴포넌트에서 사용되는 컴포넌트를 넣어두고 사용한다. 여러 컴포넌트에서 사용되는 서비스의 경우에도 shared 폴더에 service를 폴더를 만들어서 사용한다.

  만약 동일한 데이터를 관리하는 서로 다른 페이지가 있다면, 데이터 리스트 역할을 하는 컴포넌트 폴더에 CRUD 기능을 하는 컴포넌트를 넣어두고 관리한다. 그림에서는 되어있지않지만, 큰 페이지에 속한 컴포넌트가 있는 경우에는 폴더를 따로 만들어 CRUD 컴포넌트와 구별될 수 있도록한다.

  다음과 같은 폴더링을 했을 때의 좋은 점은 URL을 통해 어떤 위치에 해당 코드가 있는지 쉽게 파악이 가능하다는 것이다. 위 그림에서처럼 부관리자를 관리하는 페이지를 만들었고, 부관리자 관리 페이지가 '/sub-admin'이라는 서브 도메인을 가진다고 해보자. 그 부관리자 관리 페이지에는 부관리자의 리스트가 있고, 그 페이지에 등록, 수정 버튼이 있어 버튼 클릭시 해당 페이지로 이동하면 각각 '/sub-admin/enroll', '/sub-admin/1/modify'로 이동이 된다고 라우터를 구성했다고 가정해보자.

  후임 개발자가 전임 개발자가 이런 식으로 작성해 놓은 코드를 보고 수정을 해야한다고 생각했을 때, 당신이 후임 개발자라면 부관리자의 등록 부분에서 수정사항이 발생했다면, 어떤 폴더를 먼저 볼 것 같은가. 필자의 방식을 쓰게 되면 수정사항이 발생한 URL을 따라 폴더를 이동하게 되면 그 파일을 만날 수 있다. 그렇기 때문에 필자의 코드를 처음 보는 사람일지라도 한번 설명듣게 되면 이 파일이 어디있는지 찾아 헤멜 필요가 없게 되는 것이다.

  물론 해당 방법이 무조건 좋은 방법이라곤 할 수 없다. 또 회사마다, 개인마다 폴더링 방식이 다 다르다. 하지만 처음 개발을 시작하는 사람이라면 좋은 폴더링 방법을 알기에 쉽지가 않다. 개발을 하다보면 자신이 편한 방식을 택하겠지만, 자신이 개발한 프로젝트를 들여다 봤을 때 파일이 어디있는지 찾기 어렵다면 문제가 있는 것이다.

  함수, 클래스가 단일 책임을 가지는 것은 물론 중요하다. 하지만, 프로젝트의 뼈대가 되는 폴더, 파일들도 제자리에서 제 역할만 제대로 할 수 있도록 하는 것 역시 프로젝트를 수행함에 있어서 중요한 요소라고 생각한다.