AI 마케팅 모니터링 서비스 'ChainShift' Console MVP 개발 (프론트엔드 50%, 2025. 6)

D3.js, rechart, tailwindCSS, shadcn/UI, Zustand, Vercel

• 차트 리포트 3 페이지를 개발했습니다.

• 바이브 코딩으로 1주 안에 4개 차트 구현과 API 연동 등 영업 데모에 필요한 최소 요건 구현에 성공했습니다.

피봇에 대비한 '랜딩 페이지 템플릿' Web App 개발 (100%, 2025. 5)

TypeScript, Next.js 15, tailwindCSS, shadcn/UI, Vercel

• 아이템 피봇을 고려하여, 서로 다른 서비스의 랜딩 페이지를 만들 수 있도록 개발했습니다.

• AI 마크업 후 사용자 의견을 수집하여 기능을 추가했습니다. (앱 데모 슬라이더, FAQ 토글, 이메일 등록 등)

• 개발자 사용자를 고려해 CMS를 생략, 본문 SSR과 상수/컴포넌트 정리 및 사용법 주석 작성에 집중했습니다.

비용 실시간 모니터링 AI Console MVP 전역 리팩토링 (프론트엔드 100%, 2025. 4)

TypeScript, Next.js 15, tailwindCSS, shadcn/UI, Tanstack React Query, React Hook Form, Axios, Docker, PostgreSQL

• 기존 코드는 전체 프로젝트 단위의 공통 요소가 부족해 작업에 가속이 붙지 않았고, 일관적인 UI/UX를 만들기 어려워 비전문적인 인상을 주었습니다. 전역 상태 관리 흐름 & 경로 접근 관리 & 에러 리팩토링으로 코드를 줄이고, 개발 생산성을 향상시켰습니다(백엔드 협업 시 확인해야 했던 API 파일 15개 삭제 등).

  • 리팩토링 방법 : 공통화

    • API 호출/응답 활용 공통화: Axios instance + Tanstack React Query 커스텀 훅으로 API 호출 로직 일괄 처리

    • 경로 접근 관리 공통화: Next Auth + 미들웨어 (로그인 상태별 제한)

    • 에러 공통화: React Hook Form + Compound Component Pattern로 입력 에러 설정, onError용 범용 HTTP 에러 핸들러로 API 응답 에러 일괄 처리

  • 리팩토링 결과

    • rewrite 함수로 대체한 15개 개별 API route 파일 삭제, 관련 문서를 Postman 1개로 축소

    • 서버 에러 메시지 직접 사용 및 커스텀 모두 용이

축구 데이터 분석 올인원 서비스 '오코치' - 소프트웨어 파트 QA 엔지니어 (Web, Windows/macOS, iPadOS)

• 비디오, 데이터 사이언스, 웹, 모바일, 하드웨어 등 10명 이상의 개발자와 협업했습니다.

• Jira 프로젝트로 커뮤니케이션 비용을 줄였습니다, 전사 QA TF로 테스트 벤치, 지원사양 등을 마련했습니다.

물류 업무 B2B SaaS(OMS/WMS) '물류대장' - QA 매니저 (Web, Android/iOS)

• 입력 관련 컴포넌트 디자인 시스템을 마련하고, 데이터 소스 기준으로 용어를 통일했습니다(유비쿼터스 언어).

• mySQL을 통한 물류 데이터 QA를 수행하고, 스케줄 관리를 위해 이슈/버그 트래커를 도입했습니다.

유료 인물 검색 및 취재 용도의 인물 정보 담당 사원

• 카카오톡, 문자, 팩스 등 프로필 제공자에게 친숙한 수단으로 본인 동의 프로필 제공률을 30%로 높였습니다.

• 레이아웃 개선으로 응답 양식을 1 페이지로 50% 단축해, 응답 중에 페이지가 누락되는 문제를 해결했습니다.

개요 | 랜딩 페이지형 개발자 포트폴리오
상세 | 프론트엔드 1인 | 2025. 6 -
역할 | 1인 개발
스킬 | TypeScript, Next.js 15, TailwindCSS, Shadcn/UI, React Hook Form, Yarn, npm-check-updates, Vercel, AWS Route 53, JetBrain Junie

• 인터랙티브 UI와 시맨틱 마크업에 유의하며 개발하고 있습니다.

개요 | 사장님과 알바생이 폼으로 소통하는 구인구직 플랫폼 (가장 비슷한 서비스: 알바몬)
상세 | 팀 프로젝트(프론트엔드 5인) | 2024. 9 - 2024. 11
역할 | 프론트엔드 개발, 프로젝트 리딩, 컨벤션 / GitHub / 자동배포 설정
스킬 | TypeScript, Next.js 14, SCSS, Zustand, Tanstack React Query, React Hook Form

성과 |

