미리보기

IAMBIT 코인 거래소 개발

사용 기술 : TypeScript, Next.js 14, WebSocket, Tailwind CSS, TanStack Query, MobX-React-Lite

업무 범위:

선물/현물 거래소 페이지 구현

유저 재무 정보 마이페이지 구현

로그인 페이지 UI 구현

선물 거래소 : https://www.iambit.com/futures/?coin=E-BTC-USDT

현물 거래소 : https://www.iambit.com/spot/?coin=BTC-USDT

1. 전체 마이그레이션 작업 (7월 - 11월)

Situation

기존 거래소는 Vue2, Event Bus, Web Worker를 사용하고 있었습니다. 모든 로직이 각각 파일에 혼재되어 있어 비즈니스 로직, 웹소켓 로직, UI 로직이 명확히 분리되지 않았고, 현재 코인과 같은 중요 상태 또한 Store마다 중복으로 존재했습니다. 이에 따라 기능 추가와 유지보수에 어려움을 겪고 있었습니다.

Task

Next.js로 프로젝트를 마이그레이션하면서, 기존 구조적 문제를 해결하고 유지보수성을 확보해야 했습니다.

Action

• 레거시 엔트리포인트 api, 웹소켓 연결/구독 메시지 포맷, 핵심 상태 세팅을 플로우차트로 그리며 이해했습니다.

• 비즈니스 로직, 웹소켓 연결/구독 로직, UI 로직을 분리하고 모듈화하여 재사용성을 높였습니다.

• 차트, 호가창, 거래 기록 등의 핵심 비즈니스 로직을 독립적인 Store로 분리하여 데이터 흐름을 단순화했습니다.

• 메인 Store의 정보(ex. 현재 코인)를 로직별 Store가 사용하게 구현해 상태 중복을 해결했습니다.

• 웹소켓 연결 관리 Class를 만들고 layout.tsx의 생명주기에 통합했습니다.

• 선물 거래소, 현물 거래소 두 페이지에서 공통 컴포넌트와 Store를 재사용 가능하게 설계했습니다.

Result

프로젝트 개발 일정인 10월까지 선물/현물 거래소 마이그레이션을 완료했습니다. 재사용 가능한 구조 덕분에 이후의 기능 추가와 유지보수 속도도 향상되었습니다. 다음 작업인 비슷한 UI, 웹소켓 로직을 사용하는 현물 거래소 페이지의 경우 일주일 안에 페이지 개발을 완료했습니다.

2. TradingView 도입 및 실시간 차트 구현 (8월 - 9월)

Situation

기존 실시간 분봉 차트를 지원하는 라이브러리는 vue2에만 호환되었습니다. 때문에 새로운 차트 라이브러리 PoC(Proof of Concept)가 필요했습니다.

Task

• 웹소켓 스트리밍 데이터를 기반으로 실시간 분봉 차트를 구현할 수 있는 솔루션을 검증하고 도입해야 했습니다.

• 기업 요구사항(사용자 친화적인 인터페이스, 안정성, 성능)을 충족하는 라이브러리를 선정하고 구현해야 했습니다.

Action

• TradingView 라이브러리 검증 및 기업용 라이센스 계약을 진행했습니다.

• 웹소켓을 TradingView API와 통합하고, 웹소켓 매니저 클래스에서 차트 위젯과 코인 변경, 구독 등의 메서드를 중앙 관리하도록 구현했습니다. 매크로태스크 큐에 들어가는 차트위젯관련 메서드를 비동기 순서 보장해서 구현했습니다.

• 기획/디자인 요구사항에 맞춰 차트 UI를 커스터마이징했습니다.

Result

TradingView 라이브러리를 Next.js, MobX와 완전히 통합하여 요구사항을 맞춰 개발 완료할 수 있었습니다.

3. styled-components에서 Tailwind CSS로 마이그레이션 (7월 1주차)

Situation

기존 코드베이스는 styled-components 기반의 runtime CSS-in-JS를 사용하고 있었으나, 런타임 성능 문제와 SSR환경에서의 제한으로 인해 UI 성능 최적화가 필요했습니다.

Task

런타임 성능을 개선하고 코드 가독성을 높이기 위한 다른 스타일 라이브러리를 찾아야 했으며, 기존 코드와 충돌을 최소화해야 했습니다.

Action

• 런타임 CSS 문제와 SSR 상호작용 문제에 대해 세션 발표를 진행해 팀원들과 공유했습니다.

• 기존 styled-components와의 호환성을 유지하며 Tailwind CSS를 점진적으로 도입하고 주요 컴포넌트를 리팩토링했습니다.

• 팀 협업을 위해 Tailwind CSS 사용 가이드를 문서화하고 코드 리뷰를 통해 도입을 지원했습니다.

Result

• 런타임 성능과 SSR 호환성을 개선하며 스타일링 과정에서 반복적인 코드를 줄이고, Tailwind CSS의 유틸리티 클래스 사용으로 스타일 적용 속도를 향상시켰습니다.

• 문서화와 코드 리뷰를 통해 팀원이 새로운 스타일링 방식에 적응할 수 있도록 돕고, 협업 효율성을 높였습니다.

4. 로컬 목업 웹소켓 서버 개발 및 실시간 거래 컴포넌트 구현 (7월 2주차)

Situation

프로젝트 진행 중 개발 서버가 작동하지 않는 상황이 발생했습니다. 하지만 개발 일정을 맞추기 위해 실시간 거래 데이터를 사용하는 Orderbook 컴포넌트와 Trade 컴포넌트를 구현해야 했습니다.

Task

웹소켓 서버가 없는 상태에서 개발을 이어가기 위해 로컬 목업 웹소켓 서버를 구축하고, 실시간 거래 데이터 처리를 최적화하며 UI 컴포넌트를 구현해야 했습니다.

