Recent
-
우리 팀이 오로지 프로덕트에 집중하도록
1. 더 중요한 일에 집중하기 위해인턴 생활을 시작한 지 벌써 4개월이 지났다. 처음에는 ‘코드를 잘 짜는 엔지니어’가 되는 데 집중했다면, 요즘은 팀이 더 좋은 프로덕트를 더 빨리 만들 수 있는 환경을 만드는 데 더 큰 매력을 느낀다. 프로덕트를 만드는 개발자로서 자동화 작업은 단순한 효율화가 아니라, 더 중요한 일에 집중하게 만드는 작업이라고 생각하게 됐다.그래서 이 글에서는 우리 팀이 어떻게 자동화를 통해 생산성을 올리고 있는지 소개하면서 자동화가 왜 나에게 중요한 일이 되었는지 정리해보려고 한다. 1.1. 병목인 줄도 모르고 낭비하고 있던 시간들 shadcn을 도입한 뒤, 그동안 직접 만들고 관리하던 공용 컴포넌트 폴더를 통째로 삭제했던 순간을 잊지 못한다. 예전에는 “이건 당연히 우리가 만들..
2025.08.17
-
QA 자동화로 팀의 생산성 높이기
목차1. 자동화의 필요성을 느끼게 된 계기2. 전체 자동화 플로우3. 시트 구조 개편4. JSON으로 뽑아 테스트코드를 자동으로 생성하자5. 니즈를 반영한 기능들6. 한계와 현실적인 선택 1. 자동화의 필요성을 느끼게 된 계기 1.1. 테스트를 도입하고 느낀 점들최근 맡은 프로젝트에서 처음으로 E2E 테스트를 도입하게 되었다. 기능이 꽤 복잡해서 사용자의 흐름을 따라가며 발생할 수 있는 시나리오도 다양했다. 모든 시나리오를 수동으로 테스트하는 건 시간적으로나 체력적으로나 한계가 있었고, 특히 이미 발생했던 버그를 잊지 않고 반복적으로 확인하는 일은 현실적으로 불가능했다. 테스트 코드를 작성해보니 확실히 체감되는 변화가 있었다.QA에서 버그가 발견되기 전에 개발자가 먼저 실패를 마주할 수 있다.수동으로는 ..
2025.07.13
-
실뜨기같은 FSD
[목차]1. 서론2. FSD의 가장 큰 장점3. FSD에서 마주친 애매함들4. Next.js 프로젝트에서의 FSD 적용5. 도메인 중심 구조가 가지는 장점6. 결론 1. 서론 FSD는 shared, entities, features, widgets, pages, app 등 계층을 기준으로 폴더를 나누고, 각 계층 간 명확한 의존성 흐름을 강제하는 아키텍처 패턴이다. 공식 문서에서도 강조하듯, FSD는 정해진 정답이 없고 팀만의 최적화된 컨벤션을 찾아나가야 한다. 우리 팀은 "서로 얽혀있는 복잡한 도메인 로직과 UI를 어떻게 분리할지", "어떻게 하면 더 명확하게 관리할 수 있을지"라는 고민을 시작으로 FSD를 도입했고, 그 과정에서 우리만의 정답을 찾아나가고 있는 중이다. 요즘 레거시 코드의 마이그레이..
2025.06.17
-
패키지 매니저
1. 패키지 매니저가 해결하는 것 우리는 평소 아무 생각 없이 "npm install"이나 "yarn install" 같은 명령어를 실행한다. 하지만 이 명령어가 실행되는 동안, 뒤에서는 어떤 일이 일어나고 있었을까? 1.1. 혼란스러웠던 초창기 자바스크립트의 모듈 시스템 초창기에 우리 조상님(?)들은 외부 라이브러리를 쓰기 위해 jquery.min.js 파일을 직접 다운로드해서 프로젝트에 복사하곤 했다. 그리고 아래와 같이 이뿐만이 아니라, 같은 이름의 파일이 여러 버전으로 존재하고, 스크립트 로딩 순서가 바뀌면 실행되지 않으며, 전역 스코프 충돌로 디버깅은 일상이었다. 팀 프로젝트를 진행하다 보면 어떤 버전의 코드가 어디서 왔는지 추적조차 힘들었다. 이런 혼란을 해결하기 위해 모듈 시스템이 등장했..
2025.05.20
-
리액트가 클래스 컴포넌트를 버린 이유
목차1️⃣ 리액트에선 과정보단 결과다2️⃣ 3초 뒤의 this.state는 과연 믿을 만한가?3️⃣ 클래스 컴포넌트에서는 함수가 데이터 흐름에서 소외된다4️⃣ 클래스 컴포넌트의 라이프사이클은 '의도'보다는 '타이밍'에 집중한다5️⃣ Hooks는 합성과 재사용성을 극대화한다6️⃣ 클래스 컴포넌트는 미래가 없다 1️⃣ 리액트에선 과정보단 결과다React는 처음부터 지금까지 선언형 UI를 지향해왔다. 중요한 건 어떻게 그 목적에 도달했는가가 아니라, 무엇을 보여주고 싶은가다. "과정보다 결과가 중요하다"는 철학 아래, 복잡한 절차를 감추고 UI를 단지 상태의 결과로 표현하는 방향으로 발전해왔다. 그런데 클래스 컴포넌트는 이러한 철학에 조금 부합하지 않는다. 다음 두 코드는 결과적으로 같은 UI를 표시하지만, ..
2025.04.19
-
우당탕탕 우테코 2달 생활기
계단이 아닌 오르막길 우테코가 시작한 지 벌써 두 달이 지났다. 지난주 금요일, Level 1이 끝나며 방학식을 했다. 돌아보면 하루하루를 밀도 있게 잘 살아낸 것 같다. 특히 '나'에 대해 많이 고민했고, 앞으로 어떻게 살아가야 할지 깊이 생각하는 시간이었다. 하루 단위로 고민의 주제가 바뀔 정도로 계속 생각하고 또 생각했다. 나는 몇 달 주기로 이런 고민이 몰려오는 시기가 찾아온다. 프로젝트가 끝나갈 무렵, 동아리가 마무리될 때, 학기가 끝날 때처럼 환경이 변화를 예고할 때마다 어김없이 찾아온다. "이제 뭐 하지?", "다음엔 어떤 선택을 해야 최선일까?" 같은 질문들이 머릿속을 맴돈다. 처음에는 이런 고민들이 무거웠고, 때로는 너무 깊게 빠져 우울해지기도 했다. 그런데 그런 시간을 계단을 오르듯 한..
2025.04.09
-
객며든 어느 프론트의 엘레강트 오브젝트 정리
0. 들어가며: 객체지향은 파일을 분류하는 기법이다.우테코에서의 가장 큰 수확은 제이슨의 엘강오 스터디다. 처음엔 망설였다. '에이.. 프론튼데 객체지향까지 알아야해?' 라는 어리석은 판단으로 하마터면 이 기회를 지나칠 뻔 했지만, 원온원을 했던 제이슨이 DM으로 다시 한 번 권유해줬고, 덕분에 용기 내서 들어가게 됐다. 그렇게 시작하게 된 엘강오 스터디.. 뭐가 가장 많이 바뀌었나가장 크게 바뀐건, 객체로 생각하는 법을 배우면서 "유기체"와 "관계" 중심으로 코드를 바라보게 됐다는 점이다. 예전엔 대부분의 코드를 함수 중심으로 작성했다. 함수 하나하나는 나쁘지 않았지만, 그 함수들이 서로 협력하거나 흐름을 만드는 방식에는 체계가 없었고, 전체 코드는 어딘가 자연스럽지 못했다. 객체지향을 공부하면서, ..
2025.03.26
디스코드 클론코딩👾
-
[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