1. 채용공고 사이트의 SEO score 100 달성 (Google Lighthouse)

   루트를 서버 컴포넌트로 유지하도록, 클라이언트만의 루트를 생성해 React Query Client 전역 적용


   1. 문제: 루트를 서버 컴포넌트로 유지하기 위해 Tanstack React Query를 Root에 적용하지 못하고 나누어 적용하다 보니, 같은 Query Client를 사용해도 따로 관리되는 문제가 발생했습니다.

   2. 해결: Root Layout을 서버 컴포넌트로 유지하는 클라이언트 컴포넌트만의 전역 설정 방법을 고안했습니다. 클라이언트 사이드 요소를 별도 컴포넌트로 분리하면, Root Layout이 서버 컴포넌트로 남아 프로젝트 전체가 클라이언트 컴포넌트가 되지 않는 것을 발견하고 분리된 컴포넌트를 ClientSideSetUp이라고 이름 붙였습니다.

   3. 결과: 위 방법으로 QueryClientProvider를 전역 적용하는 리팩토링을 수행했고, defaultQueryClient를 적용하는 중복 코드를 삭제하고 하나의 Query Client로 서버 상태를 관리하게 되었습니다.
      

2. 상태 관리가 적용된 조립식 Form 컴포넌트 개발 → 초기에 공통 적용해 form의 디자인, 상태 관리를 통일

   1. 문제: 이전 프로젝트에서 팀원마다 react-hook-form 사용 수준에 차이가 있었습니다. Tanstack React Query의 Query Client처럼 공통된 form 설정을 적용하고자 했습니다.

   2. 해결: Compound Component Pattern으로 제작한 Form 컴포넌트의 각 부분에 useFormContext로 라이브러리가 정의한 타입을 공통 적용하여, Form 컴포넌트에 react-hook-form을 사전 적용했습니다.

   3. 결과: Form 컴포넌트를 조립식으로 만드는 동시에, 단일 형태 컴포넌트처럼 form 상태관리를 미리 적용할 수 있었습니다. 공통 Form 컴포넌트 적용 시점을 앞당겨 빠르게 디자인과 유효성 검사 등 상태 관리를 통일했습니다.
      

3. 사용자 상태 6종별 접근 권한 관리 통일

   1. 문제: 페이지 접근 제한을 위해 페이지마다 useRouter를 적용했더니 속도가 느리고, useRouter 함수를 선언하는 찰나에 제한된 영역이 노출되었습니다.

   2. 해결: 페이지 내 제한된 영역을 페이지별 ProtectedContent 컴포넌트로 분리했습니다. 렌더링 시점을 사용자 확인 후로 다르게 하여 순간 노출을 차단했습니다.

   3. 결과: 제한 페이지에 리다이렉트를 위한 HOC withAuth를 공통 적용하고 페이지 컴포넌트는 서버 컴포넌트로 변경해 속도를 개선했습니다.

개요 | 질문과 답변으로 소통하는 소셜 Q&A 플랫폼 (가장 비슷한 서비스: ask.fm)
진행 | 프로젝트(4인) | 2024. 6
역할 | 프론트엔드 개발, 컨벤션･GitHub 설정
스킬 | JavaScript, React.js, CSS Module, Axios, Storybook

성과 |

1. 무한 스크롤 등 상황별 질문 불러오기 기능 구현 (렌더링 이슈로 인한 API 요청 오류 방지)

   1. 문제: 질문 데이터를 불러올 때, API 요청이 아예 일어나지 않거나, 무한히 반복해서 일어나는 문제가 발생했습니다. IntersectionObserver를 이용한 무한 스크롤의 경우 질문 추가 로드 함수가 observer에 의존성이 있어, 질문이 추가 로드될 때 observer가 반복 재정의 되며 API 무한 요청이 발생했습니다.

   2. 해결: 질문 불러오기를 트리거할 상태를 'isHydrated'로 정의하고, 그 외 의존성은 재사용하여 API 함수 호출을 트리거하지 못하게 했습니다(useRef, useMemo, useCallback 등 React Hook으로 캐싱/참조). 또한 끝까지 스크롤하면 스크롤 관찰을 바로 해제하여, 스크롤이 멈춰 있을 때나 질문 추가 로드가 진행 중일 때 화면 끝에 새로 도달한 것처럼 반복해서 API 요청을 보내지 않도록 했습니다.

   3. 결과: 질문이 0인 피드에 질문을 새로 등록했을 때, 한 피드를 보고 뒤로 가기 후 다른 피드로 갔을 때, URL을 바꿔 다른 피드로 접속했을 때, 피드를 생성 기록이 로컬 히스토리에 있을 때 등 다양한 상황에서 에러 없이 데이터를 출력할 수 있었습니다.

- ≪Do It! Oracle로 배우는 데이터베이스 입문≫ 개정판 출간 직전, 틀리거나 어려운 부분과 변경안 제안을 정리해 출판사에 전달했습니다.

- 학습 내용을 토대로, MVP 개발 시 직접 데이터를 조작해 개발 서버/데이터 없이 프론트엔드 UI를 확인할 수 있었습니다(Docker, PostgreSQL).