20220113 Frontend 일일 개발일지
===

###### tags: `20220113`

# 개발 내용

## HeaderTop 관련


위사진에 GNB, 이 부분을 구현할 것이다!

### 고민거리

저 사진에 4개의 버튼의 구성이 ++조건에 따라 다르다!++

1. 회원이 로그인이 된 상태

> 고객센터 / 관심상품 / 마이페이지 / 로그아웃

이라고 보여야 할 것이고,

2. 로그인 되지 않은 유저라면

> 고객센터 / 관심상품 / 마이페이지 / 로그인

이 보여야 할 것이다.

##### ==따라서 해당 `HeaderTop` 은 렌더링 될때마다 로그인 여부를 알고 있어야 한다.==

> 그렇다면.. 매번 post 날려서 확인을 하는데, `axios` 로 할수야 있겠는데, 매번 하는게 좋을까?

##### Axios default 설정이라는 것을 해보자!


이렇게 `customAxios` 를 만들어 놓으면,

1. 매번 ENDPOINT 를 접근 안해도 된다. 추가적인 url 만 붙이면 된다.
2. headers 에 token을 자동으로 넣어준다.

이런 장점이 있더라!

#### 하지만... 그 과정에서 에러 발생.

1. `window` 객체 접근 불가능 이슈


`window` 가 없다고 한다...

> [color=#5bf7ae]nextJs는 SSR이라, 서버사이드에서 렌더링할때는 브라우저의 `window` 객체를 모르기 때문에 `window` 객체에 접근을 못한다고 나온다.

typeof window !== 'undefined' ? window.localStorage.getItem('creamToken') : ''

이런식으로 먼저 `window` 타입 체킹을 해주고 넘어가는것이 해결법!

##### 근데 Axios default setting 을 하는 모듈에서 토큰을 `get` 하는 것도 좋지만, 토큰 관련 util을 모듈화하는게 좋겠다 생각했다.
> 왜?) `token` 은 자주 get하는 경우가 많을 것이라 판단했다. E-commerce 서비스 특성상 유저 토큰을 자주 줄거라 생각했기 때문이다!

따라서, 모듈화를 했다!


위와 같이 `getToken`, `setToken` 모듈화를 진행!


**모듈화한 내용을 위처럼 반영했다!**

---

## 폰트 설정


보기만 해도 넘나 못생겼다.


`pages/_app.tsx` 를 작성하고,


이렇게 global.css를 적어두었더니,


깔끔하게 적용 완료!

---

## HeaderMain


==너무 이쁘다==

아주 간단하게 구현했다.

1. 미리 만들어 놓은 `HeaderMainItem` 3개와 `Logo`, `Icon` 컴포넌트를 조합했다.
2. 필요한 `Link` 를 바인딩하고,
3. 반응형을 살포시 얹었다.

@media screen and (max-width: 770px) {
    > li {
        display: none;
    }
}

#### 따라서 최종 GNB는!


이렇게 구성했다~!

---

## 컴포넌트 내부 `import` 순서 정리

순서가 너무 중구남방인 `import` 순서가 너무 보기 싫었다.


1. React, Nextjs 관련 라이브러리
2. 필요한 컴포넌트들
3. 스타일링에 필요한 라이브러리

> [color=green]해당 컨벤션 모두 적용 완료!