미리보기

프론트엔드 개발자

• 3위 수상

• 10일 간의 기간 동안 기획부터 배포까지 완료

• 길고양이 돌봄 문화의 선도를 위한 이냥저냥 서비스 출시

• 카카오 지도 API 연결 및 비즈니스 로직 적용 지도 컴포넌트

  • 현재 위치 표시 애니메이션 제작 및 핀, 클러스터 커스텀 적용

  • 거리 계산 함수

• ToolTip 컴포넌트

• Toast 커스텀 훅 제작

• 캐릭터 아이콘 디자인

개요

• Github

• 배포 사이트

스택

🛠 기술 스택

Frontend
JavaScript TypeScript React.js Next.js (v15) TailwindCSS MUI Zustand React Query

Backend
Nest.js PostgreSQL

Infra
Github AWS Docker Nginx Firebase (이전)

주요 기능 및 구현 내용

✅ 프론트엔드 개발

• Zustand 도입
  기존 Recoil 사용 시 Next.js 15와의 호환성 문제 발생
  → Zustand로 전환하여 Provider 없이도 전역 상태 관리 구현
  → React Hook 스타일의 선언 방식과 간결한 Store 구조로 구현 및 유지보수 편의성 향상

• 반응형 UI 설계
  TailwindCSS를 활용한 반응형 UI 구현
  → 다양한 디바이스(pc, tablet, mobile)에서 일관된 사용자 경험 제공

• 게시판 필터링 및 페이지네이션
  클라이언트 측 필터 및 서버 연동 페이지네이션 기능 구현
  → 데이터 탐색 효율성 및 접근성 향상

• SEO 최적화
  Next.js App Router 기반의 동적 sitemap.xml 및 robots.txt 자동 생성
  → 검색 엔진 크롤링 효율 및 검색 노출 제어 개선

  • sitemap.xml: 백엔드에서 게시물 정보를 동적으로 받아와 URL 맵핑

  • robots.txt: 검색 허용 범위 설정

  • metadata: layout.tsx에서 페이지별 title, description, Open Graph 정보 추가

• 검색 포털 등록
  Naver, Google 등 주요 검색 포털 3곳에 검색 노출 등록 완료

✅ 백엔드 및 서버 인프라

• Nest.js 기반 API 서버 구축

  • RESTful 아키텍처 설계 및 비즈니스 로직 구현

• Firebase → PostgreSQL 마이그레이션

  • Firebase의 Cursor 기반 페이지네이션 제약으로 임의 페이지 접근 불가 및 응답 지연(평균 3초)
    → PostgreSQL 도입 후 Offset 기반 페이지네이션 적용
    → 평균 응답 속도 0.5~0.7초로 약 3배 이상 성능 개선

• 컨테이너 기반 배포 환경 구축

  • AWS EC2 + Docker + Nginx 조합으로 프론트, 백엔드, DB 모두 컨테이너화하여 배포 및 운영

• 이미지 업로드 최적화

  • 초기에는 클라이언트에서 이미지 리사이징 후 Firebase Storage 업로드
    → 서버에서 리사이징 후 AWS S3 업로드 방식으로 전환하여 클라이언트 부하 감소 및 처리 일관성 확보

✅ SEO 및 사용자 분석

• 분석 도구 연동

  • Naver Search Advisor, Google Analytics 연동을 통한 사용자 행동 데이터 수집

• UX 개선

  • 유입 경로, 디바이스 유형, 페이지별 체류 시간 등의 지표를 기반으로 UI/UX 개선 진행

개요

• Github

스택

Frontend
Javascript Typescript React.js Next.js TailwindCSS Recoil Axios React-query

Tools
Github Notion

주요 기능 및 구현 내용

✅ 프로젝트 협업 및 기획

• 디자이너, 프론트엔드 및 백엔드 개발자와의 협업 프로젝트

• 서비스 초기 기획 및 데이터 구조 설계 참여

✅ 프론트엔드 개발

