😎 Things I Learned
✓ Header 레이아웃 컴포넌트
children props를 이용하여 Header와 함께 레이아웃 컴포넌트를 만들어주었다. 이렇게 하면, 쉽게 Header를 다른 컴포넌트 위에 렌더시킬 수 있다. 로그인이나 Header가 없는 컴포넌트는 레이아웃 컴포넌트 바깥으로 빼면 된다. 로그인 상태에 따라, 다르게 렌더시켜주면 쉽게 구현 가능했다.
✓ useUser Hook
브라우저에 저장된 토큰으로 유저 정보를 가져오고 정상적인 토큰이 아니면 자동으로 로그아웃 시키는 함수를 하나의 hook으로 만들어주었다. 유저 정보가 필요한 컴포넌트 어디에서나 Hook을 import해서 유용하게 쓸 수 있었다.
✓ setContext in Apollo Client
Apollo Client의 AuthLink를 사용하면 유저 권한을 확인할 수 있다. setContext로 header에 토큰을 넣어주면 모든 요청의 header에 토큰이 담긴다. 이 토큰으로 서버에서 유저를 확인할 수 있다.
🤔 Things To Remember
✓ 반복적으로 사용되는 로직은 Hook으로 만들기
코드의 양이 비약적으로 줄어들고 내 손도 훨씬 편하다.
✓ Spread Operator in React TypeScript
타입스크립트 리액트에선 객체 전체를 spread operator로 내려주기 위해선 "!" (null이 아님) 연산자를 꼭 붙여주어야 한다.
✓ Styled-Components 쓰기 전에 HTML 태그로 구조 잡기
일단 HTML 태그로 구조만 잡아놓은 다음 styled-components로 바꿔주면 쉽게 CSS 작업이 가능하다.
🤓 Things To Do
✓ 오늘 배운 내용 정리
✓ Hook에 대해 더 공부하기
✓ FEED 블로깅
