미리보기

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

Web3 메타마스크 지갑 연동

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

NFT 관리자 프론트엔드 개발

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

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

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

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

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

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

리액트 프로젝트에서 Sentry를 세팅하여 사용자가 직접 서비스를 사용했을 때 발생하는 에러 및 피드백을 확인했습니다.

Patch Package로 웹 소켓 라이브러리를 패치하여 소켓 연결이 갑작스럽게 끊어지는 이슈를 80% 줄일 수 있었습니다.

반응형으로 작업된 프론트엔드에서 브라우저의 미디어쿼리 API를 도입하여 PC와 모바일 렌더링 기준을 변경하는 콜백 함수의 호출을 80% 줄였습니다.

Ethers 및 SWR로 브라우저 지갑 상태를 동기화하고 사용자가 여러 지갑을 보유 중일 때 지갑 상태를 동기화했습니다.

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

서비스 워커를 도입해서 프론트엔드를 새로 배포했을 때 발생하는 동적 모듈 에러를 해결했습니다.

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

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

• 스켈레톤 UI를 도입하여 네트워크 요청이 완료되었을 때 레이아웃 시프트 현상을 줄였습니다.

• 쿼리 키와 데이터의 타입을 매핑하는 독립된 모듈을 작성하여 쿼리 데이터를 업데이트할 때 쿼리 키를 잘못 작성하는 실수를 줄였습니다.

타입스크립트 리액트 기반 NFT 관리자 페이지를 유지보수했습니다.

사용자가 여러 속성을 가진 NFT를 등록할 수 있는 기능을 개발했습니다.

화상 회의, 대면 회의를 통해 개발 중 이슈를 공유하고 페어 프로그래밍을 통해 이슈를 해결했습니다.

자바스크립트로 작성된 리액트 컴포넌트를 타입스크립트로 작성하여 사용자가 서비스에 접속했을 때 발생할 수 있는 타입 에러에 대응했습니다.

NFT의 메타데이터 규격이 달라서 우리 서비스에서 등록한 NFT가 타 플랫폼(OpenSea)에 표시되도록 작업했습니다.

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

PWA를 도입하여 웹 사이트를 설치할 수 있는 앱으로 만들고 Bubblewrap으로 플레이 스토어로 내부 테스트를 진행했습니다.

사용자가 일기 및 회고를 작성하고 다이어리 별로 관리할 수 있는 기능을 개발했습니다.

주 단위로 작성한 일기에 대해 피드백을 받고 AI 창작물을 생성하는 기능을 개발했습니다.

프로젝트 시작 전 팀 전체 화상 회의를 통해 시장 조사와 아이디에이션하여 프로젝트 주제를 결정했습니다.

QA 단계에서 프로젝트의 이슈를 관리하기 위해 노션 데이터베이스를 제안했습니다. 노션을 통해 이슈의 상세, 원인, 진행상황을 체계적으로 관리했습니다.

뤼이도를 도입하여 작업과 하위 작업 티켓을 생성하고 화상 회의를 통해 주간 개발 일정을 관리했습니다.

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

프론트엔드와 백엔드의 도메인이 다를 때 백엔드 API에서 발급한 인증 토큰을 Next.js 미들웨어와 서버 액션에서 사용하지 못하는 이슈에 대응했습니다.

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

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

합성 컴포넌트를 도입하여 공통 컴포넌트의 재사용성을 높일 수 있었습니다. 각 페이지마다 달라지는 디자인 요구사항에 대응했습니다.

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

타입스크립트, NextJS, Pocketbase 기반 웹 사이트를 개발했습니다.

여러 프로젝트 간에 라이브러리가 설치되어있을 때 모노레포를 도입하여 동일한 버전으로 관리할 수 있었습니다.

서비스 워커를 도입하여 웹 알림을 수신할 수 있도록 작업했습니다.

Shadcn을 도입하여 컴포넌트 작성 시간을 50% 이상 단축시켰습니다.

Zod를 도입하여 입력값 검증하는 코드 작성 시간을 50% 이상 단축시켰습니다.

프론트엔드와 백엔드 도메인의 최상위 도메인을 동일하게 설정하여 포켓베이스에서 발급한 인증 토큰을 서버 액션과 미들웨어에서도 검증할 수 있게 작업했습니다.

타입스크립트 리액트 기반 크롬 브라우저 익스텐션을 개발했습니다.

캔버스에 복사된 여러 개의 비디오 이미지를 Blob 또는 문자열 형태로 변환하고 압축 파일로 저장하는 기능을 개발했습니다.

익스텐션 팝업 페이지와 컨텐츠 스크립트 간 데이터를 통신하는 기능을 개발했습니다.

pnpm으로 워크스페이스를 세팅하고 vite로 익스텐션 프로젝트를 구성했습니다.

React Hook Form으로 입력값 상태를 관리했습니다.

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와 연동하여 안면 사진에서 데이터를 추출하여 백엔드로 전달하는 파이프라인을 구성했습니다.