미리보기

IAMBIT 코인 거래소 개발

Vue2 + WebWorker + Event Bus 구조의 코인 현물,선물 통합 거래소 시스템을 Next.js14 + MobX로 마이그레이션

사용 기술 : typescript, Next.js14, tailwindCss, react-query, mobx-react-lite

next.js의 SSR, RSC를 이해하고 partial hydration적용

배포 링크: https://www.iambit.com/futures/?coin=E-BTC-USDT

레거시 코드의 비즈니스 로직, 웹소켓 로직, 뷰 로직 분리 및 재구조화

• 레거시, 마이그레이션 계획 플로우차트 구현 후 발표

• layout.tsx의 mount, unmount에 class 생성/소멸 로직을 추가해 컴포넌트 생명주기와 동기화

• 차트, 호가창, 거래기록 채널별 store 구현으로 비즈니스 로직 분리

• websocket 연결, 채널 구독/구독 취소 관리 class 구현

• 선택 코인 변경에 따른 비동기 작업 순서를 mobx when() 사용해 조정

TradingView PoC, 라이센스 취득 및 실시간 차트 구현

• 기업용 라이센스 컨택 및 취득

• websocket data기반 캔들스틱 차트 구현

• 공통 api, websocket 연결 및 구독 후 차트 렌더링되게 비동기 순서 보장

• 차트 api에 websocket 구독 바인딩

• 디자인에 맞게 커스텀 및 모달, 드롭다운과 같이 outsideClick action에 호환되게 설정

실시간 호가 테이블, 거래 기록 테이블 구현

• 기본, 구매, 판매별 보기 타입 변경 sort 커스텀훅으로 재사용 가능하게 구현

• 가격의 소수점 자리 변경에 따른 websocket 구독/구독 취소 구현

• pretendard font의 openType속성을 적용해 숫자 가로 고정폭 적용

• 누적 양에 기반한 테이블 배경 막대차트 구현

헤더, 코인 검색 드롭다운 구현

• 이름, 가격, 등락률 기준 filter 커스텀훅으로 재사용 가능하게 구현

• 시가, 변동률 websocket 데이터 반영

• favorite, 현물, 선물에 재사용 가능한 ui table component설계 후 적용

• 현재 코인, 타겟 코인, 현물/선물 의 특성에 맞게 페이지 라우팅, 현재 코인 변경 구현

선물/현물 거래소 공통 컴포넌트, store 재사용 가능하게 구현

• 호가 테이블, 거래 기록, 헤더, 코인 검색 드롭다운, 트레이딩 뷰 차트 컴포넌트 재사용

• websocket 구독 관련 비즈니스 로직이 들어간 store 재사용

styled component에서 tailwindcss로 마이그레이션

• runtime css in js와 SSR의 상관관계에 대한 세션 발표

• 기존 styled component로 만들어진 레이아웃 충돌 없이 마이그레이션

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

https://github.com/mejaiKR/Frontend
사용 기술 : typescript, Next.js14, tailwindCss, shadcn, react-query

배포 링크: mejai.kr

UI에 맞는 data fetching을 설계

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

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

• https://github.com/mejaiKR/Frontend/pull/4

사용자 친화적 기능 구현

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

• https://github.com/mejaiKR/Frontend/pull/16

수익화 모델 도입

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

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

검색 추천 기능 구현

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

• https://github.com/mejaiKR/Frontend/pull/19

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

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

• https://github.com/mejaiKR/Frontend/pull/33

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으로 게임의 실시간 공, 바의 위치를 받아와 canvas에 반영

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구현, 실시간 핑퐁게임 웹 클라이언트 구현