[Youtube clone 개인 프로젝트] 코드 리뷰

카카오x구름 풀스택/프로젝트

[Youtube clone 개인 프로젝트] 코드 리뷰

꾸주니=^= 2024. 11. 20. 16:45

# 24.11.19 youtube clone review

1. div 남용 주의 (그렇다고해서 너무 아끼는것은 안됨. 가장 어렵지만 적정선을 지킬것)

2. <hr /> 태그는 문장의 단락을 구분짓기위한 용도로, 단순히 화면에 선을 긋기위한 용도라면 차라리 div에 border-bottom을 넣어주자.

3. 반응형 디자인을 위해 px 단위보다는, rem 또는 em 단위사용 추천.

4. 전역적으로 body의 font-size를 10px(or 16.5%)로 설정하면 rem으로 다루기 편하다.

5. 버튼을 의미하는 글자가 적혀있는 등 장식을 위한 요소로 삽입되는 이미지라면 CSS의 background 또는 가상요소를 활용해보자.

6. 무언가가 연관이있는 목록이 있는 컨텐츠는 ul&li 요소의 사용을 고려해보자. (무분별한 div container&wrap 사용 방지) 참고 ul의 하위요소는 li만 들어갈 수 있다. li 하위에 해당 요소를 넣자.

```html
<ul>
  <li>
    <div></div>
  </li>
</ul>
```

7. section = 문단을 나누는 태그 & article = 혼자 따로 동떨어져있어도 어색하지 않은 컴포넌트
두 태그의 사용목적을 잘 생각해서 container&wrap으로 사용하는것도 좋은방법.

8. h태그 사용하는버릇을 갖자. 웹페이지에 h1태그는 단 한개, 보통 해당 페이지의 로고에 차용한다. 유튜브의 경우 헤더의 로고가 h1에 해당한다.
그 외에 h2, h3, h4,는 쓰는 횟수는 상관없으나, 문맥을 따라 잘 나누어서 배분해보자.

9. html의 태그를 미적용도(css)로 사용하지 말자. ex) <strong>(bold체), <em>(기울임꼴) 등
태그의 사용 용도를 파악하여 `정보`를 주는것이 태그이다. 페이지에서 쓰이는 용도를 다시 한번 생각해보자. 참고 <strong>, <em> 우리가 resetcss를 적용하고 보면 그냥 <div>, <p>와 별반 다를바 없는 모양이지만 스크린리더 등으로 웹을 읽어내렸을때 강조해준다거나 하는 등 문맥의 파악에 도움을 주는 text 태그들이다. 시각적인 강조가 필요하다면 CSS로 별도 적용을 하자.

10. 이미지의 부가설명을 도와주는 alt값은 장식용으로 넣은 이미지가 아닌이상 꼭! 간단한 설명이라도 적도록 해보자.
간단한 예로, 시각장애인이 웹에서 모달을 닫으려고하는데, X모양 이미지를 넣은 닫기버튼에 alt값이 없으면 스크린리더는 단순히 버튼 이라고만 읽기때문에 그 버튼이 뭘하는 버튼인지 알지못해 이용에 어려움을 겪는다.

11. 클라이언트&고객들은 뚝뚝 끊어지는 애니메이션을 선호하지않는다. 부드럽게 이어지는걸 좋아한다. (불편감을 느낌)

12. 시맨틱한 마크업은 검색엔진 최적화(SEO)에 중요하다.

13. html의 가장 main 파일명은 index.html이다. (잊지말자. 컴퓨터는 바보다. 우리가 약속을 어기면 컴퓨터는 멍청이가 된다.)

14. class naming의 규칙성이 필요하다. 개발은 혼자하는게아니라 함께 하는 것이므로 class명만봐도 뭐하는앤지 알수 있게 짤 수 있도록 해보자.

15. cursor옵션 적극활용하자.

16. html의 기본 구조는 꼭! 잘 챙겨쓰자. lang이 없어지면 SEO에도 영향이 간다.

17. 시맨틱한태그&class명의 명시화가 잘 되면 쓸모없는 주석이 필요없어진다. 주석은 꼭 필요한 부분에만 작성하도록하자 (메모리낭비)

18. user-select : none; 사용하면 사용자가 텍스트를 복사할 수 없게 할 수 있다.

19. VSC의경우 html:5말고 !로도 html의 기본 규격 생성이 가능하며, "스니펫"을 활용하여 나만의 템플릿으로 바꿀 수도 있다. (lang en -> ko-KR ==> 기반언어 영어-> 한국어)

20. Cascading Style Sheets. CSS는 위에서 아래로 흐르는 "규칙성"을 가지고 있으며, 중복작성하게되면 우선순위가 높은 것&아래쪽에 작성된 것이 먼저 적용된다. 작성에 유의하자.

21. :root를 적극 확용하자.

```css
:root {
  --main-background-color: #fff;
  --main-button-color: #000;
}

button {
  color: var(--main-background-color);
}
```

root로 템플릿을 짜두고, 필요한곳에 변수를 넣어 사용하면 유지보수성이 높아진다. 

23. 시맨틱한 마크업이 어렵다면 우리가 자주 보는 사이트들의 단락을 구분해보는것부터 연습해보자.