Recent
-
JPEG 손실 압축
JPEG은 손실 압축 방식으로 압축을 수행한다. 어떤 원리로 압축이 수행되는지 알아보자. 1. Color Space Conversion2. Chrominance Downsampling3. Discrete Cosine Transform4. Quantization5. Run Length and Huffman Encoding 인간의 눈은 완벽하지 않다. JPEG은 인간이 알아차리지 못하는 정보를 지움으로써 압축을 한다. RodsConesBrightness & Low light sensitiveColor sensitive100 million6 million 밝기를 감지하는 Rods가 색깔을 감지하는 Cones보다 훨씬 많다. 그래서 우리 눈은 밝기에 더 민감하다.STEP 1: Color Space Conver..
2025.01.27
-
WebView: 나빼고 다 쓰고있었잖아?
목차1. 웹뷰 이해하기2. 네이티브 웹뷰 인터렉션3. 웹뷰 장단점1. 웹뷰 이해하기1.1. 웹뷰란?웹뷰는 모바일 앱 내에서 웹 콘텐츠를 렌더링할 수 있는 임베디드 브라우저로, 부분적인 UI를 그리는 데에 사용할 수 있는 기술이다. 각 웹뷰는 독립적인 실행 환경을 가지며, 세션, 쿠키, 로컬 스토리지가 웹뷰별로 분리되어 관리된다. 이를 활용하면 하나의 모바일 앱을 여러 작은 앱들로 나누어 개발할 수 있고, 각 웹뷰마다 별도의 Git 레포지토리를 운영하여 각 팀이 원하는 시점에 독립적으로 배포할 수 있다. 예를 들어, 앱 내 광고는 대부분 웹뷰로 구현되고, 하이브리드 앱에서는 웹뷰와 네이티브 컴포넌트가 밀접하게 통합되어 어떤 부분이 웹뷰이고 어떤 부분이 네이티브인지 구분하기 어려운 경우도 많다. 1.2. ..
2025.01.15
-
2024.zip
#TaskStock #피로그래밍 #타블로그 #디즤코드 #DDD #폴라보 #틩 #우타코 #Aboutme #Spotify #당근 #우테코 왜 벌써 2025년이지..? 25학번이 들어온다고..? 근데 06년생이라고..?1월~2월#TaskStock #피로그래밍 마무리 TaskStock 한 게 올해였다고? 라는 생각이 들 정도로 오래전 일처럼 느껴진다. 이땐 정말 이걸로 취직할 줄 알았지...Django로 만들어진 웹 버전을 React Native로 마이그레이션 하면서 기획에 대해 많이 고민해 보고, 유저 플로우 차트도 처음부터 제대로 짜보고, 디자이너를 모셔와서 개발자-디자이너 협업도 처음 경험해 봤다. 프로젝트와 프로덕트의 차이에 대해 고민해 보고, 앱스토어 배포까지 진행하면서 나름대로 배운 것도 많고 꽤 ..
2024.12.31
-
[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.07
-
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.05
-
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.04
디스코드 클론코딩👾
-
[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.07.31
-
[WebRTC] 다대다 화상회의: OpenVidu를 도입하기까지의 자료조사
목차- Short Review- 1:1 통신- 그럼 다대다 화상회의는?- Kurento- Openvidu - 디스코드 클론코딩 1. Short Review - 1:1 통신지난번엔 WebRTC로 1:1 화상회의가 구현되는 flow를 정리해 봤다. 간단하게 복습해 보자. WebRTC: 화상 회의를 구현하는 방법목차- 프롤로그- WebRTC의 동작 원리- Signaling Flow - 마치면서 1. 프롤로그채팅을 구현하기 위해서는 지속적인 연결을 유지하는 웹소켓을 사용한다. 웹소켓에서는 A가 B에게 채팅을 보낼 때 두 사hwanheejung.tistory.com 1.1. 연결이 수립되기까지의 Flow크게 SDP Offer/Answer 과정과 ICE Candidate 교환 과정으로 나눌 수 있다. 이 두 과정..
2024.07.21
-
[WebRTC] 화상 회의를 구현하는 방법 (1:1)
목차- 프롤로그- WebRTC의 동작 원리- Signaling Flow - 마치면서 1. 프롤로그채팅을 구현하기 위해서는 지속적인 연결을 유지하는 웹소켓을 사용한다. 웹소켓에서는 A가 B에게 채팅을 보낼 때 두 사용자가 직접 연결되어 있는 것이 아니라 서버의 중개를 통해 대화를 나누게 된다. 그러니까 A가 채팅을 보내면, 서버로 전송되고, 서버는 해당 채팅방을 구독하고 있는 사용자들에게 메시지를 보내주는 것이다. 이 방식은 클라이언트의 수가 늘어날수록 서버에게 큰 부담이 된다. 간단한 텍스트를 보낼 때는 오버헤드가 작을 수도 있지만, 주고받는 데이터가 영상이나 오디오처럼 용량이 크다면 서버의 부담이 엄청날 것이다. WebRTC(Web Real-Time Communication)는 서버의 중개 없이 클..
2024.07.05
-
[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.05.29
-
[Network] Web Socket
목차0. 프롤로그1. 다양한 통신 방법2. WebSocket 통신 원리 3. HTTP vs WebSocket4. WebSocket의 한계와 해결 방법 0. 프롤로그지금까지 프로젝트를 하면서 사용했던 통신은 클라이언트가 먼저 요청을 보내면 서버가 응답을 보내주는 방식이었다. 이 말은, 서버는 클라이언트가 먼저 말을 걸어주지 않으면(요청이 없으면) 선톡을 할 수 없다는 의미이다. 이를 반이중 통신(half duplex communication)이라고 한다.채팅, 주식과 같이 데이터가 실시간으로 바뀌는 기능. 노션이나 피그마에서 팀원의 마우스가 화면에 보이는 기능은? 이와 같은 실시간 통신을 구현하기 위해 전통적인 HTTP 통신을 선택했다가는 뭐 가능이야 하겠지만 조금만 생각해 봐도 명확한 한계가 보인다. 클..
2024.05.24
JWT
-
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.06
-
[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.05.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.03.28
