미리보기

(주) 블라스트는 스타트업을 대상으로 IT 프로덕트의 기획, 디자인, 개발을 지원하는 IT 컨설팅 에이전시 입니다.

저는 1년 동안 4개의 협업사와 함께 9개의 웹 페이지 개발을 담당하였습니다. 빠른 작업 속도와 새로운 라이브러리에 대한 높은 적응력으로 요청 기한보다 신속하게 작업을 완료하였으며, 이를 통해 충분한 QA 및 리팩토링 시간을 확보할 수 있었습니다.

특히, 계약기간 이후에도 제가 작성한 코드에서 개선할 점을 발견하고 리팩토링하여 추가 PR을 전달한 경험이 있습니다. 이를 통해 지속적으로 코드 품질을 향상시키고, 제품의 장기적인 유지보수성을 강화했습니다.

프로젝트 수행 시, 다음과 같은 공통적인 작업을 진행했습니다.

프로젝트 셋팅

• eslint, prettier 를 사용하여 코드 스타일을 정의하고, husky 를 통해 규칙을 강제하며, push 전 자동으로 type 검사를 실행하도록 설정했습니다.

• GitHub branch rule을 설정하고, GitHub Actions을 이용해 React/Next.js의 빌드 CI를 등록하여 PR 머지 전 빌드 오류를 검사하였습니다.

배포

• AWS Amplify 와 GCP 를 활용하여 프로젝트를 배포하였습니다.

프론트엔드 개발팀 보일러플레이트 작성

React, TypeScript, Vite를 기반으로 한 보일러플레이트 작성에 참여하여, 프론트엔드 개발팀이 공통으로 사용할 수 있는 환경을 구축하였습니다.

프로젝트 개요

• Supabase와 React를 활용하여 쇼핑 웹사이트 및 관리자 페이지를 풀스택으로 개발하였습니다.

• 프로젝트의 효율적인 관리를 위해 nx를 활용하여 모노레포로 구성하였으며, web 프론트엔드, admin 프론트엔드, API 개발 프로젝트를 하나의 레포지토리에서 통합 관리하였습니다.

API 개발 (단독 개발)

• Supabase와 PostgreSQL을 활용하여 서버 API를 생성하였습니다.

• 모든 기능별 서비스 클래스를 하나의 Supabase Instance 클래스 안에 메서드로 등록하여, 단일 인스턴스로 모든 서비스를 호출할 수 있도록 구성하였습니다.

• SupabaseContext.Provider를 프론트 웹 프로젝트에 등록하여, 앱 전역에서 Supabase 인스턴스를 사용할 수 있도록 구현하였습니다.

• 복잡한 SQL 쿼리는 Supabase 커스텀 함수로 캡슐화하여 재사용성을 높였습니다.

• 주문이 많은 순서대로 상품을 정렬하거나, 카테고리별로 주문을 많이 한 10명의 유저를 조회하기 위해 JOIN, GROUP BY, ORDER BY 등의 SQL 기능을 활용하였습니다.

• 유저 타입(seller, brand), 인증 여부, 비회원 등 5가지 유저 타입을 관리하였으며, 테이블을 정규화하고 table view를 사용하여 서로 다른 스키마의 테이블 간 조인을 처리하였습니다.

• 제품 수정 시 updated_at 시간을 자동으로 기록하기 위해 트리거를 활용하였습니다.

• 회원가입 후 자동 메일 발송 기능을 위해 Supabase와 Resend를 연동하였습니다.

기술 스택 : Supabase, PostgreSQL, Javascript, nx, Resend

링크 :

관리자 페이지 개발 (단독 개발)

• 2일 만에 16페이지의 퍼블리싱을 완료하였으며, UI 수정과 로직 수정의 확장성을 고려하여 API 로직과 상태 관리를 index.tsx와 view.tsx로 분리하여 개발하였습니다.

기술 스택 : React, Typescript, TanStack Query, Styled-components, MUI

프로젝트 개요

국내 최대 규모 코인 네트워크를 보유한 Factblock 사의 자체 서비스인 Fablo의 웹 기능 개발에 참여하였습니다.

웹사이트 개발

• 다양한 스타일에 대응할 수 있도록 공통 컴포넌트의 스타일을 clsx와 recipe 기능을 활용해 리팩토링하였습니다. 이를 통해 className에 type props만으로 다양한 스타일을 쉽게 적용할 수 있도록 개선하였습니다.

• 그라데이션 프로그래스바와 타이머 컴포넌트를 개발하여, 특정 퍼센트에서의 색상 RGB 값을 계산하여 그라데이션 길이가 줄어드는 프로그래스바를 구현하였습니다.

• i18n을 활용하여 다국어 번역 기능을 제공하였으며, {{ }}를 활용해 동적인 값 번역 문제를 해결하였습니다.

• 공통 toast 개발

  • react-toastify 를 참고하여 커스텀 및 props 를 제공하여 전역에서 유연하게 사용 가능하도록 개발하였습니다.

  • toast.success('성공', 옵션); 과 같은 형태로 쉽게 사용할 수 있도록 구현했습니다.

  • 페이지 이동에 관계없이 최상단에 순차적으로 메시지가 쌓이고 사라지는 전역 토스트 저장소를 구현하였습니다.

• 공통 모달 개발

  • Radix-UI를 참고하여 Compound 컴포넌트 형태의 공통 모달을 개발하여 재사용성을 높였습니다.

기술 스택 : Next.js, TypeScript, TanStack Query, Vanilla-extract, Emotion

관리자 페이지 (단독 개발)

