미리보기

IAMBIT 코인 거래소 개발

사용 기술 : TypeScript, Next.js14, WebSocket, Tailwind CSS, tanstack query, mobx-react-lite

업무 범위:

선물/현물 거래소 페이지 웹소켓 사용부 구현

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

로그인 페이지 퍼블리싱

선물 거래소 : 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, Nunjucks 템플릿 엔진을 사용하고 있었습니다. 모든 로직이 각각 파일에 혼재되어 있어 비즈니스 로직, 웹소켓 로직, UI 로직이 명확히 분리되지 않았고, 이에 따라 기능 추가와 유지보수에 어려움을 겪고 있었습니다.

Task

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

Action

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

• 웹소켓 연결 클래스를 개발하고, 이를 기반으로 선물/현물 거래소 페이지에서 공통 컴포넌트와 전역 상태 관리(MobX)를 재사용 가능하게 설계했습니다.

• 각 페이지와 기능에 대한 플로우차트를 작성하고 팀에 발표하여 업무 계획을 명확히 공유했습니다.

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

• 주 정보를 관리하는 Store, 비즈니스 로직 관련 Store, 웹소켓 연결 관련 Store간의 의존성을 낮춰 개발했습니다.

Result

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

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

Situation

기존 Vue2 기반 레거시 코드에서는 실시간 분봉 차트를 지원하는 라이브러리가 제한적이었습니다. 특히 기존 분봉 차트 라이브러리는 Next.js와 호환되지 않아 새로운 차트 라이브러리 PoC(Proof of Concept)가 필요했습니다.

Task

실시간 데이터를 기반으로 한 분봉 차트를 구현할 수 있는 솔루션을 찾고, 기업 요구사항에 맞는 라이브러리를 검증 및 도입해야 했습니다.

Action

• TradingView 라이브러리를 PoC 단계에서 검증하고, 기업용 라이센스를 계약했습니다.

• 웹소켓 데이터와 TradingView API를 통합하여 실시간 차트를 구현했습니다.

• MobX, React 생명주기와 통합하기 위해 tvwidget을 Store에 저장해 원하는 타이밍에 TradingView 메서드가 호출되도록 구현했습니다.

• 기획/디자인 요구사항을 반영하여 차트 인터페이스를 설정하고, 웹소켓 데이터를 기반으로 차트 구독 바인딩을 구현했습니다.

Result

도입한 TradingView 라이브러리는 실시간 데이터 시각화와 사용자 친화적인 차트 인터페이스를 제공하며, 기존 레거시 환경 대비 차트 기능의 안정성을 향상했습니다.

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

Situation

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

Task

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

Action

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

• Panda CSS, vanilla-extract를 PoC하며 디자인 시스템 베이스로 안정화된 Tailwind CSS를 채택했습니다.

• 기존 styled-components 기반 레이아웃과의 호환성을 유지하면서 Tailwind CSS를 단계적으로 도입했습니다.

• 주요 컴포넌트를 Tailwind CSS로 리팩토링하며, CSS-in-JS 런타임 비용을 제거하고 정적 스타일 시트 기반으로 전환했습니다.

Result

Tailwind CSS로의 마이그레이션을 통해 런타임 성능과 SSR 호환성을 개선했습니다. 또한, 개발 생산성을 향상하며 UI 변경 작업이 더 빠르고 일관되게 이루어질 수 있도록 했습니다.

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

Situation

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

Task

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

Action

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

• Trade 컴포넌트에서는 실시간 데이터를 효율적으로 처리하기 위해 JavaScript V8 엔진의 배열 특성을 고려한 최적화 전략을 적용했습니다.

• V8 Array의 길이가 증가할 때 메모리 인접 배열이 아닌 희소 배열로 변환되는 점을 인지하고, 데이터 업데이트는 unshift 방식을 채택했습니다.

Result

로컬 목업 웹소켓 서버를 기반으로 Orderbook 컴포넌트와 Trade 컴포넌트를 구현하며 프로젝트 일정에 맞게 기능을 완성했습니다. 이 과정에서 팀원들의 신뢰를 얻을 수 있었습니다.

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

Situation

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

Task

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

Action

• MobX의 when()을 활용해 특정 상태 조건이 충족될 때까지 기다리며 상태 업데이트의 순서를 보장했습니다.

• 상태 변경이 빈번한 작업에서는 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, shadcn, tanstack query

배포 링크: mejai.kr

UI에 맞는 data fetching을 설계

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

• 사용자가 carousel을 스크롤할 때 다음 월간 정보를 fetch하게 lazy loading을 구현

사용자 친화적 기능 구현

• LocalStorage 기반 즐겨찾기 및 검색 기록 기능으로 사용자 편의성 향상

수익화 모델 도입

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

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

검색 추천 기능 구현

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

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

• 한정된 riot API key 사용량을 최적화 하기 위해 메시지큐를 적용한 API에 맞춰 갱신 기능 구현

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

• shadcn, 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에 반영