AngularJS 모범 사례 : 디렉토리 구조 잡기

https://scotch.io/tutorials/angularjs-best-practices-directory-structure 

AngularJS Best Practices: Directory Structure

위 글이 원본이며, 아래는 번역본입니다.

 

---

 

AngularJS 모범 사례 : 디렉토리 구조

우리는 코드 작성에 많은 시간을 소비하지만, 프로젝트 초기 단계에서 많은 사람들이 디렉토리 구조가 중요하지 않아 보여서, 많은 사람들이 이를 무시합니다. 이는 단기적으로 개발자들이 빠르게 코딩할 수 있도록 해주지만, 장기적으로 코드 유지 보수성에 영향을 끼칩니다. AngularJS는 여전히 상대적으로 새롭고, 개발자들은 AngularJS를 파악하려고 합니다. AngularJS 어플리케이션을 구조화하는데에는 좋은 방법이 많습니다. 우리는 기존의 다른 프레임워크의 방식과 AngularJS만의 방식을 함께 차용할 것입니다.

이 아티클에서는, 어플리케이션의 사이즈와 무관하게 디렉토리 구조와 관련된 모범 사례를 다루겠습니다. 이는 어떤 개발자들에게는 hot button issue이고, AngularJS 어플리케이션 앱을 구성하는데에 완벽은 방법은 없지만 나의 경험과 교훈을 통해 글을 작성할 것입니다.

 

Standard Structure 

우선, 하지 말아야 할 것을 보겠습니다. 많은 AngularJS 어플리케이션은 아래와 같은 구조입니다.

app/
----- controllers/
---------- mainController.js
---------- otherController.js
----- directives/
---------- mainDirective.js
---------- otherDirective.js
----- services/
---------- userService.js
---------- itemService.js
----- js/
---------- bootstrap.js
---------- jquery.js
----- app.js
views/
----- mainView.html
----- otherView.html
----- index.html

 

전형적인 구조입니다. 표면적으로, 매우 MVC 프레임워크 구조로 보이고 많은 의미가 있어 보입니다. 관심사로 분리되어 있으며 컨트롤러, 뷰, 외부 라이브러리가 각각 자신의 폴더를 가지고 있습니다.

 

위 디렉토리 구조는 튜토리얼을 작성하거나 작은 어플리케이션을 개발할 때처럼 소수의 뷰와 컨트롤러가 있을 때 따르는 것이 좋습니다. 이러한 구조는 개발자가 전달하려는 개념을 시각화, 개념화하여 가독성을 높입니다.

그러나 새로운 기능을 추가하면서, 어플리케이션 규모가 커지기 시작했다면 다른 접근법이 필요합니다. 컨트롤러, 뷰, 디렉티브가 10개 이상 생성되기 시작하면, 원하는 파일을 찾기 위해 스크롤을 사용해야합니다.

예를 들어 AngularJS로 블로그를 만들고, 저자 정보를 각 아티클 하단에 추가하기로 결정했습니다. 수정을 시작하기 전에 전체 디렉토리에서 블로그 디렉티브, 컨트롤러, 서비스, 뷰를 찾아야합니다. 

몇달 후, 블로그에 추가 기능을 개발하기 위해 특정 기능의 이름을 수정하려고 하면, 다시 전체 디렉토리에서 영향도 있는 파일을 찾고, 수정하고, 싱크를 맞추고 변경하는 작업을 해야합니다.

 

A Better Structure and Foundation

이제 여러분의 동료들이 당신을 사랑하게 만들어줄, 확장성 있고 유지보수가 쉬운 AngularJS 어플리케이션을 구축하기 위한 최선의 노력을 해봅시다. 이상적인 AngularJS 어플리케이션의 구조는 구체적인 기능단위로 모듈화되어야 합니다. 또한 AngularJS 디렉티브를 좀 더 분류할 수도 있습니다. 아래는 샘플 디렉토리 구조입니다.

app/
----- shared/   // 서비스에서 재활용할 소스코드나 컴포넌트가 위치 
---------- sidebar/
--------------- sidebarDirective.js
--------------- sidebarView.html
---------- article/
--------------- articleDirective.js
--------------- articleView.html
----- components/   // 각각 작은 단위의 앱이 되는 컴포넌트
---------- home/
--------------- homeController.js
--------------- homeService.js
--------------- homeView.html
---------- blog/
--------------- blogController.js
--------------- blogService.js
--------------- blogView.html
----- app.module.js
----- app.routes.js
assets/
----- img/      // 이미지, 아이콘
----- css/      // 스타일, 또는 스타일과 관련된 파일들(SCSS, LESS 등)
----- js/       // AngularJS와 무관하게 서비스 개발을 위한 JS파일들
----- libs/     // 3rd Party 라이브러리 모음(such as jQuery, Moment, Underscore 등)
index.html

 이 디렉토리 구조는 처음부터 읽고 이해하기가 어렵습니다. AngularJS를 처음 접는 사람들에겐 이런 복잡한 접근 방식이 더욱더 어려워보여서 앞서 설명한 Standard Structure을 따르게 만들 수도 있습니다. 이제 위 디렉토리 구조에 대해 알아보고, 여기서 어떤 일이 벌어지는지 살펴보겠습니다.

