미리보기
기본 정보
웹 애플리케이션으로 사용자 문제를 해결하는 것을 최우선으로 생각하는 프론트엔드 개발자 이노원입니다.
경력
Quarkonix
프론트엔드 개발 | 프론트엔드 개발
2023.03. ~ 2024.04. (1년 2개월)
React, TypeScript 기반의 Web3 프론트엔드를 개발했습니다.
크러스트유니버스피티이엘티디(영업소)
프론트엔드 개발 | 개발
2022.10. ~ 2023.02. (5개월)
타입스크립트, 리액트 기반 NFT 관리자 페이지를 개발 및 유지보수했습니다.
프로젝트
Chromatic Protocol
Quarkonix
2023.04. ~ 2024.04.
TypeScript, React 기반 전 세계인 대상 Web3 실시간 탈중앙화 암호화폐 선물 거래소를 개발했습니다.
HTTP 요청이 많아지면 이후 API 요청했을 때 에러가 발생하는 이슈가 있었습니다. 특정 페이지 진입 시 페이지에 필요한 것보다 많은 HTTP 요청이 발생하는 이슈가 있어, Suspense, lazy를 도입하여 페이지에 꼭 필요한 데이터만 불러오게 리팩토링 작업했습니다. HTTP POST 요청 후 전체 데이터를 새로고침했을 때 업데이트 전 데이터가 표시되는 이슈가 있어서, POST 요청의 응답 데이터를 기반으로 전역 상태를 업데이트하여 GET 요청 회수를 줄이면서 동시에 최신의 데이터를 보여줄 수 있도록 작업했습니다. 이를 통해 GET 요청 수를 50% 절약하고 네트워크 요청에 에러가 발생하여 데이터가 업데이트되지 않는다는 사용자 피드백도 감소했습니다.
프론트엔드에서 웹소켓이 중간에 연결이 끊어졌을 때 재연결이 되지 않는 이슈가 있었습니다. 브라우저 디버거로 연결이 해제되었을 때를 확인한 결과 외부 웹소켓 패키지에서 재연결하지 않는 이슈가 있어서 Patch Package를 도입하여 웹소켓 재연결을 할 수 있도록 작업한 후 프론트엔드에 반영함으로서 웹소켓 연결을 유지시킬 수 있었습니다.
디자이너 담당 팀원으로부터 컴포넌트 내 UI와 상태 관리가 하나의 파일에 작성되어 있어 UI 디버깅이 어렵다는 코드 리뷰를 받아서 파일 내 상태 관리를 컴포넌트 전용 Hooks로 분리하는 개발 문화를 형성하고 팀원들과 공유했습니다.
프론트엔드 개발 팀원이 각각의 모달이 언제 표시되는지 파악하기 어렵다는 코드 리뷰를 받아, 각 모달의 상태를 통합하여 관리하기 위해 팀원들과 전역상태 관리 도입을 논의했습니다. 공식문서와 많은 참고자료가 있는 Redux Toolkit을 도입해서 여러 컴포넌트에 흩어져 있는 모달 상태를 전역 상태로 관리함으로써 생산성을 향상시켰습니다.
프론트엔드 배포 후 페이지 전환했을 때 페이지가 배포 전의 모듈 파일을 참조하면 페이지 에러가 발생하는 이슈가 있었습니다. Vite Plugin PWA를 도입하여 현재 웹 페이지에 필요한 모듈 파일을 캐시하도록 했습니다. 프론트엔드를 새로 배포 후 접속했을 때 페이지 에러를 방지하고, 이후 토스트 알림으로 업데이트를 유도하는 사용자 경험을 구축했습니다.
Klaybay Studio
크러스트유니버스
2022.10. ~ 2023.01.
TypeScript, React 기반 NFT 관리자 페이지를 유지보수했습니다.
자바스크립트로 작성된 리액트 컴포넌트에서 각각의 상태와 함수 반환값이 어떤 타입인지 파악하기 어려워, 타입스크립트로 리팩토링함으로써 코드 유지보수성을 향상시켰습니다.
Props Drilling 패턴으로 작성된 컴포넌트들은 상태가 어디서 업데이트되는지 디버깅하기 어렵다는 코드 리뷰를 받아, 컴포넌트에 전달되는 Props를 줄이기 위해 React Context와 리액트 훅 패턴으로 리팩토링함으로써 코드 가독성과 유지보수성을 개선했습니다.
웹 사이트에서 등록한 NFT의 메타데이터가 OpenSea와 같은 타 NFT 플랫폼에서 표시되지 않는 이슈가 있었습니다. 백엔드 개발 팀원과 지속적인 커뮤니케이션을 통해 메타데이터 포맷이 서로 다르다는 이슈를 전달드렸고, 메타데이터 규격을 타 플랫폼과 맞추는 작업을 진행했습니다.
useidioms.com
개인
2024.03. ~ 진행 중
TypeScript, React 기반으로 영단어 예제를 제공하는 웹 사이트를 개발 및 배포했습니다.
서버 사이드 렌더링이 적용되지 않은 React 프로젝트는 검색 엔진 최적화가 되지 않아서 서버 사이드 렌더링을 직접 구축 후 메타데이터를 세팅했습니다. Remix를 도입하여 로더, 액션, 메타데이터, 컴포넌트를 하나의 파일 또는 디렉토리 내에서 관리하여 유지보수성을 향상시켰습니다.
새로고침해도 검색 키워드와 기타 필터링 설정을 유지시키기 위해 필터링 설정 관리를 로컬 스토리지에서 URL 파라미터로 변경했습니다. URL 파라미터에서 잘못된 키를 입력하여 원하는 데이터를 가져오지 못하는 것을 방지하기 위해 URL 파라미터에 타입스크립트 타입을 적용할 수 있는 리액트 Hooks를 개발했습니다.
웹 페이지 접속했을 때 페이지 로딩에 시간이 5초 정도 걸리는 이슈가 있어서 이미지 포맷을 PNG에서 WEBP로 업데이트하여 Lighthouse의 Performance 점수를 50대에서 70대 후반으로 개선했습니다.
무한 스크롤 페이지에서 데이터가 많아지면 퍼포먼스가 낮아질 수 있어서, React Window로 그리드, 리스트 뷰에서 리스트 가상화, 무한 스크롤을 작업하여 프론트엔드 렌더링을 최적화했습니다.
서버 사이드 렌더링이 적용된 프론트엔드에서는 브라우저 API를 호출했을 때 에러가 발생할 수 있어서, useSyncExternalStore를 도입하여 로컬 스토리지 및 미디어 쿼리를 포함한 Window 객체와 컴포넌트를 안정적으로 연동했습니다.
Tailwind CSS가 설치된 프로젝트에서 클래스명을 작성하다보면 캘래스명이 길어져 디버깅이 어렵다는 코드 리뷰가 있어서, VSCode 확장 라이브러리를 도입하여 클릭하지 않은 컴포넌트 클래스명을 숨김 처리함으로서 코드 생산성을 개선했습니다.
포트폴리오
자기소개
개발자로서 유용한 웹 서비스를 개발하여 사람들이 겪는 불편함을 해결하고 싶습니다. 웹 프론트엔드 개발을 통해 사용자들에게 더욱 편리하고 직관적인 경험을 제공하는 것이 목표입니다.
사용자에게 더 친화적인 프론트엔드를 개발하기 위해 프로젝트에 존재하는 문제를 해결합니다. 문제가 발생했을 때는 팀원들과 지속적으로 커뮤니케이션하여 문제의 원인을 파악한 다음 해결 방안을 도출합니다. 좋은 UI가 무엇인지 학습하기 위해 상용 서비스를 참고합니다. 프로젝트가 출시되었을 때 안주하지 않고 사용자가 불편해하는 점은 없는지, 더 개선할 여지가 있을지 지속적으로 탐색합니다. 여러 오픈소스 프로젝트와 도서를 참고함으로써 현재 코드 품질을 어떻게 개선할 수 있을지 생각합니다.
하이퍼커넥트는 비디오 및 인공지능 기반 서비스를 제공하는 곳이라는 사실을 알게 되었습니다. 기술을 통해 국가, 언어, 문화 등의 여러가지 장벽을 극복하고 사람들의 소통을 돕는 가치를 제공한다고 생각했습니다. 하이퍼커넥트의 프론트엔드 개발은 사용자들이 안정적인 환경에서 편리하게 사람들과 소통하고, 사용자에게 맞춤형 서비스를 제공하는데 중요한 역할을 할 것입니다.
여러 웹 프론트엔드 프로젝트를 거쳐 타입스크립트 프론트엔드를 배포한 경험, 서버 사이드 렌더링을 구축한 경험, 프론트엔드 배포 후 발생하는 에러를 해결한 경험, 외부 패키지에서 발생하는 이슈에 대처한 경험, HTTP 요청 수를 절약한 경험을 쌓았습니다. 프론트엔드 팀원들과 적극적인 코드리뷰를 통해 잠재적인 문제점을 찾고 리팩토링을 통해 코드 품질과 개발 생산성을 향상시킨 경험이 있습니다. 이 경험을 바탕으로 앞으로 하이퍼커넥트의 프론트엔드 프로젝트에 적극적으로 기여할 수 있을 것입니다.
기술 스택
React, TypeScript, tailwind-css, redux-toolkit, swr, react-query, scss, Next.js
교육
단국대학교
대학교(학사) | 응용컴퓨터공학과
2016.03. ~ 2022.02. | 졸업
대외활동
부스트캠프 웹 & 모바일 6기 멤버십
네이버 부스트캠프
주기적으로 팀원들과 커뮤니케이션하면서 과제 해결 및 프로젝트 진행
Git flow 적용
브랜치 전략을 통해 프로젝트를 일관성있게 관리할 수 있었습니다.
PR 생성할 때마다 코드 리뷰 및 승인 후 병합하는 문화 형성했습니다.
단국대학교 캡스톤 프로젝트
단국대학교
사용자 안면 인식을 기반으로 추천 광고를 송출할 수 있는 키오스크의 프론트엔드를 개발했습니다.
AWS Rekognition API와 연동하여 안면 사진에서 데이터를 추출하여 백엔드로 전달하는 파이프라인을 구성했습니다.
자격증
정보처리기사
기사 | 한국산업인력공단
2022.06.