| HTML, CSS, JavaScript 의 의존성 줄이기 |
|
|
  |
9년 전
|
대부분의 사이트들에는 많은 양의 HTML, CSS, JavaScript 가 사용된다. 프론트-앤드 의 코드를 잘 정리하는 것이 중요하다.
다수의 사람들이 프론트-앤드 코드를 건들이는 경우가 많아져서, 코드의 어느 부분을 수정했을 때 전혀 상관이 없을 것 같은 부분에서 문제가 생기는 경우도 많이 생긴다.
프론트 앤드 개발시, 의도치 않은 에러를 발생시키지 않기가 그리 쉬운일은 아니다. HTML, CSS, JavaScript 가 태생적으로, 서로 의존성이 높기 때문에 말이다.
서버 쪽에서는 오래전 부터 논의되었던, 모듈화 (separation of concerns) 라는 주제도, 프론트 앤드 쪽에서는 그리 많이 다루지 않는다.
이 문서에서는, 내가 어떻게 HTML, CSS, JavaScript 를 분리하게 되었는지에 대하여 얘기하려 한다. 내 경험이나, 내가 아는 다른사람들에 의하면, 저것들을 분리하는 방법이, 직관적으로 쉽게 떠오르지는 않는 것 같다.
The Goal
HTML, CSS, 와 JavaScript 는 언제나 서로 의존할 (coupling) 것이다. 이 기술들은 서로 상호작용 하도록 만들어졌기 때문이다. 예를들어 fly-in transition 은 stylesheet 의 클래스 선택자로 정의하지만, 유저의 동작에 의해 JavaScript 로 발생시키고, 클래스를 HTML 에 추가함으로써 시작될 수 있다.
프론트-앤드 코드들의 의존성을 완전히 제거할 수는 없다. 불필요한 의존성을 제거하는 것이 목표가 되어야 한다.
백앤드 개발자가 HTML 의 마크업을 변경할 때, CSS 규칙이나 JavaScript 기능을 망가뜨릴까봐 걱정하지 않을 수 있어야 한다. 웹 개발이 복잡해질 수록, 이 목표를 달성하는 것이 중요하다.
Anti-Patterns
프론트-앤드 코드가 불필요한 의존성이 많다는 것을 알기가 쉬운 것만은 아니다. 그리고 의존성을 줄이는 것처럼 보이는 것이 사실은 의존성을 높일 수도 있다는 점이, 의존성의 정도를 더욱 파악하기 어렵게 만든다.
내 스스로가 범한 안좋은 패턴들에 대해서 얘기하려 한다. 각각의 예들이 왜 안 좋은지, 어떻게 수정할 수 있는지 설명할 것이다.
Overly Complex Selectors
CSS Zen Garden (역주: HTML 을 정해 놓고, 서로 다른 CSS style 을 적용하여, 웹사이트가 다른 모양을 띌 수 있다는 것을 보여주는 사이트) 은 HTML 마크업을 수정하지 않고, 웹사이트의 모양을 완전히 변형할 수 있다는 것을 보여주었다. semantic 웹 개발의 상징으로, 보이는 것과 연관있는 클래스의 사용을 피하도록 하였다.
언뜻 보면, CSS Zen Garden 은 의존성을 줄이는 좋은 예인듯 보인다. 이 사이트는 기본적으로 마크업과 스타일을 분리하고 있기 때문이다. 하지만, 마크업에 손을 전혀 안대려면 다음과 같은 선택자들을 사용하게 된다:
#sidebar section:first-child h3 + p { }
CSS Zen Garden 의 HTML 은 CSS 를 전혀 신경쓰지 않지만, CSS 는 완전히 HTML 의 구조에 의존적이 되어 버렸다.
CSS 를 관리하는 사람이 HTML 도 관리한다면, 아주 큰 문제가 아니라고 생각할 지도 모르겠다. 하지만, 어느 개발자가 와서 <section> 앞에 <div> 를 추가하게 되면, 위 선택자는 더이상 동작하지 않을 것이다.
CSS Zen Garden 과 같이 작업하는 것은 사이트의 마크업이 변경될 일이 잘 없을 때에는 좋을 수도 있다. 하지만 요즘 그런 웹사이트는 그리 많지 않다.
저렇게 길고 복잡한 CSS 선택자보다는, 변경하려는 요소에 직접 클래스를 설정하는 것이 좋다. 예를들어, 사이드바에 서브메뉴가 있다면, 각각의 submenu 요소들에 submenu 라는 클래스를 추가하는 것이 좋다. 다음처럼 하지 말아라:
ul.sidebar > li > ul {
/* submenu styles */
}
클래스를 추가하면, HTML 과 CSS 의 의존성을 줄이고, 장기적으로 봤을 때 훨씬 관리하기가 쉬워진다. 그리고 markup 을 문서화 (클래스 이름으로) 하는 효과도 얻게 된다. HTML 에 클래스가 없으면, HTML 을 변경할 때, CSS 의 어떤 룰들이 영향을 받을지 알기 어렵다. 클래스가 있는 경우에는, 어떤 style 과 기능들이 적용되는지 한눈에 알기 쉽다.
Classes With More Than One Responsibility
하나의 클래스를 style 과 JavaScript 두가지에서 모두 사용하곤 한다. 클래스 하나로 두가지 일을 할 수 있으니 좋은 것 같지만, style 을 기능과 결부시키는 안좋은 형태이다.
<button class="add-item">Add to Cart</button>
위 예제는 add-item 클래스로 style 된 "Add to Cart" 버튼을 보여준다.
개발자가 이 요소에 click event listener 를 추가하려고 할 때, 이미 존재하는 add-item 클래스를 이용하고 싶을 수 있다. 이미 클래스가 존재하는데 왜 굳이 따로 만들필요가 없지 않나 하고 생각하는 것이다.
하지만, 사이트에 많은 버튼이 같은 style 을 가지고, 같은 자바스크립트 기능을 수행한다고 해보자. 그리고 영업부서에서, 이 버튼들 중 하나를 사람들 눈에 잘 띄게 크게 변경해달라고 했다고 해보자.
자바스크립트 코드가 add-item 클래스를 이용하기 때문에, 이 클래스를 제거할 수 없지만, 버튼의 새 모양을 적용하려면 add-item 클래스를 사용하면 안된다 (그렇지 않으면, 설정값을 모두 취소하고, 새로운 스타일을 설정해야 한다). add-item 클래스를 이용하는 테스트 코드등이 다른 곳에 있다면, 문제는 더 복잡해 진다.
"Add to Cart" 라는 기능이 이 사이트 뿐만이 아닌 다른 사이트에서도 사용하는 코드라면, 문제는 더 심각해 질 수 있다.
JavaScript 를 위해 클래스를 설정하는 것은 좋으나, 이 때에는, 스타일과 기능 두가지를 분리할 수 있는 방법을 사용하는 것이 좋다.
개인적으로는 자바스크립트를 위한 클래스에는 js- 를 앞에 붙인다. 이렇게 하면, 개발자가 코드를 보고 이 클래스의 역활이 무엇인지 한눈에 알아 볼 수 있게 된다.
위 예제를 다음과 같이 변경한다:
<button class="js-add-to-cart add-item">Add to Cart</button>
"Add to Cart" 버튼들 중 하나만 특별한 모양으로 변경하려면, 다음처럼 스타일 클래스를 변경하고, 기능에 관련된 클래스는 그대로 사용하면 된다:
<button class="js-add-to-cart add-item-special">Add to Cart</button>
JavaScript That Knows Too Much About Styling
자바스크립트는 class 를 이용하여 DOM 의 요소를 찾을수도 있고, 요소의 스타일을 변경하기 위해 클래스를 추가하거나 제거할 수도 있다. 하지만 이렇게 추가하거나 제거하는 클래스들이, 페이지 로딩시 보여지는 클래스들과 구별이 되지 않으면 문제가 될 수 있다.
자바스크립트 코드가 style 에 대해 너무 관여하면, CSS 개발자가 stylesheet 를 변경하면서, 의도치 않게 자바스크립트 기능을 망가뜨릴 수 있다.
유저의 액션에 따라, 자바스크립트로 style 을 변형하는 것을 하지 말라는 것은 아니다. 다만 style 을 변경할 때는, 약속된 interface 를 통해서 하라는 것이다. 클래스 이름에 자바스크립트로 변경하는 클래스라는 것을 명시하는 방법을 사용할 수 있다.
내 경우엔, 상태를 변경할 수 있는 클래스들에는 is- 를 앞에 붙인다. 다음처럼 말이다:
.pop-up.is-visible { }
is-visible 이라는 상태를 나타내는 클래스가, 요소의 클래스인 pop-up 에 붙여져 있다. 요소의 상태를 나타내기 때문에, 요소에 붙여서 사용하는 것이다.
is- 등을 붙여서 사용하기로 정하면, 이 규칙이 잘 지켜지고 있는지, CSSLint 나 HTML Inspector 등을 이용하여, 테스트 할 수도 있다.
상태에 관련된 클래스들에 대해서는 Jonathan Snook 의 SMACSS 책에 잘 나와 있다.
JavaScript "Selectors"
document.querySelectorAll 같은 API 나 jQuery 는 CSS 선택자를 이용하여 DOM 의 요소를 찾기 쉽게 하여준다. 아주 편리하지만, CSS 선택자가 갖는 동일한 문제를 갖는다.
JavaScript 의 "선택자" 들 또한, DOM 구조에 너무 종속적이면 안된다. 이런 선택자들은 성능상 느릴 뿐더러, HTML 의 구조를 잘 알아야 된다는 단점이 있다.
이전에 언급한 것처럼, HTML 작업을 하는 개발자는, 기능이나 스타일을 망가뜨릴까 걱정하지 않고, HTML 을 변경할 수 있어야 한다. 기능이나 스타일이 영향을 받을 수 있다면, HTML 에 명확히 표현이 되어 있어야 한다. (역주: 클래스명으로)
자바스크립트가 사용할 클래스에 js- 를 붙이는 방법을 이미 소개하였다. style 클래스와 javascript 클래스를 분리하는 역활을 함과 동시에, 코드를 보는 사람에게, 이부분의 HTML 이 자바스크립트와 연관이 있다는 것을 알려주는 역활을 한다. 클래스명으로 명시하지 않고, 마크업의 구조에 의존한 자바스크립트를 사용한다면, HTML 을 보는 사람이, HTML 이 javascript 에 의해 사용된다는 것을 알 수가 없을 것이다.
DOM 을 길게 사용하는 복잡한 선택자 대신에, 클래스나 ID 를 사용하는 선택자를 사용하는 것이 좋다.
다음 코드를 보라:
var saveBtn = document.querySelector("#modal div:last-child > button:last-child")
이렇게 긴 selector 를 사용하여 HTML 에 클래스를 추가하지 않아도 될지 모르지만, 마크업 변경이 있을 경우, 이 선택자는 동작하지 않을 것이다. 디자이너가 save 버튼과 cancel 버튼의 위치를 바꾸자고 한다면, 위 선택자는 더이상 동작하지 않을 것이다.
다음 처럼 클래스를 이용하는 것이 훨씬 좋다.
var saveBtn = document.querySelector(".js-save-btn")
클래스를 사용하게되면, 마크업을 어떻게 변형하든 상관이 없게 된다.
Classes Are Your Contract
대부분의 HTML, CSS, JavaScript 의존성은, 적합할 때 클래스를 사용하고, 클래스명을 잘 지음으로써 해결할 수 있다.
클래스를 많이 사용하면, HTML 이 이 클래스들을 알게되고, 따라서 많은 클래스를 사용하는 것이, 의존성을 높이는 것처럼 보일 수도 있다. 하지만, 내가 보기에 클래스란, 이벤트나 옵저버 패턴과 유사한 것 같다.
이벤트 기반의 프로그래밍에서는, A 객체가 B 객체의 함수를 부르는 것이 아니라, 특정 조건에서 이벤트를 방생시키고, B 는 그 이벤트를 듣고 있는 형태를 취한다. B 는 A 의 interface 를 많이 알 필요 없이, 어떤 이벤트에 관심을 가질 것인지만 결정하면 된다.
물론, B 가 관심 있는 event 의 이름들을 알아야 되지만, A 가 B 의 함수를 호출하는 것보다는 의존성이 적다고 생각한다.
HTML 의 class 들도 이와 비슷하다. CSS 가 복잡한 선택자를 정의하는 것이 아니라 (위의 비유를 이용하자면, HTML 의 interface 를 일일이 알필요 없이), 클래스 만으로 요소의 스타일을 정의할 수 있다. HTML 은 이 클래스를 이용할지 안할지만 정하면 된다.
자바스크립트도 마찬가지로 DOM 의 구조를 알필요 없이, class 만으로 요소를 선택할 수 있다.
HTML, CSS, JavaScript 를 연결하는 고리는 class 가 되어야 한다. 내 경험으로는, 이렇게 하는 것이 이 세가지를 엮는 가장 좋은 방법이다.
The Future
WHATWG 는 개발자가 HTML, CSS, JavaScript 의 모듈화를 도울 Web Components 라는 것의 spec 을 만들고 있다.
많은 브라우저들이 이 spec 을 구현하면, 내가 이 문서에서 얘기하는 것들은 좀 덜 중요하게 될 것이다; 하지만, 원리를 이해하고 왜 이런 작업이 필요한지를 아는 것이 중요하다.
Conclusion
HTML, CSS, JavaScript 를 편하게 관리할 수 있다는 것은, 개별 개발자들이, 의도치 않은 버그를 발생시키지 않고, 개발을 할 수 있다는 것을 의미한다.
의도치 않은 버그를 발생시키지 않는 좋은 방법은, class 에 의도를 알 수 있는 이름을 지어주어, 다른 사람들이 쉽게 의도를 파악할 수 있도록 해주는 것이다.
다음과 같은 원칙들로 정리할 수 있다:
•복잡한 CSS 선택자보다는, 명확한 클래스명을 사용한다. CSS 와 JavaScript 에서 말이다.
•어떤 요소인지를 구분하여 작업하고, 어디에 있는 요소인지를 기반으로 작업하지 말아라.
•style 과 기능 두가지는 다르다, 두개의 다른 클래스를 이용하라.
•기본 style 과 상태 style 을 구분하라.
위처럼 하려면, HTML 에 많은 클래스를 추가해야 할 수 있다. 하지만 그로써 얻는 이점이 매우 크다. HTML 에 클래스를 추가하는 것은 누구나 할 수 있는 쉬운 일이기도 하다.
|
|
 추천 : 404 |
추천
목록
|
|
