미리보기

React, TypeScript 기반 프론트엔드 개발

Web3 메타마스크 지갑 연동

Sentry, 노션 데이터베이스로 이슈 관리

NFT 관리자 프론트엔드 개발

자바스크립트 컴포넌트 타입스크립트로 재작성

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

화상 회의, 대면 회의를 통해 기획, QA 팀원과 지속적으로 커뮤니케이션하여 프론트엔드에서의 입력값이 올바른지 검증한 경험이 있습니다.

깃허브 이슈 페이지에서 개발 관련 이슈, 노션 데이터베이스로 QA 관련 이슈를 관리하여 이슈의 상세, 원인, 진행 상태 등을 팀원 간 편리하게 공유할 수 있었습니다.

Sentry를 세팅하여 사용자가 직접 서비스를 사용했을 때 발생하는 에러 및 피드백을 쉽게 확인할 수 있었습니다. 브라우저에 내장된 번역 기능을 활성화했을 때 화면에서 에러가 발생하는 이슈를 확인하여 페이지 에러의 원인을 찾고 조치한 경험이 있습니다.

React의 lazy 메소드로 각 페이지 컴포넌트를 청크 파일로 분리하여 페이지 첫 로딩 시간과 네트워크 요청 횟수를 단축시켰습니다.

GraphQL Codegen으로 백엔드 API의 그래프QL 스키마를 타입스크립트로 자동 변환함으로써 개발 시간을 단축시켰습니다.

웹 페이지 내부에서 웹소켓이 의도치 않게 중단되었을 때 재연결을 할 수 있도록 Patch Package로 라이브러리를 패치하여 프론트엔드에서 웹소켓 연결이 유지되는 것을 확인할 수 있었습니다.

HTTP PATCH, PUT 요청이 끝났을 때 로컬 뮤테이션 기법을 도입하여 refetch로 인한 네트워크 요청 횟수를 줄이고 데이터를 항상 최신으로 유지할 수 있었습니다.

프론트엔드의 모듈 파일을 유지시키기 위해 서비스 워커를 도입하여 웹 페이지에 필요한 모듈 파일을 캐시하도록 했습니다. 프론트엔드를 새로 배포 후 접속했을 때 페이지 에러를 방지하고, 이후 토스트 알림을 추가 작업함으로써 사용자가 페이지를 업데이트하도록 유도할 수 있었습니다.

PC용으로 개발된 프론트엔드를 모바일 유저들이 편리하게 사용할 수 있도록 사이트를 반응형으로 작업했습니다. 리사이즈 이벤트 대신 브라우저 API로 웹 브라우저의 너비가 변경될 때마다 조건부 렌더링되도록 하여 성능 저하를 막았습니다.

팀원 간의 코드 리뷰를 통해 프로젝트의 품질을 높일 수 있었습니다.

• 여러 말단 컴포넌트에 분산되어 있는 모달 컴포넌트의 상태를 Context API 및 Redux Toolkit으로 관리함으로써 각 모달의 표시 조건을 효율적으로 관리할 수 있었습니다.

• 스켈레톤 UI를 도입하여 네트워크 요청이 완료되었을 때 레이아웃 시프트 현상을 방지함으로써 사용자의 실수를 줄일 수 있었습니다.

• 각 쿼리마다 작성된 쿼리 키를 독립된 모듈에서 관리하도록 작업했습니다. 쿼리 데이터를 업데이트할 때 쿼리 키를 잘못 작성하는 실수를 줄일 수 있었습니다.

TypeScript, React 기반 NFT 관리자 페이지를 유지보수했습니다.

백엔드 개발 팀원과 노션 문서를 통해 NFT 메타데이터 포맷이 서로 다르다는 이슈를 공유하여, 메타데이터 규격을 타 플랫폼과 맞추는 작업을 진행할 수 있었습니다. 등록한 NFT를 타 NFT 플랫폼에 표시되도록 작업했습니다.

자바스크립트로 작성된 리액트 컴포넌트를 타입스크립트 & Context API로 작은 컴포넌트로 분할함으로써 코드 재사용성 및 유지보수성을 향상시켰습니다.

NextJS 14 기반 프론트엔드 개발을 주도했습니다.

주 1회 화상 정기회의를 통해 금주 작업 계획을 프로젝트 전체 팀원에게 공유하고 기획 팀원의 의견에 따라서 작업 계획을 유동적으로 변경하여 프론트엔드 팀원들에게 공유한 경험이 있습니다.

비정기회의를 통해 깃허브 브랜치 구성, 커밋 메시지 컨벤션 등을 수립하고 개발 시작전 도입할 라이브러리, 사용자 인증 방식을 결정할 수 있었습니다. Figma 디자인 시안으로부터 각 프론트엔드 팀원들이 작업할 범위를 결정함으로써 각 주의 프론트엔드 개발 일정을 관리할 수 있었습니다.

QA 단계에서 노션 데이터베이스로 각 이슈의 상세, 원인, 중요도, 진행 상황 등을 관리했습니다.

백엔드 API에서 발급한 쿠키를 Next.js 미들웨어에서도 사용할 수 있도록, 논의를 통해 프론트엔드, 백엔드의 도메인을 같은 Site로 설정할 수 있었습니다. 로컬호스트가 아닌 특정 도메인으로 접속할 수 있는 개발환경을 세팅했습니다.

