StackOverFlow
클론 코딩을 위해 기존 사이트의 코드를 찾아봤다.
구조는 어떻게 되어있는지,
class명은 어떻게 작명했을지 궁금했다.
프로필 페이지를 만들 것이고, 간단하게 요소를 조금 제거했다.
StackOverFlow - Profile
(link가 따로 마이페이지/프로필처럼 있는게 아니라, "users/{userid}"로 되어있다 !!)
그리고,
아래와 같이 컴포넌트 구조를 그려보았다.
dk,,부끄럽다,,
그럼 이제
기존 사이트의 코드와 비교/분석 해보자.
코드 분석
흥미로운 점은 2가지 였다.
1) 굉장히 많은 div
존재하는 모든 요소를 div로 한 번씩 다 감싸준 느낌이었다.
클론 코딩하며
"이렇게나 div로 다 감싸줘야한다고..?" 싶은 생각이 많이 들었다.
// 상상했던 구조)
<div class="최상위div">
<div class="info">
<div class="info-head">
<a>이미지</a>
<div>생성일 등등</div>
<button>정보 수정 버튼</button>
</div>
<div class="qna">
...
</div>
</div>
</div>// 현실)
<div id="세계관최강자" class="최상위div감싸는div">
<div class="최상위div">
<div class="info감싸는div">
<div class="info">
<div class="info-head감싸는div">
<div class="info-head">
<div class="a감싸는div">
<a>이미지</a>
</div>
<div class="생성일등등감싸는div">
<div>생성일 등등</div>
</div>
<div class="수정버튼감싸는div">
<a>수정버튼</a>
</div>
</div>
</div>
<div class="qna감싸는div">
...
</div>
</div>
</div>
</div>
</div>
2) 명시적이지 않은 class명
id가 있는 요소는 id를 보고
요소의 역할을 짐작할 수 있었지만,
그 외의 요소들의 class명은 명시적으로 작성되어 있지 않았다.
때문에,
많은 div들이 어떤 역할인지 파악하기 어려웠고,
이 역시 클론 코딩하며
'이 div', '저 div'가 어떤 div인지, 역할인지 헷갈림이 많았다.
또한 이상한 class명들을 반복적으로, 중복 사용하고 있었다.
(e.g. d-flex, ai-center...)
이러한 class 작명의 이유가 있을까?
어쩌면, 더 명시적이고 효율적인 코드?
이상해보였던 class명은
보는 바와 같이, css 속성의 줄임말이었다.
특정 색상과 크기는 변수로 지정해서
다른 요소에서도 재활용하고 있는 것을 볼 수 있다.
( e.g. --su16 === calc(16px * -1); )
이렇게 코드를 짠다면
각각의 div들이 중복되어 헷갈릴 순 있겠지만,
초기 세팅의 설계를 통해서
효율적으로 코드를 사용할 수 있겠다는 생각이 들었다.
(1번의 문제도 통일감 있는 css 구성을 위해서라면 이해가 된다.)
핵심 정리
- 반복적으로 사용할 css 속성을 class명으로 만들어 재활용한다.
→ 효율적이고, 통일감 있는 페이지를 구성할 수 있다.
