CSS와 html 디렉토리 구조(예비코스 1-2주차)

들어가기에 앞서

제가 앞으로 위 카테고리에 작성할 내용은 정글의 교육 배포자료에는 나와있지 않지만, 이런 부분을 찾아보고 싶다 해서 찾아보는 내용입니다.

아시는 분들은 아시겠지만 크래프톤 정글의 사전 학습 자료는 배포 및 복제를 무단으로 할 시 법적 처벌을 물을 수도 있다는 경고문이 써있습니다.
따라서 위 카테고리의 글 역시(본교육에 혹시 합격한다면 어떨지 모르지만) 정글에서 이러한 것을 가르친다의 내용보다는
내가 정글에서 이런 것을 배웠더니 이러한 것이 궁금해졌다 혹은 찾아봐야했다에 가까운 내용들입니다.

관계

css와 html 그리고 js의 관계는 어떻게 될까?
간단하게 정의하자면 css는 디자인, html은 뼈대, js는 이벤트 적용의 역할을 하여준다.

디렉토리 구조

놀랍게도 css와 html을 사용할 때에 정해진 디렉토리 구조는 없다고 한다.
코틀린만 예시로 들더라도 패키지는 모델, 뷰, 뷰 모델로 나누고 그 안에 클래스들은 파일명과 일치하도록 하라는 강요에 가까운 권장사항이 있었는데 css와 html의 경우 통상적인 디렉토리 구조만 언급이 되고 있었다.

통상적인 디렉토리 구조

project/
|-- index.html
|-- css/
|   |-- styles.css
|-- js/
|   |-- main.js
|-- images/
|   |-- image1.jpg
|   |-- image2.png
|-- fonts/
|   |-- font1.ttf
|   |-- font2.woff

css와 html js를 모조리 분리하고 폰트를 따로 import하여주는 모습을 확인할 수 있다.
나처럼 깃허브 블로그를 주로 사용하는 분이라면 아마 자신의 블로그 디렉토리 구조와 유사할 것이다.

왜 분리해야할까

나는 사실 정글 1-2주차를 공부하던 당시(지금 3챕터 공부중) 스타일 시트를 분리하는 법을 배웠고, 자연스럽게 모든 파일을 분리하여 작성하였다.
그 이유 중 하나는 유지와 보수를 위한 것이었는데 파일의 분리와 유지보수가 정확히 어떤 관계성을 가지는지에 대해 잘 모르는 사람이라면 아마 이 글이 도움이 될 것 같다(다른 언어에 있어서도 어느 정도는 통용될 이야기)

하드 코딩의 지양

나는 우테코 프리코스를 하면서 처음 들어본 이야기였지만, 전공으로 코딩을 접한 사람이라면 학교에서부터 들어봤을 기본적인 이야기이다.
하드 코딩을 하게되면 생기는 문제는 크게 컴파일러가 주는 편의 기능에서 제외와 수정시의 불편함이 있을 것이다.
스타일 시트를 분리하는 작업 역시 하드코딩의 지양과도 연결이 된다. 이를 키워드로 설명하자면 코드의 강력한 결합으로 인하여 유연성 저하및 컴파일러 최적화의 어려움으로 나타낼 수 있다.

가독성의 증가

첫번째로 말한 것과 비슷한 맥락이다.
아마 코딩을 좀 해본 사람이라면 누구나 깃허브를 들어봤을텐데, 이 깃허브의 철학 중 하나가 개방형 협업이다.
즉 개발자가 되기 위한 작업을 한다는 것만으로도 우리는 협업을 염두해두어야 한다는 말이다.
소스코드를 분리하고, 디렉토리 구조를 지키는 등의 일들은 가독성 증가를 통해 바로 이 협업의 효율성을 극대화하는 데에 필요한 작업이다.

테스트 용이성

어떤 테스트 코드를 짤 때 흔히 이야기하는 주요 내용 중 하나가 도메인 단위의 테스트이다.
도메인 단위에 대해 간단히 설명하자면 문제의 요구사항을 쪼개어보았을 때 그 각각의 요소들을 도메인이라고 부른다.
코드에 있어서의 분리(디렉토리 구조의 분리든 클래스의 분리)는 도메인 단위의 테스트를 보다 간편하게 할 수 있도록 도와준다.