Recent
-
객며든 어느 프론트의 엘레강트 오브젝트 정리
0. 들어가며: 객체지향은 파일을 분류하는 기법이다.우테코에서의 가장 큰 수확은 제이슨의 엘강오 스터디다. 처음엔 망설였다. '에이.. 프론튼데 객체지향까지 알아야해?' 라는 어리석은 판단으로 하마터면 이 기회를 지나칠 뻔 했지만, 원온원을 했던 제이슨이 DM으로 다시 한 번 권유해줬고, 덕분에 용기 내서 들어가게 됐다. 그렇게 시작하게 된 엘강오 스터디.. 뭐가 가장 많이 바뀌었나가장 크게 바뀐건, 객체로 생각하는 법을 배우면서 "유기체"와 "관계" 중심으로 코드를 바라보게 됐다는 점이다. 예전엔 대부분의 코드를 함수 중심으로 작성했다. 함수 하나하나는 나쁘지 않았지만, 그 함수들이 서로 협력하거나 흐름을 만드는 방식에는 체계가 없었고, 전체 코드는 어딘가 자연스럽지 못했다. 객체지향을 공부하면서, ..
2025.03.26
-
직접 만든 라이브러리를 우테코 미션에 녹여내기
1. function-al의 시작 type safe 함수형 프로그래밍 유틸리티 라이브러리, function-al을 만들기 시작한 지 벌써 한 달이 넘었다.처음부터 뭔가 거창한 목표가 있었던 건 아니다. 그저 출퇴근길이 너무 지루해서, 지하철에서 읽기 시작한 Functional-Light JavaScript 책이 시작이었다.사실 함수형 프로그래밍에 대해서는 거의 무지한 상태였다. 그런데 책에서 소개하는 다양한 use case들을 보면서, 완전히 새로운 세상을 만난 느낌이었다. FP가 설명하는 개념들이 생각보다 너무 자연스럽고 합리적이었고, 무엇보다 코드가 엄청 깔끔해지는게 신기하고 인상적이었다. 책을 읽다 보니 “이거 그냥 읽고 끝내면 금방 다 잊어버리겠는데?”라는 생각이 들었다. FP를 잘 쓰는 개발자가..
2025.03.19
-
[FP] 아무도 모르는 side effect는 괜찮을까?
목차1. 보이지 않는 Side Effect, 정말 괜찮을까?2. Referential Transparency와 순수 함수3. 숨겨진 Side Effect의 위험성4. 성능 최적화를 위한 Side Effect5. Side Effect를 안전하게 관리하는 방법6. 결론💡 Functional-Light JavaScript Chapter 5: Reducing Side Effects의 일부분을 참고했습니다. 1. 보이지 않는 Side Effect, 정말 괜찮을까?If a tree falls in the forest, but no one is around to hear it, does it still make a sound? 좀 철학적인 질문인데, 한 번 생각해볼만 한 질문인 것 같다. 그리고 이걸 프로그래밍의 ..
2025.02.26
-
[FP] Type Safe Pipe 함수 만들기
목차1. Pipe 함수 소개2. pipe(arg, f1, f2) vs pipe(f1, f2)(arg)3. Typescript 적용4. 마치면서 1. Pipe 함수 소개지난 curry 함수에 이어 이번엔 pipe 함수를 만들어보려고 한다. Pipe 함수는 여러 개의 함수를 왼쪽에서 오른쪽으로 순차적으로 실행하는 함수이다. 데이터 변환의 흐름이 명확하게 표현되어 코드의 동작 흐름을 더 직관적으로 볼 수 있고, 선언적 프로그래밍 스타일을 더 쉽게 적용할 수 있다. 다음 코드를 보자. const add = x => x + 1;const multiply = x => x * 2;const subtract = x => x - 3;const result = subtract(multiply(add(5)));console..
2025.02.19
-
[FP] Type Safe Curry함수 만들기
0. 들어가며: 함수형 프로그래밍과 Curry요즘 함수형 프로그래밍(FP)을 공부하면서 "Currying"이라는 개념을 마주하게 되었다. 처음에는 단순히 복잡한 함수를 더 단순한 함수로 분해하는 기법으로만 보였는데, 깊이 들여다보니 Currying이 FP의 철학을 가장 잘 표현하는 기법 중 하나라는 생각이 들었다. 📌 FP의 핵심 철학FP는 다음과 같은 핵심 원칙들을 강조한다. - 함수를 일급 객체(First-Class Citizen)로 취급- 불변성(Immutability)- 순수 함수(Pure Function)- 선언형 프로그래밍(Declarative Programming)- 함수 합성(Composition), 모듈화(Modularity)- 높은 수준의 추상화(Abstraction) 이 원칙들은 ..
2025.02.01
-
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
디스코드 클론코딩👾
-
[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