Action

• 로컬 환경에서 목업 웹소켓 서버를 개발하여 Orderbook 및 Trade 컴포넌트와의 데이터 흐름을 테스트했습니다. (https://github.com/donghyun1998/mockup-local-socket-server)

• Trade 컴포넌트의 실시간 데이터 처리 시, V8 엔진의 배열 특성을 고려했습니다. 길이 30의 배열은 메모리 인접성이 보장되는 FastElement 모드로 동작하며, 이 경우 unshift (O(n))가 push + reverse (O(n) + 추가 연산) 보다 효율적이므로 unshift 방식을 채택했습니다.

Result

로컬 목업 웹소켓 서버를 기반으로 Orderbook 컴포넌트와 Trade 컴포넌트를 구현하며 프로젝트 일정에 맞게 기능을 완성했습니다.

5. 주 코인 변경에 따른 비동기 순서 핸들링 및 MobX 상태 최적화 (8월)

Situation

주 코인을 변경할 때 의존성 있는 2개의 Store에서 MobX State업데이트 가 동시에 이루어지면서 MobX 상태 변경의 순서가 보장되지 않는 문제가 발생했습니다. 또한, 잦은 상태 변경이 퍼포먼스 저하로 이어지는 상황이었습니다.

(https://donghyk2.tistory.com/177)

Task

주 코인 변경 과정에서 상태 업데이트의 순서를 보장하고, 상태 변경을 효율적으로 처리해 성능을 개선해야 했습니다.

Action

• MobX의 when()을 활용해 각 Store에서 공통으로 사용하는 중요 상태의 변경을 기다리며 상태 업데이트의 순서를 보장했습니다.

• 상태 변경이 빈번한 작업에서는 runInAction()을 사용해 여러 상태 변경을 하나의 트랜잭션으로 묶어 배치 업데이트를 수행하여 리렌더링을 최소화 했습니다.

Result

주 코인 변경 시 비동기 작업의 순서가 안정적으로 제어되었으며, 상태 변경을 효율적으로 관리해 성능 저하 없이 UI를 제공할 수 있었습니다. 이로써 실시간 데이터 변경이 잦은 환경에서도 높은 성능을 유지하며 사용자 경험을 개선했습니다.

Ecole42의 2년 교육 과정을 1년 4개월만에 조기 수료 (2022/11 - 2024/03)

C, C++, JavaScript를 활용한 프로젝트 기반 학습을 통해 CS를 직접 경험하며 학습
매월 160시간 이상의 교육 과정을 이수했으며, 해당 기수에서 상위 10% 성적으로 수료

동료 학습, 피어 리뷰를 통해 의사소통 능력 강화

minishell : 쉘을 구현하면서 멀티 프로세스, 복잡한 문자열 파싱 경험
philosopher : 멀티 쓰레드, 뮤텍스를 사용해 철학자 문제 구현
cpp module : C++로 예제를 구현하며 OOP 이해
webserv: I/O멀티플렉싱 함수 kqueue를 사용한 http 비동기 웹 서버 구현
inception : wordpress/nginx/mariaDB를 docker-compose로 서비스 구성
ft_transcendence : vanilla JS로 SPA구현, 실시간 핑퐁게임 웹 클라이언트 구현

League of Legends 게임 전적을 Riot API를 통해 시각화하는 서비스

https://github.com/mejaiKR/Frontend
사용 기술 : TypeScript, Next.js14, Tailwind CSS, TanStack Query

배포 링크: mejai.kr

UI에 맞는 data fetching을 설계

• 기존 기획인 연간 게임 정보가 아닌 월간 게임 정보를 가져오기 위해 API를 분할

• Intersection Observer 기반 lazy loading 적용된 캐러셀 구현

Tanstack Query를 활용한 서버 상태 관리 아키텍처 설계

• QueryClient Context 설계로 캐시 일관성 보장

• query-key-factory패턴을 사용해 도메인별로 분리

수익화 모델 도입

• Next.js 환경에 Google AdSense, Analytics를 통합하여 광고 수익 모델 구축

• https://donghyk2.tistory.com/157

검색 추천 기능 구현

• 검색창에서 사용자의 입력이 멈췄을 때 like 닉네임을 리턴하게 하기 위해 debouncing 적용된 API 호출

• 검색 결과 캐싱으로 반복 검색 성능 향상

유저 정보, 스트릭 갱신 버튼 구현

• 한정된 riot API key 사용량을 최적화 하기 위해 메시지큐를 적용한 API에 맞춰 polling 처리

요일별 사용량 라인차트 구현

• rechart 사용해서 라인차트 구현

vanilla JS로 SPA를 만들기 위한 스타터킷

https://github.com/donghyun1998/vanilla-js-SPA-starter-kit

vanilla JS로 SPA를 만들기 위해 동적렌더링, 상태관리, 라우팅을 구현

• history API, custom event를 사용해 router 구현

• 클로저를 사용해 useState, useReducer구현 (https://donghyk2.tistory.com/144)

• MutationObserver를 사용해 useEffect구현(https://donghyk2.tistory.com/146)

실시간 핑퐁게임 서비스
https://github.com/GunGonGamLee/ft_transcendence
사용 기술: vanilla-js-SPA-starter-kit, Bootstrap, vite, WebSocket

• WebSocket을 이용한 실시간 게임 방 리스트, 대기 방, 대진표, 토너먼트 게임 구현

• 재사용 가능한 대진표 페이지 컴포넌트를 설계하여 예선 및 결승 대기방에서 동시에 사용하도록 구현

• WebSocket으로 게임의 실시간 공, 바의 위치를 받아와 canvas에 반영