[FE_Bootcamp] Pre-Project_구현 <header>

footer에 이어 header를 구현하기로 했다.

비교적 간단했던 footer에 비해 header는 구현해야 할 기능도 많고, CSS도 꽤나 복잡했다.

일단 예상 시간을 6시간으로 잡긴 했으나,.,.지켜질지는,.,.,.

---

1. 구현해야 하는 기능

실제 Stack Overflow footer

 

1. 로고를 누르면 메인 페이지로 이동 → router 이용
2. 각 링크를 누르면 해당하는 페이지로 이동 → <a> 태그 이용(하이퍼링크)

사실 footer의 기능 자체에는 크게 신경쓸 것이 없다. 

링크를 달아주는 것이 가장 큰 할일이고, 그나마 신경쓸 것은 hover 했을 때 글자 색이 바뀌는 것 정도?

때문에 기능 구현보다는 CSS를 어떻게 설정할지를 중점적으로 생각해 보았다.

---

2. Wire-Frame

비로그인 화면 header

 

footer와 비슷하게 header 태그 안에 내용물을 담을 container div를 넣고, container 내부를 각각의 div로 나누어 구성하였다.

특이한 점이라면 input 태그에 종속되는 검색 도움말 창이었는데, 이는 position을 이용해 구현하였고, onfocus, onblur를 통해 포커스 여부에 따라 나타나고 사라지게 하였다.

 

로그인 화면 header

로그인 했을 때 역시 마찬가지. 같은 방법으로 헤더를 만들어 주면 된다.

---

3. 결과물

로그인 이전 header

 

로그인 이후 header

 

처음엔 많이 헤맸지만 하면 할수록 비슷한 부분이 많아 다행히 뒷부분에서는 편하게 할 수 있었다.

특히 같은 컴포넌트를 사용하는 경우 props로 옵션만 바꾸어 주면 됐기 때문에, 매우 쉽게 컴포넌트를 재사용 할 수 있었던 것 같다.

---

4. Done & Todo

 

아직 다른 페이지들이 만들어지지 않아 기능 구현은 조금 뒤로 미루게 되었다.

---

5. 더 공부해야 할 것

• flex
• position
• border

검색 도우미를 만드는 도중 position을 어떻게 설정해야 할지 감이 오지 않아 실제 페이지를 참고해 보았다.

position 공부가 좀 필요할 것 같고, 화살표 모양을 border 하나만으로 구현하는 내용이 있었다.

나는 전혀 감을 잡지 못해 다른 페이지를 베껴왔지만, border를 조절하면 삼각형을 만들 수 있다는 아주 놀라운 사실을 알게 되었다.

이 부분도 공부를 해봐야 할 것 같다.