이노원 이력서

웹 애플리케이션으로 사용자 문제를 해결하는 것을 최우선으로 생각합니다.

소개

이름: 이노원
이메일: nw.lee@outlook.com
전화번호: 010-2214-1322
깃허브 저장소: https://github.com/nwleedev
블로그: https://blog.nwlee.com

개발자로서 우리가 개발한 어플리케이션이 유저들에게 도움을 주는 것을 볼 때마다 보람을 느낍니다.

웹 애플리케이션의 프론트엔드를 개발함으로서 우리가 개발하는 서비스로 유저들이 각자의 문제점을 해결할 수 있도록 필요한 작업을 진행했습니다.

사용자로부터 제보되는 이슈, 그리고 QA 및 디자인 담당 팀원으로부터 피드백을 적극적으로 반영하여 사용자에게 더 친화적인 프론트엔드를 개발하는 방법을 계속 생각해왔습니다.

커뮤니케이션 큰 프로젝트는 혼자보다는 팀 단위로 잘 개발할 수 있다고 생각합니다.

프론트엔드, 디자인 및 백엔드 직무의 팀원들과 지속적으로 커뮤니케이션을 유지하려고 노력했습니다.
PR이 올라올 때마다 PR을 등록한 의도가 무엇인지, 어떤 이슈를 해결할 수 있을지, 코드에서 예상되는 부작용은 없는지 점검했습니다.
모르는 영역이 있으면 먼저 팀원에게 다가가서 질문하는 습관을 들였습니다.
투명한 커뮤니케이션을 지향합니다.
팀원으로부터 업무 시 고쳐야 할 점이 있으면 빠르게 반영하여 바람직한 개발 습관을 들입니다.
새롭게 알게 된 내용이 있으면 기록하여 중복되는 질문을 하지 않는 습관을 들였습니다.

프로젝트를 시작할 때는 팀원들과 프로젝트 구조를 어떻게 형성해야 할지를 우선적으로 진행했습니다.

프론트엔드 프로젝트 폴더 구조
- 사내에서 개발된 다른 프로젝트를 참조했습니다.
- 새로운 개발 도구를 도입할 때는 깃허브에 공개된 프로젝트를 참고합니다.
Github으로 프로젝트 진행상황을 관리할 때 브랜치 네이밍
서버에서 전달되는 데이터 상태관리
클라이언트 내부 데이터 상태관리
UI 테스트
선택할 수 있는 라이브러리와 참고할 수 있는 문서
- 새로운 라이브러리를 채택할 때 팀원들과 지속적으로 커뮤니케이션합니다.
  - 사용해야 하는 이유
  - 얻을 수 있는 이점
- 현재 채택된 라이브러리와 호환되는지 검토합니다.
- 라이브러리가 지속적으로 관리되는지 여부도 파악했습니다.

프로젝트 경험

`Chromatic Protocol` - Web3 기반 프론트엔드 개발

2023년에는 Quarkonix에서 Defi 거래소 Chromatic Protocol의 웹 프론트엔드 개발을 진행했습니다.

데이터 관리

Web3 프론트엔드 개발에서 신경썼던 이슈 중 하나는 네트워크 요청 수 관리였습니다. 컨트랙트는 네트워크 요청 수가 많으면 Too Many Requests 에러를 반환하기 때문에 프론트엔드에서 네트워크 요청을 지속적으로 최적화하는 작업을 거쳐야 했습니다.

데이터 요청 라이브러리로 useSWR를 채택
- Deduping Interval을 설정하여 3 ~ 4초 이내 같은 네트워크 요청을 보내지 않게 했습니다.
- Refresh Interval을 비활성화하고 컨트랙트에서 이벤트를 받아서 관련 데이터를 업데이트시키도록 했습니다.
React Router DOM에서 라우팅을 설정하면 특정 페이지에 접속했을 때 다른 페이지의 데이터까지 전부 불러오는 이슈가 있었습니다.
- Suspense를 적용하여 특정 페이지에 필요한 데이터만 불러오도록 리팩토링했습니다.
Optimistic UI를 적용했습니다.
- 포지션을 진입했을 때 포지션 목록을 새로 요청하지 않고, 사용자 입력 값에서 예측되는 포지션을 계산한 뒤 기존 포지션 목록에 추가시키는 방식으로 리팩토링했습니다.
컨트랙트에서 이벤트리스너를 등록하여 데이터를 업데이트시키도록 리팩토링했습니다.
- 마켓 가격 업데이트
- 포지션 진입, 종료 시 포지션 현황 업데이트
- 토큰 거래 시 사용자 토큰 잔고 목록
이슈 대응
- 개발, 디자인, QA 팀원과 협업하여 프론트엔드에서 데이터를 요청하는데 문제되는 곳은 없는지 확인하는 작업을 거쳤습니다.
- 개발 및 배포 초기에 자주 발생하던 429 에러를 줄였습니다.
  - 테스트넷, 메인넷에 배포했을 때 사용자 입장에서 프론트엔드가 데이터를 받지 못하는 상황을 방지할 수 있었습니다.

