Projects,Activity12 [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. WebSocket+STOMP: 개념 이해부터 구현까지 [목차]- 프롤로그- STOMP- STOMP의 Prefix- 채팅 흐름을 이해해 보자 0. 프롤로그우선, 웹소켓이 처음이면 아래 글을 참고하자! [Network] Web Socket목차0. 프롤로그1. 다양한 통신 방법2. WebSocket 통신 원리 3. HTTP vs WebSocket4. WebSocket의 한계와 해결 방법 0. 프롤로그지금까지 프로젝트를 하면서 사용했던 통신은 클라이언트가 먼저 요청을 보내hwanheejung.tistory.com 프로젝트를 시작하기 전 구글링으로 다른 사람들의 채팅 프로젝트를 구경했는데 프로토콜, 라이브러리에 대한 전반적인 이해 없이는 깔끔하게 코드를 관리하기가 힘들겠다는 생각이 들었다. STOMP, 메시지브로커, 메시지큐... 등등 알아들을 수 없는 말들이 .. 2024. 5. 29. [Network] Web Socket 목차0. 프롤로그1. 다양한 통신 방법2. WebSocket 통신 원리 3. HTTP vs WebSocket4. WebSocket의 한계와 해결 방법 0. 프롤로그지금까지 프로젝트를 하면서 사용했던 통신은 클라이언트가 먼저 요청을 보내면 서버가 응답을 보내주는 방식이었다. 이 말은, 서버는 클라이언트가 먼저 말을 걸어주지 않으면(요청이 없으면) 선톡을 할 수 없다는 의미이다. 이를 반이중 통신(half duplex communication)이라고 한다.채팅, 주식과 같이 데이터가 실시간으로 바뀌는 기능. 노션이나 피그마에서 팀원의 마우스가 화면에 보이는 기능은? 이와 같은 실시간 통신을 구현하기 위해 전통적인 HTTP 통신을 선택했다가는 뭐 가능이야 하겠지만 조금만 생각해 봐도 명확한 한계가 보인다. 클.. 2024. 5. 24. [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. [TaskStock] Atomic Design Pattern 도입기 프롤로그프로젝트 TaskStock기간 기획, 개발 : 2023.11.7~2024.3베타테스트 : 2024.2.22~3.14정식 출시 : 2024.3플랫폼iOS, Android언어FE: TypeScript / BE: JavaScript프레임워크 FE: React Native / BE: Node.js Express라이브러리Redux Toolkit React Native를 3주 만에 학습하고 투입된 피로그래밍 앱개발 프로젝트에선 정말 중구난방으로 컴포넌트를 관리했다. 컴포넌트를 따로 폴더를 만들어 관리해야 한다는 필요성조차 알지 못했던 시절이다. 공개하기 부끄럽지만 피로그래밍 앱의 /components 폴더 안에서 관리되고 있는 컴포넌트들은 성격에 상관없이 한 계층에서 모두 관리되고 있다. 모달, input,.. 2024. 3. 27. 피로그래밍 공식 홈페이지 리뉴얼한 이야기 개발 기간2023.10.17~2023.11플랫폼Web개발 인원2명담당 역할1. UI/UX 개편 2. Frontend언어Python, JavaScript프레임워크Django협업툴Github, Notion, Figma 작년 11월에 완성한 홈페이지에 대해 이제야 글을 남긴다..! 20기 활동도 끝난 시점이라 ㄹㅇㄹㅇㄹㅇ 뒷북이다 나는 피로그래밍 19기로 활동한 후 20기 부회장으로 활동했다. 회장단의 할 일 중 하나는 홈페이지 유지보수이다. 처음 홈페이지가 만들어진 후로 몇 년간 바뀐 적이 없어서 한번 바꿔볼까? 하는 생각에 회장님과 대공사를 시작했다. 회장님이 백엔드를 맡고 내가 프론트를 맡았다. 웹개발 동아리인 만큼 재미있는 이펙트를 많이 추가했다. 1. 커스텀 마우스 마우스를 display none 시.. 2024. 3. 26. 이전 1 2 다음
