깃허브 헤더 클론 코딩 회고록
현재 깃허브 헤더
준비
먼저 레이아웃을 어떻게 구성할지 생각했다.
크게는 header > div.container > .container-left & .container-right로 구성하였다.
.container-left와 .container-right은 다음 표와 같이 구분했다.
| 구분 | 내용 |
|---|---|
| .container-left | logo-icon, Why Github?, Team, Enterprise, Explore, Marketplace, Pricing |
| .container-right | input, Sign in, Sing up |
hover를 이용하여 메뉴 보이기
서브메뉴가 있는 메뉴에 마우스 호버를 하면 서브메뉴가 보이게 하였다.
조건
- 먼저 서브메뉴는 처음에는 보이지 않아야 한다.
- 해당 메뉴에 마우스 호버 시 해당 메뉴의 서브메뉴만 보여야 한다.(다른 서브 메뉴가 보이가 안됨)
- 서브 메뉴에 마우스 커서가 움직여도 서브 메뉴는 계속 보여야 한다.
해결
첫번째 조건을 만족하기 위해서는 해당 메뉴의 css에 :hover효과를 주어서 나타나는 효과를 주었다.
두세번째 조건을 만족하기 위해 메뉴와 서브메뉴를 부모 자식의 관계로 구성하고, 부모 메뉴에 hover시 자식인 서브메뉴를 보이도록 설정하였다.
내가 만든 헤더
지적받은 점(코드 리뷰)
| 번호 | 지적받은 점 |
|---|---|
| 1 | favicon 추가하기 |
| 2 | Sign in & Sign up button으로 바꾸기 |
| 3 | css 코딩컨벤션 따르기 |
| 4 | 중복된 css선택자 줄이기 |
| 5 | class명을 좀 더 명시적으로 짓기 |
해결
1. favicon 추가하기
<head>
...
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" />
...
</head>favicon이란 그 사이트의 아이콘을 나타내는 것으로, 브라우저창의 탭에 좌측에 있는 icon이다.
2. Sign in & Sign up button으로 바꾸기
기존에는 div로 만들었었다. 왜그랬는지는 모르겠다ㅋㅋ
이것을 button태그로 바꾸어 주었다.
3. css 코딩컨벤션 따르기
코딩 컨벤션은 처음 들어봤다. 새로운 것을 알게되어서 너무 좋았다.
그래서 블로그로 따로 작성해 두었다.
CSS_coding_convention
4. 중복된 css선택자 줄이기
나는 기존에 가장 하위에 있는 class를 선택할 때에 부모의 모든 class명을 적어주었다. 이것이 틀린 방법은 아닌데 바르지 못한 방법이었다. 적은 구조를 가지고 있으면 상관없지만 매우 깊은 구조를 가지고 있으면 가독성이 매우 떨어지고, 유지보수를 어렵게 한다.
그래서 정확히 그 class의 위치를 구분할 수 있는 부모 class들만 적어서 가독성을 높이고 유지보수에도 편이하게 만들어 줬다.
5. class명을 좀 더 명시적으로 짓기
기존에는 class명을 menu안에 list를 넣고, subMenu안에도 list를 넣어서 굉장히 헷갈리게 이름을 지어놨다. 이러한 것은 클린 코드에서 변수와 함수 등의 이름을 잘짓는것이랑 비슷하다고 생각되었다. 명시적으로 이름을 적어 유지보수와 가독성을 높이는 것이 큰 프로젝트에서 중요하다고 생각한다.
nav의 menus, subMenu의 list로 바꿔주었다.
사실 그렇게 맘에 들지 않아 좀 더 고민을 해봐야겠다.
결론
처음에는 되게 쉬운 프로젝트라고 생각했지만 뚜껑을 열어보니 아니었다. 지적받은 점이 혼자만 공부했던 나의 특징?특성?이 잘드러났던 것 같다. 지적받은 점을 항상 생각해서 똑같은 문제로 다시 지적받지 않고 점점 성장하는 개발자가 되고 싶다!!!
