홈으로 홈으로 | 무료회원가입 | 아이디/비번찾기 | 즐겨찾기
추천음악방송메인홈1대1상담음악방송청취
아리랑가요(무료음악채널)
뽕짝아가씨(무료음악채널)
okTrot(무료음악채널)
전통가요(무료음악채널)
미스트롯(무료음악채널)

온라이브스토어(앱다운로드)

환상의뽕짝파티 무료음악
명작트로트메들리 무료음악
트로트메들리관광 무료음악
동영상노래방
가사검색

POP Player
신나는 고스톱
컴퓨터 오목
작은 음악다방
자동러시 웹플레이어신청

보안∵서버∵쿠키
윈도우∵프레임
이미지∵배경
시간∵달력∵계산
상태바∵타이틀바
음악∵영상
폼∵전송∵테이블
키보드∵마우스
효과∵링크∵메뉴
Script∵php
기타
PHP 강좌
윈도우관련팁
웹관련팁
홈페이지제작팁
기본강좌
레지스트리
윈도우서버
리눅스서버
Android
HTML, CSS, JavaScript 의 의존성 줄이기
5년 전
대부분의 사이트들에는 많은 양의 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 에 클래스를 추가하는 것은 누구나 할 수 있는 쉬운 일이기도 하다.
추천추천 : 321 추천 목록
번호 제목
3,020
 [HTML5] <video> - DOM으로 제어하기
3,019
 HTML5 video 태그에서 영상 좌우반전
3,018
 PHP - 특정 태그 및 문자열 추출, 제거
3,017
 [PHP] define과 defined의 차이
3,016
 우클릭 완벽차단 스크립트
3,015
 iframe 높이 100% 맞추기
3,014
 curl 함수를 이용한 HTTP REFERER 변경
3,013
 윈도우10 시스템 파일 및 Dism 검사
3,012
 텍스트 줄바꿈, 글자자르기 CSS
3,011
 jQuery Mobile에서 유용한 코드 10가지.
3,010
 [PHP] dirname()함수와 $_SERVER 관련 상수들
3,009
 [PHP] 파일 크기, 사이즈 불러오는 함수, filesize()
3,008
 [jQuery] jQuery Quick API
3,007
 [ transition ] 링크 hover 색상 변화 속도 조절
3,006
 PHP 5.3.0 에서 사라진 함수들 대체
3,005
 어떤 파일들이 include 나 require 되었는지 확인하는 함수(get_included_files)
3,004
 PHP 날짜 형식 및 계산하기(날짜 더하고 빼기)
3,003
 jQuery Mobile에서 유용한 코드 10가지.
3,002
 값이 배열 안에 존재하는지 확인하는 in_array함수
3,001
 사용자가 웹브라우저에서 뒤로가기를 했을때 감지하는 방법
3,000
 [jQuery]버튼 활성화, 비활성화
2,999
 jQuery show() / hide() / toggle() 사용법
2,998
 jquery 여러가지 이벤트
2,997
 border-radius 속성
2,996
 네이버 오픈API 음성합성 API 사용하는 PHP 샘플코드
2,995
 UTF8 한글 자르기..
2,994
 iconv 에러 발생시 계속 처리하기 옵션
2,993
 [PHP] 현재 페이지의 도메인 , URL 정보 알아내기.
2,992
 [PHP] 막강 기능 배열..
2,991
 [CSS] - Input clear `X ` 버튼 제거 ( IE, Chrome, Firefox )
2,990
 [Mobile] - 모바일웹 Href 태그속성들
2,989
 [JqueryMobile] - 현재화면의 가로세로 사이즈 구하기
2,988
 [JqueryMobile] - 화면의 가로, 세로 사이즈 구하는 방법
2,987
 jquery로 가로 넓이(width), 세로 높이(height) 자동 조절
2,986
 iframe 높이 jquery로 자동조절하기
목록
추억의가요방(가사포함)
인기절정뽕짝파티
인기트로트모음
지루박디스코메들리
밤무대애창곡
전자올겐경음악
세월따라노래따라
가슴시린트로트
트로트쌍쌍파티
7080추억속으로
종합성인가요방
못잊을옛날노래
카바레 음악
트롯디스코팡팡
관광 메들리
트롯카페
가요감상실
추억의옛노래
스페셜가요광장
BillBoard Free
추천가요모음
경음악.전자올겐
스페셜음악여행
WOLRD POPs
K-POP\BillBoard
POP TOP BEST

최신인기가요특집
추천가요\인기
F뮤직 인기\발라드
F뮤직 애창\트로트
트로트성인가요
인기가요
프리미엄 POP
경음악\기타
프리미엄 최신가요
프리미엄 성인가요
가요축제\트롯1번지
댄스\메들리\리믹스
카페\명상\경음악\기타
뮤직트로트 부산광역시부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.