• 12개의 탭과 하위 3뎁스로 구성된 관리자 페이지의 리스트(테이블) 조회, 상세 페이지 조회, 등록, 수정, 삭제 기능을 개발하였습니다.

• Hello-pangea/dnd를 활용하여 드래그 앤 드롭으로 배너의 순서 변경 기능을 구현하였습니다.

• 3뎁스 페이지에서 임시저장 기능을 구현하여, 상위 뎁스에서 하위 뎁스로 이동 시 이미 저장된 경우에는 PATCH를, 저장이 안된 경우에는 저장 후 하위 뎁스로 이동하도록 처리하였습니다.

• React-Quill을 활용하여 텍스트 에디터 기능을 구현하였습니다.

기술 스택 : React , TypeScript , TanStack Query , Styled-components , MUI, Vite

프로젝트 개요

국내 최대 규모의 코리아 블록체인 위크 2024 (KBW 2024) 티켓 예약 서비스를 단독으로 개발하고 배포하였습니다.

웹사이트 개발 (단독 개발)

• 로그인, 할인 적용, 티켓 결제, 구매 정보 조회, 수정, 양도, 티켓 프린트 기능을 개발하였습니다.

• 3가지 타입(1장 적용, 전체 적용, 일부 타입 적용)의 할인 프로모션 기능을 구현하여 다양한 할인 전략을 지원하였습니다.

• React-hook-form과 Zod를 활용하여 유효성 검사를 수행하기 위해, Dropdown 컴포넌트를 제네릭 타입으로 구현하였습니다.

• Eximbay를 활용하여 해외 결제 기능을 연동하였습니다.

• Tailwind CSS, Class Variance Authority, clsx, tailwind-merge를 활용해 다양한 스타일 확장이 가능한 컴포넌트를 구현하여 디자인 적용 시간을 단축시켰습니다.

기술 스택: Next.js, TypeScript, TanStack Query, Tailwind CSS

링크 : https://tickets.koreablockchainweek.com/

관리자 페이지 개발 (단독 개발)

• 판매량 대시보드 조회, 티켓 관리, 프로모션 코드 관리, 주문 관리 기능을 갖춘 관리자 페이지를 구현하였습니다.

• 주문 상태 관리, 부분/전체 취소 및 환불 관리 기능을 구현하여 티켓 관리의 효율성을 높였습니다.

• xlsx를 활용하여 데이터를 Excel로 다운로드하는 기능을 추가하였습니다.

기술 스택 : React , TypeScript , TanStack Query , Styled-components , MUI, Vite

프로젝트 개요

라켓타임 테니스 예약 웹앱을 단독으로 개발하였으며, 사용자의 편의성을 고려한 다양한 기능을 구현하였습니다.

웹사이트 (단독 개발)

• 홈 화면, 팝업, 매장 리스트, 상세 정보, 예약, 검색, 회원가입, 로그인, 마이페이지 등 주요 기능을 개발하였습니다.

• 웹앱 형태의 사용자 경험을 위해 React Portal을 활용하여 바텀시트를 구현하였습니다.

• Tailwind CSS, Class Variance Authority, clsx, tailwind-merge를 활용하여 다양한 스타일 확장이 가능한 컴포넌트를 개발하여 디자인 적용 시간을 단축시켰습니다.

• 카카오 지도를 연동하여 매장 검색 기능을 구현하였고, 지도와 매장 리스트 캐러셀을 연동하여 검색된 매장의 정보를 함께 볼 수 있도록 하였습니다.

검색 엔진 최적화(SEO)

• 네이버 서치어드바이저에 웹사이트를 등록하고, 검색 HTML meta tag를 개선하여 SEO를 강화하였습니다.

• Next.js를 사용해 사이트맵과 robots.txt를 등록하여 검색 엔진 친화적인 웹사이트를 구축하였습니다.

• 웹사이트 공유 활성화를 위해 openGraph를 등록하였고, 동적으로 metadata를 생성하여 매장 상세 페이지마다 다른 title, description, openGraph가 적용되도록 설정하였습니다.

추가 개선 사항

• 회원가입 단계를 확장하고 유지보수 및 상태 관리를 용이하게 하기 위해 퍼널 형태의 컴포넌트로 리팩토링하였습니다.

기술 스택: Next.js, TypeScript, TanStack Query, Zustand, Tailwind CSS, Storybook

링크 : https://www.racketime.com/

웹사이트 개발

• 제품 검색 필터 확장, 필터링 리셋 기능 추가, 검색 및 정렬 기능의 유지보수를 담당하였습니다.

• 제품 사진 확대/축소 및 드래그 기능을 지원하는 캐러셀 모달을 구현하였습니다.

• Zustand 상태 관리를 통해 장바구니 기능을 구현하였습니다.

• 3단계 결제 진행 기능(주문서 작성부터 결제 요청까지)에 대한 보수 작업을 진행하였습니다.

• 로그인 및 회원/비회원 기능을 구분하는 Auth Guard 기능을 구현하였습니다.

• 기술 스택 : React, TypeScript, TanStack Query, Zustand, Emotion, Chakra UI

• URL : https://enoparts.kr/

관리자 페이지 개발 (단독 개발)

• 6가지 필터링 및 항목별 정렬 기능을 가진 제품 관리 기능을 구현하였습니다.

• 5가지 권한으로 나뉜 매니저 등급 관리 기능을 개발하였습니다.

• 엑셀 파일, ZIP 파일 업로드 및 다운로드 기능을 구현하여 데이터 관리의 효율성을 높였습니다.

• 기술 스택: React, TypeScript, TanStack Query, Zustand, Styled-components, Vite, Ant Design (Antd)