index.html

index.html은 root 경로에 있습니다. index.html은 모든 요소와 라이브러리 등을 처음으로 호출하는 파일입니다.

assets/

assets 폴더는 어플리케이션 개발에 필요하지만 AngualarJS 코드와 관련없는 모든 것들을 포함합니다. 

app/

AngualarJS의 모든 파일이 app 폴더 하위에 위치합니다. app 폴더 하위에는 두개의 자바스크립트 파일이 있습니다. app.module.js파일 등 AngularJS와 종속성과에서 앱 설치, 부하를 처리합니다. app.route.js파일은 모든 경로 및 경로 구성을 처리합니다. 그 다음으로는 components와 shared가 있습니다.

app/components 

components폴더는 AngularJS 어플리케이션이 제공하는 섹션(ex. 관리자 사용자 섹션, 갤러리 생성 섹션 등 화면 기능 단위를 의미한다.)의 폴더가 있고, 하위에 섹션을 구성하는 컨트롤러, 서비스, html 파일이 위치합니다. 여기의 각 구성요소들은 뷰, 컨트롤러, 서비스를 갖고 있기 때문에 작은 규모의 MVC 어플리케이션과 유사합니다. 이것은 이 글에서 앞서 설명한 Standard Structure와 유사합니다.

app/shared

shared폴더는 어플리케이션이 갖는 여러개의 기능을 포함할 수 있습니다. 여러개의 페이지에서 재활용할 수 있는 디렉티브를 모아놓는 것이 가장 이상적입니다. 블로그를 개발할 때 게시물, 사용자 댓글, 슬라이더, 게시물 초안 등은 AngularJS 디렉티브로 개발해야합니다. 각 컴포넌트의 하위 폴더는 디렉티브를 구성하는 자바스크립트와 템플릿 HTML 파일을 포함합니다.

 

Best Practices (For Huuuuge Apps)

AngularJS로 매우 큰 응용 프로그램을 개발하고 있다면, 어플리케이션을 좀 더 모듈화해야합니다. 아래는 모듈화를 위한 추가적인 팁입니다. 

Header, Footer 모듈화

component/ 폴더 아래에 Core 폴더를 만들고, 모든 페이지에서 공유할 Header, Footer, 그리고 추가적인 컴포넌트를 옮겨 놓으세요.

Route 모듈화

Route 정보를 모듈화해서 사용하는 것도 좋은 방법입니다. 예를들어 블로그와 관련된 경로 정보를 담은  blogRoutes.js에서 파일을 /views/blog/하위 폴더에 추가합니다. 

Minification 

AngularJS를 상용 환경에 배포하기 전에 concatenate, minify하세요. Grunt와 Gulp에서 좋은 플러그인을 제공합니다. 반드시 .js전체 어플리케이션에 대하여 1개의 거대한 파일을 가질 필요는 없으며, 아래처럼 논리적으로 나누어도 됩니다. 

• app.js (앱 초기화, 설정 및 라우팅 용)
• services.js (모든 서비스에 대해)

이는 앱의 초기로드 시간을 줄이는데 큰 도움이 됩니다. 좀 더 많은 정보는 링크를 참고하세요.

일관된 이름 유지

이는 일반적인 팁이지만 구성 요소를 작성하고 구성 요소에 여러 개의 파일이 필요할 때마다 일관성있는 패턴으로 이름을 지정하세요. ex. blogView.html, blogServices.js, blogController.js.

 

Benefits of the Modularized Approach

위의 예는 AngularJS를 구축하기위한 모듈화 된 접근 방식을 보여줍니다. 이 방법의 이점은 다음과 같습니다.

코드 유지 보수성

위의 방법에 따라 앱을 논리적으로 분류하고 코드를 쉽게 찾고 편집 할 수 있습니다.

확장성

코드가 훨씬 쉽게 확장됩니다. 새로운 디렉티브나 페이지를 추가해도 기존 폴더가 커지지 않습니다. 구조를 설명할 수 있다면, 신규 개발자를 온보딩하는 것이 훨씬 쉬워집니다. 또한 이 방법을 사용하면 신규 기능을 좀 더 쉽게 넣고 뺄 수 있습니다. 

디버깅

이 모듈화 된 앱 개발 방식을 사용하면 코드 디버깅이 훨씬 쉬워집니다. 코드 조각을 찾아 수정하는 것이 더 쉬울 것입니다.

테스트

모듈화 되지 않은 앱보다 테스트 스크립트를 작성하고, 테스트하기 쉬워집니다.

 

In Conclusion

결론적으로 이 아티클에서는 AngularJS 어플리케이션 구조와 관련하여 모범사례를 다루었습니다. 시간을 단축하기 위해 모범사례를 무시하는 것은 쉽습니다. 이는 코드를 다시 작성하게 만들거나, 유지보수를 어렵게 만들 수 있습니다. 이 글이 도움이 되었기를 바랍니다.