😎 Things I Learned
✓ Apollo Client로 로컬 상태 구현
Apollo Client의 Reactive Variables를 이용하여, props를 내려줄 필요 없이 전역에서 상태를 관리하는 법을 배웠다.
✓ Styled Component의 간단한 사용법
Styled Component를 이용하여, 커스텀 스타일 컴포넌트를 생성하고 props에 따라 CSS를 동적으로 변경하는 법을 배웠다.
✓ Apollo / GraphQL 타입스크립트 세팅
Apollo Cilent의 Code Generate 기능으로 서버 API의 모든 query와 mutation의 인풋 그리고 리턴 값까지 자동으로 타입을 정의해주는 법을 배웠다.
🤔 Things To Remember
✓ Styled Component는 React Component다.
CSS와 SCSS만 사용하다 이와 전혀 다른 방식인 Styled Component를 배우니 매우 신기하기도 하고 생소했다. className이나 id가 아닌 컴포넌트를 만드는데, 컴포넌트에 props를 이용하여 CSS를 직접 삽입하는 방식으로 이해했다. 좀 더 익숙해지기 위해서 반복해서 사용해봐야겠다.
✓ Global Styles 유의할 점들
Global Styles를 연습하는데, 조금 다른 부분들이 있어서 헤맸다. 일단, createGlobalStyle 안에는 CSS 속성이 바로 들어가는 것이 아닌, 태그를 먼저 명시해준 다음 그 안에 속성을 넣어주는 것 그리고 컴포넌트를 렌더시키는 부분에서 ThemeProvider처럼 모든 컴포넌트를 감싸주는 것이 아니고, Router 바깥 가장 상단에 단독으로 입력해주어야 하는 점. 이 두 가지를 꼭 기억해야겠다.
✓ GraphQL 타입스크립트 타입 적용
Code Generate를 이용하면 클라이언트의 GraphQL 요청 코드를 자동으로 탐색한 후 서버로 들어가 해당 요청의 인풋과 아웃풋 모두 자동으로 타입스크립트 인터페이스를 생성해준다. 타입스크립트의 유용함을 날마다 깨닫고 있는 중이다.. 대충 작동 원리는 알았지만, 구현 방법이 조금 복잡하다보니 아직 정리가 잘 되지 않은 상태다. 다시 한번 복습해야겠다!
🤓 Things To Do
✓ 오늘 배운 내용 정리
✓ Frontend SETUP 부분 블로깅
✓ 내일도 TIL 쓰기!