웹소켓

이슈 파악
- 프론트엔드에서는 마켓 가격을 백엔드 API로부터 웹소켓으로 가져오고 있습니다.
  - 오랫동안 프론트엔드에 접속하게 되면 웹소켓 연결이 끊어져 가격이 업데이트가 되지 않는 문제가 있었습니다.
해결 과정
- 사내에서 관리하는 웹소켓 라이브러리에는 연결이 강제로 끊어졌을 때 재연결하는 절차가 없다는 걸 확인했습니다.
- 이용자로부터 관련된 에러가 제보되고 있어서 patch-package로 프론트엔드에서 수정 및 재배포했습니다.
- 재배포 후에는 QA와 협업하여 추후 문제가 없는지 다시 한번 점검했습니다.
- 이후 라이브러리 개발 팀원과 해당 이슈에 대해 지속적으로 커뮤니케이션함으로서 라이브러리 이슈를 조치할 수 있었습니다.

거래 수수료

사용자들에게 보여지는 예상 거래 수수료를 줄이는 것도 중요했습니다.

백엔드, 컨트랙트, QA와 지속적으로 협업하면서 화면에 보여지는 예상 수수료를 최소화했습니다.
특정 입력값에서 기존 거래소보다 낮은 수수료를 지불하게 할 수 있었습니다.

`useidioms.com` - Remix 기반 프론트엔드 개발

2024년에는 개인 프로젝트 useidioms.com을 개발했습니다.

영어 문서를 읽거나 영어 회화 스터디를 다니면서 영어 관용구 학습의 필요성을 체감하여 직접 웹 어플리케이션을 제작하게 되었습니다.

SSR을 적용하기 위해 Remix를 채택했습니다.
- Remix를 처음 도입할 때 공식문서를 지속적으로 참고했습니다.
- create vite로 구성된 리액트 프로젝트에서 큰 변경없이 서버 사이드 렌더링을 적용할 수 있었습니다.
- 메타태그를 추가하여 SEO 작업을 수행했습니다.
- React Router Dom와 다르게 파일 단위로 컴포넌트, 로더 및 액션을 관리할 수 있습니다.
페이지네이션을 리팩토링했습니다.
- 테이블 컴포넌트에 무한 스크롤과 리스트 가상화(List Virtualization)을 구현하기 위해 react-window를 채택했습니다.
- 리스트 아이템을 tbody 내 각 tr에 렌더링할 때 테이블의 thead의 tr과 tbody의 tr의 레이아웃이 서로 맞지 않는 문제가 있었습니다.
- react-window의 컴포넌트에서 innerElementType에 커스텀 컴포넌트를 적용함으로서 테이블 레이아웃을 맞춰줄 수 있었습니다.
  - 깃허브 이슈 페이지에서 타 개발자 분들이 작성한 코드를 참고할 수 있었습니다.
각 관용구의 예제 및 섬네일 이미지를 제작하기 위해 OpenAI의 api를 활용했습니다.
- 개발 초기에는 작성한 프롬프트에서 만족할 만한 예제를 생성하지 못하는 문제가 있었습니다.
- OpenAI 공식문서, 커뮤니티 포럼, 깃허브 이슈 등을 찾아보고 더 좋은 데이터를 생성할 수 있는 프롬프트를 작성하는 방법을 계속 찾아내려고 노력했습니다.
- 작성한 프롬프트는 깃허브 저장소에 업로드하여 추후에도 참고할 수 있게 했습니다.
- 우리만의 프롬프트 작성 방법은 블로그에 정리하여 여러 개발자들이 참고할 수 있게 했습니다.

학습 과정

