이노원

2024년 06월 11일에 업데이트

웹 애플리케이션으로 사용자 문제를 해결하는 것을 최우선으로 생각하는 프론트엔드 개발자 이노원입니다.

이메일[email protected]
전화번호010-2214-1322

개발자로서 사용자들에게 실질적인 도움을 줄 수 있는 서비스를 만드는 것에 큰 보람을 느낍니다. 웹 프론트엔드 개발을 통해 사용자들이 더욱 편리하고 직관적인 경험을 제공하는 데 힘쓰고 있습니다.

사용자에게 더 친화적인 프론트엔드를 개발하기 위해 팀원들과 지속적으로 커뮤니케이션하고 프로젝트를 개선합니다.

네트워크 요청을 최적화하고 서버 사이드 렌더링을 통해 SEO 작업한 경험을 바탕으로 효율적인 프론트엔드의 개발을 추구합니다.

경력

Quarkonix2023. 01 ~ 2024. 04.

React, TypeScript 기반의 Web3 프론트엔드를 개발했습니다.

  • 네트워크 요청 횟수 최적화
  • 컨트랙트, 백엔드 개발 팀원들과 커뮤니케이션 및 협업
  • 제보된 이슈로부터 사용자 경험 개선 및 리팩토링

프로젝트

Chromatic Protocol2023. 04 ~ 2024. 04.

TypeScript, React 기반 전 세계 유저 대상 실시간 탈중앙화 암호화폐 선물 거래소를 개발했습니다.

  • Suspense, lazy로 현재 페이지에 필요한 API만 요청, SWR를 채택하여 중복되는 요청을 제거함으로서 네트워크 요청 횟수를 50% 절약하여 사용자가 웹 페이지에 접속했을 때 네트워크 429 에러가 발생하는 이슈를 해결.
  • 커스텀 Hooks을 작성할 때 타입 파라미터가 포함된 Props의 인터페이스를 작성하도록 개발 문화를 형성함으로서 간헐적인 타입 에러를 방지하고 개발 생산성을 향상.
  • Patch Package로 라이브러리에 이슈가 있을 때 이슈 원인을 파악하여, 웹 페이지에서 웹소켓 및 지갑 상태 에러 방지. 사용자가 북마크로 접속할 때 지갑이 연결되지 않는 이슈 해결.
  • 컨트랙트 개발 팀원들과 지속적인 커뮤니케이션과 적극적인 협업 참여를 통해 폼 제출 전 사용자 입력값 검증, 그리고 포지션 진입 시 더 정확한 수수료 표시할 수 있었음.
  • Vite Plugin PWA 도입을 통해 프론트엔드 업데이트 시 사용자에게 토스트 알림 제공하여 내부 링크 클릭 시 페이지 에러가 발생하는 이슈를 해결.
  • Redux Toolkit을 도입하여 각 컴포넌트로 파편화된 모달 상태를 전역 상태로 리팩토링함으로서 코드 가독성 및 유지보수성 향상.
  • 사용자로부터 보고되는 이슈로부터 주도적으로 원인을 찾아 리팩토링.
  • 협업 시 VSCode Live Share로 현재 개발 중인 코드를 팀원들에게 공유할 수 있었음.
New Frontier2023. 01. ~ 2023. 04.

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

  • TypeScript, SolidJS 기반 Web3 프론트엔드 개발
  • 지속적으로 SolidJS 스터디, PR 코드 리뷰 문화 형성

개인 프로젝트

useidioms.com2024. 03. ~ 진행 중

TypeScript, React 기반 영단어 학습 웹 프론트엔드를 개발했습니다.

  • React 프로젝트를 Remix 기반으로 리팩토링하여 검색 엔진 최적화. Remix를 도입하여 로더, 액션, 메타데이터, 컴포넌트를 파일 내에서 관리함으로서 생산성 향상.
  • Lighthouse의 Performance 점수를 50대에서 70대 후반으로 개선.
  • 캐시 설정으로 새로고침시 로딩 시간 2초 이내로 단축.
  • React Window로 그리드, 리스트 뷰에서 리스트 가상화, 무한 스크롤을 작업하여 프론트엔드 렌더링을 최적화.
  • 배포 과정, CORS, 서버 사이드 렌더링, 스크롤 최적화는 공유할 수 있도록 문서화하여 유지보수성 향상.
  • SCSS 중첩 구조를 통해 가독성을 개선하고 연산자로 필요한 수치 값을 계산하여 생산성 향상.
  • 서버 사이드 렌더링에서 useSyncExternalStore로 로컬 스토리지 및 미디어 쿼리를 포함한 Window 객체와 컴포넌트의 라이프사이클을 맞출 수 있었음.
  • VSCode Tailwind CSS 확장 라이브러리로 직접 클릭하지 않은 클래스명을 숨김 처리함으로서 코드 가독성 개선.

링크

기술 스택

TypeScript, JavaScript, React, Tailwind CSS, SCSS, SWR, Tanstack Query, Remix, NextJS, Visual Studio Code

학업 사항

부스트캠프 웹 & 모바일 6기 멤버십2021. 08 ~ 2021. 12.
  • 주기적으로 팀원들과 커뮤니케이션하면서 과제 해결 및 프로젝트를 진행했습니다.
  • Git flow 적용
    • 프로젝트를 일관성있게 관리하는 방법 학습
    • PR 생성할 때마다 코드 리뷰 및 승인 후 병합하는 문화 형성
단국대학교2016. 03. ~ 2022. 02.
  • 공과대학 응용컴퓨터공학과 졸업
  • 캡스톤 프로젝트 Camosk 참여: 자바스크립트 기반으로 사용자 안면 인식을 기반으로 추천 광고 송출할 수 있는 키오스크 개발