브라우저에서 알림 허용 여부를 확인하고 Server Sent Event 리스너를 작성하여 브라우저에서 알림을 띄우는 작업을 했습니다.

Shadcn UI로 컴포넌트 디자인 시스템을 제작했습니다.

서버 사이드 렌더링 환경에서 NextJS의 dynamic 메소드와 Quill 에디터를 도입하여 텍스트 입력 페이지, 텍스트 수정 페이지를 개발했습니다.

컴포넌트의 Props가 복잡해질 때 합성 컴포넌트를 도입하여 컴포넌트의 재사용성을 높였습니다.

백엔드 팀원과 실시간으로 협업하여 API 요청했을 때 CORS 경고 메시지가 보이는 이슈를 같이 해결했습니다.

HTTP POST 요청 후 현재 어떤 뮤테이션이 진행되고 있는지 파악하기 위해 useMutation과 useMutationState를 도입하여 뮤테이션 상태를 효율적으로 관리할 수 있었습니다.

참고 링크 https://blog.nwlee.com/react-app-quill-text-edit-issues

React 프로젝트에서 캘린더를 작업할 때 디자인을 원하는대로 구성할 수 있도록 도와주는 리액트 훅 라이브러리입니다.

오픈소스 리액트 캘린더 컴포넌트는 디자인을 원하는 대로 업데이트하기 힘들고 각 라이브러리마다 지원되는 기능의 범위가 다른 문제가 있었습니다.

주어진 Date 객체에 대해서 이번 주의 날짜 목록, 현재 월의 날짜 목록, 현재 연도의 월 목록 등을 제공하며, 주, 월, 연도를 변경하여 캘린더의 날짜 목록을 업데이트할 수 있는 기능을 제공합니다.

pnpm 워크스페이스로 모노레포를 구성하여 각 내부 프로젝트 간 의존성 버전을 일관되게 관리할 수 있었습니다.

프로젝트를 번들링할 때 tsup을 도입하여 여러 모듈 시스템 대응, 타입 정의 파일 생성 등을 적용할 수 있었습니다.

changesets으로 각 패키지 버전 관리하고 Github Action으로 배포 자동화할 수 있었습니다.

참고 링크 https://blog.nwlee.com/library-project-setup-with-pnpm-workspace-tsup

TypeScript, React 기반으로 영단어 예제를 제공하는 웹 사이트를 개발 및 배포했습니다.

OpenAI API와 연동하여 미리 설정된 프롬프트를 기반으로 주어진 영단어의 의미와 예제를 생성할 수 있습니다.

검색 엔진 최적화를 위해 서버 사이드 렌더링이 적용되지 않은 React 프로젝트에서 React API로 서버 사이드 렌더링을 직접 구현했습니다.

각 단어의 이미지 포맷을 PNG에서 WEBP로 변경함으로써 페이지 로딩 시간을 단축시키고 Performance 점수를 50점 대에서 70점 후반으로 개선했습니다.

사용자의 검색 필터링 상태를 URL 쿼리 파라미터로 관리함으로써 새로고침할 때 필터링 상태가 유지되고 사용자 간 링크를 공유할 수 있도록 작업했습니다.

URL 쿼리 파라미터에 타입스크립트 타입을 적용할 수 있는 useTypedSearchParams 훅을 개발했습니다.

무한 스크롤 페이지에서 데이터가 많아지면 퍼포먼스가 낮아질 수 있어서, React Window로 그리드, 리스트 뷰에서 리스트 가상화, 무한 스크롤을 작업하여 프론트엔드 성능을 확보했습니다.

useSyncExternalStore를 도입하여 브라우저 API를 연동했을 때 Hydration Mismatch 에러가 발생하는 이슈를 해결했습니다.

ChatGPT에 사용되는 프롬프트가 모호하면 원하는 답변을 받기 어려워 프롬프트를 구체적으로 입력하기 위해 사용자가 입력한 AI 프롬프트를 개선하도록 도와주는 웹 사이트를 개발했습니다.

Cloudflare Pages로 깃허브 저장소와 연동하여 배포를 자동화했습니다.

응답 포맷을 마크다운으로 선택했을 때 마크다운 스타일을 적용하기 위해 mdx-bundler를 도입하여 마크다운, MDX 컨텐츠를 동적으로 렌더링했습니다.

프로젝트에서 테일윈드 CSS를 도입했을 때 VSCode에서 클릭하지 않은 클래스명은 자동으로 숨김 처리해주는 확장을 도입하여 코드 가독성을 개선했습니다.

주기적으로 팀원들과 커뮤니케이션하면서 과제 해결 및 프로젝트 진행

Git flow 적용

• 브랜치 전략을 통해 프로젝트를 일관성있게 관리할 수 있었습니다.

• PR 생성할 때마다 코드 리뷰 및 승인 후 병합하는 문화 형성했습니다.

사용자 안면 인식을 기반으로 추천 광고를 송출할 수 있는 키오스크의 프론트엔드를 개발했습니다.

AWS Rekognition API와 연동하여 안면 사진에서 데이터를 추출하여 백엔드로 전달하는 파이프라인을 구성했습니다.