프로젝트
- 새로운 개발 지식을 접할 때는 직접 프로젝트를 만들어보면서 사용 방법을 익힙니다.
- 영어로 작성된 문서를 적극적으로 읽는 습관을 들였습니다.
- 새로운 프로젝트를 개발하거나, 기존에 제작된 프로젝트를 다른 기술 스택으로 다시 개발합니다.
- 프로젝트 도중 발생하는 이슈는 공식 문서 및 깃허브 이슈 페이지를 참고합니다.
- 문서로 해결할 수 없는 문제는 다른 개발자들이 작성한 코드를 참고합니다.
문서화
- 프로젝트 중 새로 학습한 지식 및 해결한 이슈는 문서화합니다.
- 작성한 문서는 팀원들과 공유하여 이슈가 중복되는 것을 방지했습니다.
- 블로그에 학습 내용을 정리했습니다.
  - 피드백을 받아 지속적으로 개선할 수 있었습니다.

현재 기술 스택

언어: JavaScript, TypeScript
- TypeScript
  - 프로젝트에서 타입 관련 에러가 발생하는 것을 개발 과정에서 방지할 수 있습니다.
  - 커스텀 Hooks을 작성할 때 타입 파라미터가 포함된 Props의 인터페이스를 작성할 수 있었습니다.
  - ts-node/esm 로더를 적용하여 개발 과정에서는 별도의 자바스크립트 파일로 변환하지 않고 타입스크립트 파일을 실행시킬 수 있습니다.
라이브러리: React, SCSS, Redux Toolkit, SWR
- React
  - useSyncExternalStore로 로컬 스토리지 및 미디어 쿼리를 포함한 Window 객체와 컴포넌트의 라이프사이클을 맞출 수 있었습니다.
  - 커스텀 Hooks를 작성하여 컴포넌트 UI와 데이터 계산 로직을 분리할 수 있었습니다.
  - 전역 상태 관리가 필요할 때는 지속적으로 유지보수가 되고 있는 Redux Toolkit을 채택했습니다.
- SCSS는 & 문구 사용, 컴포넌트 스타일을 계층 구조로 관리함으로서 스타일의 가독성을 개선할 수 있습니다.
- SWR
  - 백엔드에서 데이터 요청 횟수를 최적화할 수 있었습니다.
  - Deduping Interval을 설정하여 일정 시간 내에 똑같은 요청이 있으면 캐시된 데이터를 사용하도록 리팩토링했습니다.
  - 비동기 작업이 발생하면 예상되는 값을 계산하여 데이터 요청 없이 현재 상태를 업데이트할 수 있었습니다.
프레임워크: Remix, Tailwind CSS
- Remix
  - React와 React Router DOM으로 구성된 프로젝트에서 적은 시간으로 SSR을 적용할 수 있었습니다.
  - 로더, 액션, 메타 정보들을 하나의 파일에서 관리할 수 있습니다. 각각의 주소가 어떤 로더 및 액션을 보유하는지 더 빠르게 파악할 수 있었습니다.
- Tailwind CSS
  - CSS 파일을 직접 작성하지 않고 스타일을 빠른 시간에 적용할 수 있었습니다.
  - VS Code 확장 프로그램을 적용하여 직접 클릭하지 않은 클래스명은 축약함으로서 가독성을 개선할 수 있었습니다.
개발 도구: Visual Studio Code, Github
- VS Code는 지속적으로 관리되고 있는 코드 편집기입니다.
  - 확장 라이브러리를 통해 개발 생산성을 높일 수 있습니다.
  - Live Share로 현재 개발 중인 코드를 팀원들에게 공유할 수 있습니다.

경력 사항

Quarkonix

Web3 기반 프론트엔드 개발

Chromatic Protocol

보유 중인 자산을 투자, 또는 유동성으로 예치할 수 있는 탈중앙화 암호화폐 선물 거래소

작업 사항
- React, TypeScript 기반의 실시간 암호화폐 선물 거래소 UI 개발
- Storybook, Chromatic으로 UI 컴포넌트 테스트
- 네트워크 요청 횟수 최적화
기여 사항
- Optimistic UI를 적용
  - 비동기 작업에서 예상되는 데이터를 우선 계산 후 화면에 우선 적용하여 웹 페이지의 반응성을 높일 수 있었음
  - QA와 협업하여 미리 계산된 데이터와 응답 데이터가 일치하는지 검증
- Storybook
  - storybook-addon-manual-mocks로 컴포넌트 내 Hooks를 모킹할 수 있었음
  - Git에 올리기 전 실제 Hooks와 모킹된 Hooks가 똑같은 타입의 데이터를 반환하는지 점검하도록 개발 문화 형성
- Chromatic으로 UI 컴포넌트를 웹으로 배포하여 디자인 팀원들이 별도의 프로젝트 세팅 없이 각 UI 요소를 검토할 수 있었음
- 외부 데이터 관리
  - 잦은 페이지 이동이 있을 때 이전에 캐시된 데이터 사용
  - 컨트랙트 이벤트가 발생했을 때만 데이터를 갱신
