설계7 [POLABO] 온보딩 튜토리얼 공통 컴포넌트 만들기 목차1. 프롤로그2. UI 설계: div에 구멍을 뚫을 수는 없나?3. 유연한 공통 컴포넌트를 위한 Compound component 패턴4. 여러 페이지에서 독립적인 상태 관리하기5. 마치면서1. 프롤로그1.1. Polabo에서 튜토리얼을 도입하게 된 배경서비스를 사용할 때 제작자가 의도한 flow대로 기능을 사용하게 하려면, 사용자가 UX를 직관적으로 이해할 수 있어야 한다. 하지만 우리가 아무리 쉽게 만들었다고 해도, 사용자들이 우리 의도대로 모든 기능을 꼼꼼히 써주는 경우는 드물다.Polabo 프로젝트에서도 유저 반응 테스트를 진행한 결과, 예상과 달리 많은 사용자가 특정 기능의 존재조차 모르는 경우가 있었다. 예를 들어, 폴라로이드 사진을 클릭하면 크게 볼 수 있는 기능이 있는데, 이를 알지 못.. 2024. 12. 22. 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. [WebSocket] 비정상 종료 핸들링 전략 의도적으로 연결을 끊는 상황을 제외하고 비정상적으로 웹소켓 연결이 끊어졌을 때 재연결하는 로직이 없다면 사용자 경험에 치명적일 것이다. 대략적인 class 구조는 다음과 같으며, 하나씩 채워보자. c.f) secondary token 관련해서는 다음 글을 참고하자 => https://hwanheejung.tistory.com/43 import SockJS from 'sockjs-client'; import { Client, StompSubscription } from '@stomp/stompjs'; class WebSocketClient { constructor(url) { this.url = url; this.client = null; // 추가 } async getSecondaryToken() { /.. 2024. 7. 31. [DizzyCode] 디스코드 클론코딩, 시작! 목차 - 프로젝트의 시작 - 우리끼리의 용어 - 아키텍처 선정: FDA - 협업을 위한 프로젝트 기본 세팅 - 상태관리: React Query + Zustand 1. 프로젝트의 시작5월 말 황00씨로부터 간단하게 프로젝트 하나 할 건데 할래?라고 제안이 들어왔다. 7월은 절대 안 넘어갈 거고 6월까지 무조건 끝낼 수 있다고 했다. 심지어 6월에는 기말고사가 있는데 시험준비와 병행을 해도 충분히 끝낼 수 있을 정도로 간.단.한. 프로젝트라고 했다. 이 말을 믿어버렸다. (취업사기.. 오히려좋아?) 프로젝트는 디스코드를 클론코딩하는 건데, 안 그래도 채팅을 만들어보고 싶었어서 흥미롭게 시작할 수 있었다. 그리고 클론코딩이라 기획 단계를 스킵할 수 있어서 기술에만 집중할 수 있다는 점이 특히 마음에 들었다. .. 2024. 7. 2. [DizzyCode] WebSocket+JWT 시나리오 채팅방에 들어와서 채팅을 한다고 가정해 보자. jwt 토큰을 검사해야 하는 시점은 ①웹소켓으로 업그레이드할 때, ②STOMP 연결할 때, ③메시지를 전송할 때 등등이다. 2, 3은 별로 문제가 되지 않는데, 1번에서 문제가 생긴다. 어떤 문제인지 알아보고, 최적의 시나리오를 짜보자! 1. 웹소켓 업그레이드 시 무엇이 문제인지 보려면 우선 웹소켓 업그레이드 과정을 이해해야 한다. ① 초기 HTTP 요청: WebSocket 연결은 초기 HTTP GET 요청을 통해 시작되며, 이 요청은 WebSocket 프로토콜로 업그레이드할 것을 요청하는 Upgrade 헤더와 함께 전송된다. GET /ws HTTP/1.1Host: localhost:8080Upgrade: websocketConnection: Upgrad.. 2024. 5. 29. [TaskStock] 인증/인가 로직 설계하기 with JWT 프롤로그프로젝트 TaskStock기간 기획, 개발 : 2023.11.7~ 베타테스트 : 2024.2.22~3.14 정식 출시 : 2024.3플랫폼iOS, Android언어FE: TypeScript / BE: JavaScript프레임워크 FE: React Native / BE: Node.js Express라이브러리Redux Toolkit TaskStock은 실제로 사용자를 받을 것을 염두하고 만든 서비스다 보니 보안에 신경을 많이 썼다. 우리가 JWT를 쓰면서 어떤 고민을 거쳐 어떤 로직을 설계했는지 소개해보려고 한다. 로직 설계 과정1. 일반로그인 로직 설계 이메일, 사용자 이름, 비밀번호를 받고 이메일은 unique하다. 토큰에는 유저 id가 포함되고, 개인정보와 관련된 것들은 최대한 토큰에 포함시키지.. 2024. 3. 28. 이전 1 2 다음
