Projects,Activity18 [POLABO] 온보딩 튜토리얼 공통 컴포넌트 만들기 목차1. 프롤로그2. UI 설계: div에 구멍을 뚫을 수는 없나?3. 유연한 공통 컴포넌트를 위한 Compound component 패턴4. 여러 페이지에서 독립적인 상태 관리하기5. 마치면서1. 프롤로그1.1. Polabo에서 튜토리얼을 도입하게 된 배경서비스를 사용할 때 제작자가 의도한 flow대로 기능을 사용하게 하려면, 사용자가 UX를 직관적으로 이해할 수 있어야 한다. 하지만 우리가 아무리 쉽게 만들었다고 해도, 사용자들이 우리 의도대로 모든 기능을 꼼꼼히 써주는 경우는 드물다.Polabo 프로젝트에서도 유저 반응 테스트를 진행한 결과, 예상과 달리 많은 사용자가 특정 기능의 존재조차 모르는 경우가 있었다. 예를 들어, 폴라로이드 사진을 클릭하면 크게 볼 수 있는 기능이 있는데, 이를 알지 못.. 2024. 12. 22. GraphQL 적응기 - RESTful 마인드셋에서 벗어나기 위한 몸부림 목차1. 공부한 바에 의하면요.. 2. 지금까지 GraphQL을 RESTful하게 쓰고 있었어요 - 네이밍도 GraphQL스럽게 - Single Query Pattern (같은 Node 타입에 여러 쿼리를 쓰고 있진 않나요)3. GraphQL의 데이터는 '그래프'이다 (Resolver Chaining, Field-based 설계)4. GraphQL 프로젝트 중간 회고5. 마치면서 1. 공부한 바에 의하면요.. 며칠 전에 유튜브를 돌아다니다가 영상을 하나 발견했다. Apollo Client의 maintainer로 일하고 있는 Lenz와의 인터뷰 영상이었는데, 여기서 원래 Apollo Client에 Suspense 기능이 도입된 설명을 들으려고 했다. 그런데 영상 초반에 GraphQL에 대해 간.. 2024. 12. 7. Optimization(1): Throttle & Debounce 목차- 소개- ResizablePanel: Observer 패턴 + Throttle- Player: Debounce로 효율적인 이벤트 처리- Search: 사용자 입력에 최적화된 Debounce0. 소개현재 진행중인 프로젝트는 Spotify에 가사 퀴즈 기능을 추가한 애플리케이션이다. 이번 프로젝트에서는 Frontend에서 다양한 최적화 기법들을 적용해 봤는데, 이것들을 시리즈로 정리해보려고 한다. 이번 글은 이 시리즈의 첫 번째 글로, 프로젝트 곳곳에 적용된 Debounce와 Throttle 기법을 다뤄보고자 한다. Optimization Series (업데이트 시 링크 추가 예정)(1) Debounce & Throttle(2) Caching strategy(3) Optimistic update us.. 2024. 12. 5. Apollo client의 캐시가 Next.js를 만나면: SSR, RSC + Next.js 15의 바뀐점 목차- Apollo client의 Normalization cache- SSR에서의 in-memory cache 사용이 data leak를 초래하진 않을까?- Server, Client의 캐싱 동기화 메커니즘- RSC에서의 캐싱- 마치면서- 번외) Next.js 15에서 바뀐점 Apollo client를 next.js 프로젝트에 적용하면서, client side에서의 캐싱뿐 아니라 SSR, RSC에서 어떻게 캐싱 시스템이 동작하는지, 그리고 next에는 이미 훌륭한 캐싱 메커니즘이 built-in 되어 있는데, apollo client와 어떻게 시너지가 나는지 공부할 필요성을 느꼈다. 이것저것 알아보니 생각보다 복잡했고, 이해하는 데에 시간이 오래 걸렸다. 아직 완벽하게 이해한 건 아니지만, 지금까지 이.. 2024. 12. 4. 쿠키가 도착하지 않는 이유- Express, Next.js, Browser 간 쿠키 전달 목차- SessionId를 쿠키로 전달하는데 쿠키가 오지를 않는다...? - Browser의 쿠키 - Application Server > Next Web Server > Browser 로의 쿠키 전달 과정 - Next.js SSR 요청 시 쿠키의 흐름- 쿠키가 오가기 위한 조건 - 해결 1. SessionId를 쿠키로 전달하는데 쿠키가 오지를 않는다...? 1.1. 문제 상황저번 포스팅에서 client-server 간의 인증은 Session 방식을, server-spotify server 간의 인증은 JWT를 사용하는 시스템을 설계했다. Spotify API와 자체 DB를 통합한 인증 시스템 - JWT+JWT vs Session+JWT목차- 다양한 JWT 전략- 고민 1: Spotify Login .. 2024. 11. 19. Spotify API와 자체 DB를 통합한 인증 시스템 - JWT+JWT vs Session+JWT 목차- 다양한 JWT 전략- 고민 1: Spotify Login page를 띄우기까지의 과정 - 고민 2: Next.js의 Route Handler- 고민 3: JWT+JWT vs Session+JWT- 마치면서 다양한 JWT 전략지금까지 JWT, OAuth를 이용한 프로젝트를 4-5개 정도 진행하면서, 단 한 번도 동일한 시나리오를 경험한 적이 없다. 각 프로젝트마다 요구사항이 다르다 보니, JWT 전략 역시 매번 새로운 접근이 필요했다. 지금까지 경험한 상황을 간단히 정리해 보면 다음과 같다. 1. Third-party 서버에서 유저 정보만 받아온 뒤, 자체 토큰을 발급한다. (TaskStock, Polabo)초기 인증을 위해 외부 서버로부터 유저 정보를 가져온 후, 자체 서버에서 별도의 JWT를 발.. 2024. 11. 6. 이전 1 2 3 다음