- 모바일, 태블릿 화면 사이즈 대응
- 팀에서 관리 중인 라이브러리의 이슈
  - 타 팀원들에게 먼저 보고 후 필요하면 Patch Package로 작업
  - 배포 중인 프론트엔드에서 이슈가 해결됐으면 라이브러리에 이슈 제보
- 프론트엔드 배포 후 조치
  - 브라우저에 저장된 CSS, JS 파일이 남아있을 때 프론트엔드가 새로 업데이트되면 간헐적으로 오류가 발생하는 이슈가 있었음
  - PWA 플러그인으로 프론트엔드가 업데이트되면 사용자에게 업데이트 알림
  - ErrorBoundary로 페이지에 에러가 발생할 때 레이아웃 유지하도록 리팩토링
- 페이지 접속 시 자동으로 보여져야 하는 모달 상태를 전역에서 관리하도록 리팩토링
  - 체인 변경, 약관, 공지사항 등
  - 프로젝트 팀원들이 현재 각 모달의 상태를 파악하기 용이해짐
- 컨트랙트 이벤트
  - 레이아웃 역할을 하는 컴포넌트에서만 관리하도록 리팩토링하여 팀원들이 리스너 위치를 더 빨리 찾을 수 있었음
- 외부 라이브러리 이슈
  - Wagmi 라이브러리가 지갑 상태를 가져오지 못하는 것을 확인하여 라이브러리 Hooks를 대체할 수 있는 커스텀 Hooks 작성
기술 스택
- 언어: TypeScript
- 라이브러리: React, React Router Dom, Vite, Redux Toolkit, SWR
- 프레임워크: Storybook, Tailwind CSS
- 기타: Patch Package, GraphQL Codegen, Github Action, Netlify Edge Functions, Vite Plugin PWA

NewFrontier

GMX 컨트랙트의 프론트엔드
트레이더의 레퍼럴 계정을 하나로 통합하여 트레이더가 거래할 때 더 적은 수수료를 지불할 수 있는 웹 어플리케이션

작업 사항
- SolidJS로 프론트엔드 개발
  - 팀원들과 스터디 및 커뮤니케이션
  - PR 등록 후 코드리뷰를 반드시 진행하는 문화 구축
  - React 스타일로 작성된 코드가 있으면 공식문서 및 협업으로 SolidJS가 제시하는 방식으로 리팩토링
    - Signal을 함수 파라미터로 넘겨줘야 하는 경우 함수(Accessor) 형태로 전달
기술 스택
- 언어: TypeScript
- 라이브러리: SolidJS, SolidJS Router
- 프레임워크: Storybook, Tailwind CSS

프로젝트 목록

useidioms.com

영어 관용어구 학습 목적으로 개발한 사이트

주소

프론트엔드
백엔드
배포 주소
작업 사항
- TypeScript, React 기반 프론트엔드 개발
- React 프로젝트에서 Remix로 리팩토링
- react-window로 무한 스크롤, 스크롤 가상화 구현
- Oracle Cloud로 프론트엔드 배포
  - Certbot로 SSL 인증서 발급
- 브라우저 SpeechSynthesis API로 텍스트 음성 변환
기여 사항
- Remix 프로젝트로 리팩토링
  - 서버 사이드 렌더링
  - 메타태그 및 SEO
  - 페이지 응답 속도 개선
  - 웹 사이트 캐시
- react-window
  - 그리드(Grid) 컴포넌트에서 렌더링되는 데이터의 수가 많아질 때 브라우저 성능 저하를 방지할 수 있었음
  - HTML Table 컴포넌트에서 페이지네이션
- 브라우저 SpeechSynthesis API
  - 인앱 브라우저처럼 API 사용 불가능한 경우 UI 대응
- 문서화
  - CORS 경고 대처
  - 서버 사이드 렌더링 과정
  - 가상 스크롤
기술 스택
- 언어: TypeScript
- 라이브러리: React, React Query, React Window
- 프레임워크: Remix, Tailwind CSS
- 기타: date-fns, certbot

학업 사항

부스트캠프 웹 & 모바일 6기 멤버십

2021년 08월 23일 ~ 2021년 12월 03일
Git flow로 프로젝트를 일관성있게 관리
PR 생성할 때마다 코드 리뷰 및 승인 후 병합하는 문화

단국대학교

2016년 03월 ~ 2022년 02월
응용컴퓨터공학과 졸업

이노원

소개