• 지도 및 위치 검색 기능 구현

  • Kakao Map API를 활용해 지도 검색 기능 구현
    → 키워드 검색 API 응답을 useInfiniteQuery로 무한 스크롤 처리하여 UX 개선

• Compound Components Pattern 적용
  Input 컴포넌트를 CCP 기반으로 구현
  → 회원가입, 반려동물 등록 등 다양한 화면에서 통일된 UI 및 재사용성 확보
  → 유지보수성과 확장성 향상

✅ 배포 및 인증 처리

• AWS + Docker를 이용한 프론트엔드 배포
  → Docker 기반 컨테이너 이미지로 배포 자동화 일부 진행 (CI/CD 예정)

• 도메인 간 쿠키 인증 문제 해결

  • Next.js 서버가 클라이언트의 쿠키를 인식하지 못하는 문제 발생
    → next.config.js의 rewrites 기능을 활용한 프록시 서버 설정
    → 로그인 토큰 전달 이슈 해결 및 인증 로직 안정화

개요

• Github

• Notion

스택

Frontend
Javascript Typescript React.js Next.js TailwindCSS Zustand React-query

Tools

Github Notion Slack

주요 기능 및 구현 내용

✅ 프로젝트 협업 및 기획

• 기획자, 디자이너, 프론트엔드 및 백엔드 개발자와의 협업

• 초기 데이터 흐름 및 컴포넌트 구조 설계에 기여

✅ 프론트엔드 개발

• 공통 지도 컴포넌트 구현 (Kakao Map API 활용)

  • kakao-map-sdk 라이브러리를 사용하여 공통 지도 컴포넌트 개발

• 커스텀 위치 아이콘 및 클러스터 기능 추가

  • 길고양이 위치 표시 아이콘을 선택 유무에 따라 동적으로 스타일 변경

  • 현재 위치 아이콘에 TailwindCSS를 활용한 애니메이션 적용

  • 두 위치 사이의 거리 계산 함수 구현

✅ 프론트엔드 개발

• 공통 지도 컴포넌트 개발
  kakao-map-sdk를 활용하여 지도 기능 컴포넌트화
  → 커스텀 마커, 클러스터링, 거리 계산 기능 구현

• 동적 UI 적용

  • 위치 아이콘 상태에 따른 스타일 변경

  • 현재 위치 아이콘에 TailwindCSS 애니메이션 적용

  • 두 지점 간 거리 계산 로직 구현

✅ 전역 상태 관리 및 UI 개선

• Zustand 기반 전역 상태 관리 도입

  • React Hook 스타일의 선언 방식과 간결한 Store 구성으로 채택

  • 자주 사용하는 커스텀 메서드를 store에 등록하여 관리 효율성 향상

• Toast 커스텀 훅 개발

  • 메시지 타입별 (info, check, error) 메서드 구분

  • Zustand를 활용해 글로벌 상태에서 Toast 메시지 일괄 관리

  • setTimeout으로 자동 사라짐 기능 구현 및 스타일 동적 제어

✅ 소셜 로그인 및 인증 처리 개선

• SSR 환경에서 토큰 미전달 문제 발생

  • 로그인 후 클라이언트에서만 토큰을 저장해, Next.js 서버 측에서 쿠키를 인식하지 못하는 이슈 발생

  • 해결 방식

    • 로그인 성공 시, Next.js API 라우트에서 HttpOnly 쿠키로 토큰 직접 설정

    • next.config.js에 프록시 설정 추가로 동일 도메인처럼 처리

    • Middleware에서 쿠키를 읽어 인증 상태에 따라 페이지 접근 제어

  • 결과

    • 클라이언트와 서버 모두 인증 상태를 일관되게 유지하여, SSR 환경에서도 안정적인 로그인 처리 구현

브랜드 디자인 및 웹디자인, 캐릭터 디자인(캐릭터 저작권 등록), 굿즈 디자인(폰 액세서리 및 스티커, 키링, 반지 등), SNS 홍보물 제작, 판매 상세페이지 관리, 상품 포장 및 출고, 재고 관리 등

울산항만공사 SNS 계정관리 및 프로젝트 기획·시행