프론트엔드 개발 계층화

1. CSS 3계층 구조

base: 기본 스타일

사이트 레벨의 가장 기초적이고 공통적인 스타일로, 서로 다른 스타일과 콘텐츠를 가진 사이트들이 base 스타일을 공유할 수 있습니다.

base는 원자적이며 더 이상 나눌 수 없습니다. 예를 들어 호환성이 좋은 flex, clearfix 등이 있습니다.

reset은 base와 병렬적으로 기본 스타일 컴포넌트 역할을 하며, 물론 간단한 reset은 base 계층에 포함할 수도 있습니다.

common: 공통 스타일

모듈 레벨의 사용자 정의 스타일 모듈로, 각 페이지에서 재사용할 수 있습니다.

base 계층을 바탕으로 달력, 팝업 등 더 복잡한 스타일 모듈을 제공합니다.

page: 페이지 스타일

페이지 레벨의 재사용이 필요 없는 스타일입니다.

특정 페이지에 맞춰 고유한 스타일(구체적인 색상 값, 폰트, 핵(hack) 등)을 추가합니다.

합리적인 계층화는 스타일의 재사용성을 효과적으로 높여줍니다. 상위 계층에서 하위 계층의 특정 스타일 규칙을 간단히 덮어쓰는 것만으로 최종 스타일을 변경할 수 있습니다. 또한 스타일의 유지보수성을 높여주며, 각 계층의 역할이 명확하여 새로운 스타일을 적재적소에 배치할 수 있고, HTML에서 클래스 조합 방식을 통해 최종 스타일을 구현하게 됩니다.

base 계층과 common 계층은 소수의 인원이 관리 및 유지보수를 담당해야 하며 자주 변경되지 않지만 확장은 가능합니다. 개발자는 UI 디자인 시안에 따라 직접 page 계층 스타일을 작성하여 시각적 효과를 구현합니다. page 계층 스타일을 작성할 때도 마찬가지로 3계층 구조로 조직할 수 있습니다. 예를 들어:

/* base */
body {
    background-color: #eee;
}
h1 {
    border-bottom: 1px solid #ccc;
}
/* common */
.panel {
    border: 1px solid #ddd;
}
.line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* page */
h1 span {
    border: 1px solid red;
    border-raduis: 3px;
}
.panel .line {
    line-height: 1.5em;
}

page 계층 스타일 작성의 핵심은 common 계층 스타일을 결정하는 것, 즉 모듈을 어떻게 나눌 것인가입니다. 디자인 시안에서 유사한 부분을 추출하여 모듈로 추상화하며, 합리적인 모듈 분할은 common 계층과 page 계층의 균형 및 확장성을 고려해야 합니다. common 계층이 너무 비대해지면 page 계층에 코드가 거의 남지 않을 수 있고, 반대로 common 계층이 너무 단순하면 page 계층에서 수많은 하위 선택자를 사용하여 스타일을 채워야 할 수도 있습니다. 원칙은 단순함을 유지하면서도 발생 가능한 변화에 적응할 수 있도록 더 많은 확장성을 제공하는 것입니다.

2. JS 3계층 구조

base: 기본 유틸리티 라이브러리

JS API를 확장하여 더 사용하기 쉬운 인터페이스를 추가합니다.

네이티브 API는 기능이 다소 약할 수 있으므로 base 계층에서 getElementsByClassName, trim 등 더 많은 인터페이스를 확장할 수 있습니다.

common: 컴포넌트 라이브러리

사용자 정의 컴포넌트를 제공하거나 달력, ajax, cookie 등 기능 모듈을 캡슐화합니다.

또한 프로젝트에서 자주 사용되는 컴포넌트(예: 풀 투 리프레시(Pull to Refresh), 무한 스크롤 등)를 제공할 수 있습니다.

page: 페이지 스크립트

특정 비즈니스 로직에 맞춰 작성된 재사용이 필요 없는 스크립트입니다.

일반적으로 HTML에 대응하며, 즉 각 HTML 파일마다 하나의 page 계층 JS 파일이 대응됩니다.

JS 계층화의 역할은 단계적 강화에 있습니다. 네이티브 API를 한 단계씩 강화하여 page 계층의 개발을 더 편리하게 만듭니다. 이에 대한 비유로, 네이티브 JS API는 울퉁불퉁한(브라우저 호환성 문제) 시골길(네이티브 API의 부족한 기능)과 같습니다. base 계층을 추가하는 것은 이 길을 평탄하게 넓히는 것과 같고, common 계층은 그 위에 아스팔트를 까는 것과 같습니다. 그 후 page 계층의 개발은 훨씬 수월해집니다.

base 계층과 common 계층의 유일한 차이점은 common 계층 컴포넌트의 규모가 더 크다는 점입니다. 두 계층 모두 호환성 문제를 다루며, common 계층은 base 계층 위에서 더 강력한 기능을 가진 모듈을 제공합니다. page 계층에서 여러 페이지에 걸쳐 재사용할 수 있는 부분도 규모에 따라 common 계층이나 page 계층에 추가해야 합니다.

실제 응용에서 JS의 3계층 구조는 자주 사용되지 않는데, 이는 jQuery, YUI와 같이 강력한 기능을 가진 서드파티 라이브러리가 base와 common 계층의 기능을 동시에 제공하기 때문입니다. 이 경우에도 여전히 3계층 구조로 page 계층 코드를 조직할 수 있으며, 재사용 가능한 부분을 추출하여 전체 프로젝트의 base 및 common 계층으로 삼을 수 있습니다. base와 common 계층을 잘 구축한 후에는 서드파티 라이브러리가 base 계층과 병렬적인 기초 컴포넌트가 됩니다.

1. CSS 3계층 구조

2. JS 3계층 구조

댓글

댓글 작성