본문 바로가기

IT 관련/javascript & jquery

[javascript] 파일과 디렉토리 구조

빌드 시스템을 갖추기 전에 첫 번째로 정해야 할 것은 파일과 디렉토리 구조를 구성하는 방법입니다.

구조는 프로젝트 성격에 아주 큰 영향을 받습니다. 예를 들면 자바스크립트 라이브러리만 단독으로 개발하는 프로젝트와 웹 사이트에 필요한 모든 파일을 관리해야 하는 프로젝트는 구조가 다를 수밖에 없습니다.

 

1. 좋은습관

다음은 프로젝트 성격과 관계없이 자바스크립트 파일과 디렉토리 구조를 프로젝트에 적용할 때 추천하는 방법입니다.

 

파일당 객체 하나

각 자바스크립트 파일에 객체 하나만 정의해야 합니다. 이러한 규칙은 다른 프로그래밍 언어에서도 쉽게 찾아볼 수 있으며 일반적으로 유지보수가 더 쉬워집니다. 파일에 하나의 객체만 정의하면 자연스레 파일 수가 많아지는데 이렇게 파일이 많아지면 같은 파일에 여러 명이 동시에 작업할 가능성이 낮아집니다. 물론 요즘 형상 관리 시스템이 굉장히 좋아져 두 사람이 작업한 내용을 쉽게 합칠 수 있지만 충돌을 완전히 막을 수는 없습니다. 파일이 적을수록 합칠 때 충돌이 발생할 가능성이 높아집니다. 따라서 한 객체당 하나의 파일만 정의하면 이런 위험을 최소화할 수 있습니다.

 

관련된 파일끼리 디렉토리에 넣기

서로 관련된 객체가 있다면 그 객체를 정의한 파일을 디렉토리 하나에 둡니다. 또 모듈을 구성하는 코드가 있으면 관련된 파일을 디렉토리 하나에 두는 방법도 있습니다. 이렇게 모듈을 구성하는 파일을 디렉토리 하나에 두면 디렉토리를 논리적으로 구성할 수 있으며 또한 관련된 파일을 그룹으로 묶음으로써 원하는 기능을 쉽게 찾을 수 있습니다.

 

서드파티 코드는 별도로 관리하기

자바스크립트 라이브러리처럼 우리가 작성하지 않았고 관리하지도 않는 코드는 형상 관리 서버에서 따로 분리해야 합니다. 사실 가장 이상적인 방법은 자바스크립트 라이브러리를 직접 갖고 있지 않고 콘텐츠 전송 네트워크를 이용하는 것입니다. 그게 아니라면 형상 관리 서버에서 별도의 디렉토리에 분리해 두는 것이 좋습니다.

 

빌트 경로 정하기

빌드한 자바스크립트 파일은 별도의 디렉토리에 저장하고 이 디렉토리는 형상 관리 서버에 저장되지 않게 합니다. 그리고 웹사이트는 소스 디렉토리를 직접 사용하지 않고 빌드 경로를 사용하도록 설정해야 합니다. 여기서 중요한 점은 빌드 파일을 형상 관리 서버에 저장하지 않는 것인데 그 이유는 어차리 다른 사람이나 시스템에서 배포 전에 몇 번이고 재생성하며, 빌드 시스템에서도 실제 서버에 배포하기 전에 최종적으로 새로 빌드하기 때문입니다.

 

테스트 코드를 가까이 두기

자바스크립트 테스트 코드는 형상 관리 서버에 저장하고 누구나 알만한 위치에 두어야 합니다. 그래야 개발자가 테스트를 빠뜨려도 쉽게 인지할 수 있습니다.

 

파일과 디렉토리 구조는 대규모 웹사이트에서 자바스크립트 코드를 사용할 것인지 아니면 독립적인 자바스크립트 자바스크립트 프로젝트인지에 따라 달라집니다. 전체적인 디렉토리 구조는 사용하는 프레임워크에 따라 결정되고 프로젝트마다 그 구조도 다양하지만 반드시 자바스크립트만을 위한 하위 디렉토리가 있어야 합니다. 하위 디렉토리명은 script나 javascript를 많이 사용합니다. 이제 다음 절에서는 기본적으로 많이 사용하는 디렉토리 구조를 다뤄보겠습니다.

 

그럼 이만.

끝.