프로젝트/모두의파티 (2) 썸네일형 리스트형 css-in-js 컴포넌트의 성능 개선과 버그 해결 (feat. useInsertionEffect in React18) 토이프로젝트로 하고 있는 모두의파티 서비스에서 차트를 보여주는 것이 필요했다. 처음엔 차트 관련 라이브러리들을 이용하다가 커스텀 기능들이 마음에 들지 않아서 css-in-js 방식으로 직접 라이브러리를 만들고 있었다. 차트를 구성하는 선, 막대 형태들을 hook으로 만들어서 필요한 형태에 따라 선언하고 각 형태 hook에서는 css-in-js 방식이기 때문에 style 태그를 만들어서 document.head에 추가해준다. 스타일을 추가해주는 역할이기 때문에 useEffect보다 우선적으로 실행되어 동기적으로 처리되는 useLayoutEffect에서 관련 처리를 넣었다. 차트 관련 라이브러리를 만들다보니 이 훅을 많이 쓰게 되는 것 같다. 문제는 각 형태 hook에서 스타일을 계산하는데 간혹 디바이스 크.. 모두의파티 서비스 인증 서버 설계(JWT) 최근 카카오에 다니는 친구와 모두의파티 이름으로 토이프로젝트를 설계하고 있다. 가장 먼저 모든 페이지에 공유되는 토큰을 설계하기 위해 논의하였는데 시작부터 토론 주제가 많았다. 우리 서비스는 회원가입이 필요한가? 사용자의 접근성을 위해 카카오 로그인 API를 이용하자. 따로 정보를 더 받을 수도 있지만 우선 카카오 로그인만으로 충분해 보인다. 어떤 방식으로 인증할 것인가? JWT 방식을 사용하기로 하자. 매번 DB를 조회하지 않아도 되니 서버 부담도 줄고 인증도 빨라서 우리 서비스에 적합하다. 카카오 로그인 API 문서에서도 지원하고 있다. JWT는 무엇인가? Json Web Token의 약자로 JSON으로 인증 정보를 나타내는 문자열이다. header, payload, signature로 구성되어 있는.. 이전 1 다음
