프로젝트 (4) 썸네일형 리스트형 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로 구성되어 있는.. 리액트 프로젝트 배포를 리버스 프록시 구조로 개선하기 http 완벽 가이드 책을 공부하면서 http 2.0과 1.1의 차이를 학습했고 현재 제가 진행중인 최근 프로젝트에서 썸네일 같은 이미지들을 많이 다룰 일이 생겼고 슬슬 배포도 진행중인 상황이라 http 2.0이 많이 필요한 상황이었습니다. 스터디를 통해 알게된 것은 http 2.0은 https 위에서만 돌아간다는 것입니다. (브라우저 정책) 그래서 프로젝트에선 이미 웹서버와 let's encrypt를 이용해 인증서를 발급받고 https를 구축한 상태이기 때문에 문제가 없지 않을까 토론하던 중 문제를 발견하게 됩니다...! 바로 위 사이즈의 as-is 상태처럼 프론트 빌드 파일이 있는 웹서버하고는 https가 적용되지만 js가 브라우저에서 돌아가면서 api 서버와 직접적으로 통신하게 되는 구조여서 이 a.. CSS 여백을 컴포넌트로 관리하는 이유 주말마다 프론트 개발자 친구와 같이 클론코딩을 하고 있던 중 이해하기 어려운 코드를 보게 되었습니다. 이 사이트는 컴포넌트간 여백을 위 코드처럼 컴포넌트로 관리하는 것입니다. 굉장히 간단하지만 이유를 생각하기 어려웠습니다. 왜 저렇게 하는 걸까? 보통은 margin을 주든, padding을 주든지 할텐데 큰 이슈는 아니어서 그냥 저는 css로 margin을 주는 식으로 개발을 진행했습니다. 그러던 중에 다른 페이지에서 이전에 활용한 컴포넌트를 재사용하는 일이 있었는데 이전에 사용했던 여백이 컴포넌트 코드에 포함되어 있어서 여백을 수정해야 하는 상황이 발생했습니다. 그래서 제가 했던 방법은 여백을 props로 margin을 조정하여 주게끔 구현하고 있었는데 문뜩 위 코드가 떠오른 겁니다. 여백 자체를 컴포.. 이전 1 다음
