미리보기

Next.js (App router)와 react-query로 SSR을 사용한 백오피스 페이지 개발

• prefetchQuery를 병렬처리하여 데이터 불러오기 성능을 최대 2초 -> 1초로 향상

UI 및 UX 개선

• 디자인 시스템을 개선하여 일관된 사용자 경험 제공

• 공통 사용 뷰 컴포넌트를 통합하여 코드 중복 30% 감소

(Typescript, Next.js, React Query, TailwindCSS)

캠핑장 예약 및 검색, 캠핑장 운영, 커뮤니티 플랫폼 '캠퍼스팟'

Next.js 선택 이유

SEO 최적화

• 캠핑과 관련한 플랫폼이기 때문에 SEO에 장점이 반드시 존재해야한다고 판단

  • SSR로 SEO를 높일 수 있고, 자동 코드분리와 파일 시스템 기반 라우팅의 장점이 있는 Next.js 선택

  • Next.js의 layout의 meta 활용 및 Open Graph 적용

App Router 선택

• Page Router 사용시 DX 가 좋지 못하였고, layout 처리의 어려움을 겪었음

  • 라우팅을 통한 폴더관리 및 layout 사용으로 SEO 높일 수 있는 App Router 선택 및 적용

  • Route Handlers를 사용하여 별도의 API 서버를 구축하지 않고 서버리스 함수로 API를 구현

  • Server Component 적용으로 클라이언트에서 사용자 정보 노출 방지

회원가입 및 로그인

NextAuth의 Credentials를 활용하여 회원가입 기능 개발

• 유효성 검사 코드 작성시 코드가 너무 길어지고, 코드 가독성이 떨어지는 문제점이 발생하였음

  • 로그인과 회원가입시 사용자의 UX를 위해 실시간 유효성 검사 기능 react-hook-form 활용하여 구현

  • 회원가입시 보안 이슈 발생 가능성 고려하여 bcrypt 로 비밀번호 암호화 후 데이터베이스에 저장

소셜로그인

• 네이버 / 카카오 OAuth 이용한 소셜로그인 구현

유저 테스트

30건의 유저 테스트 진행

• 사용자 인터렉션 통합의 필요성이 존재했음

  • alert로 되어있는 인터렉션을 react-toastify로 통합

• 이미지 로딩 속도 개선 (31%)

  • Next/Image 컴포넌트 적용 및 Supabase Storage에서 이미지 확장자 WebP로 변경

  • 이미지 로딩 속도 40ms -> 29ms로 31% 성능 개선

  • Next/Image 활용한 이미지 최적화 후 Lighthouse 73 -> 83점으로 개선

  • 사용자 만족도 조사 결과 20% 향상

• 로딩 및 에러페이지

  • Suspense fallback 활용한 로딩과 에러페이지 추가하여 UX 개선

https://camperspot.vercel.app/

https://github.com/h0ngwon/Camperspot

cravo.kr 랜딩페이지 개발 및 배포

• Next.js (App router)의 SSR 과 TailwindCSS 활용

• AWS EC2로 배포 및 Route53으로 도메인연결, nginx로 포트포워딩, pm2로 무중단 배포 환경 설정

• 프로젝트 코드 및 결과물 : https://cravo.kr/

• 9 To 9 풀타임 참여 (누적학습시간 1079시간)

• HTML5, CSS3, JavaScript, TypeScript, React, Next.js, Redux, Tanstack-Query 역량 향상

• 최종프로젝트 - 캠퍼스팟 (Camperspot)

  • 프로젝트 목표 : 늘어나는 캠핑족들을 위한 쉽고 간편한 예약 플랫폼 개발

  • 사용 기술 : Typescript, Next.js, React-query, Next-Auth, Zustand, Supabase

  • 본인 역할 : 프론트엔드 개발 리드, ERD 설계, 인증/인가, 마이페이지

  • 성과: 사용자 피드백을 통해 UI/UX 개선, 페이지 성능 16% 향상, 사용자 만족도 20% 향상

  • 프로젝트 코드 및 결과물 : https://github.com/h0ngwon/Camperspot

우아한테크코스 5기 프리코스 - 웹 백엔드 / 서버 부분 참여 (JAVA)

NOA (블록체인 SNS) 어플리케이션 제작

• 프로젝트 목표: NFT를 발급하고 발급한 NFT를 공유하는 SNS 서비스

• 사용 기술 : Swift, Unity, Express.js, Web3.js, Klaytn API

• 본인 역할: 백엔드(Express.js) 및 Web3.js & Klaytn API 활용한 NFT 민팅 기능 개발

• 프로젝트 코드 및 결과물 : https://github.com/h0ngwon/NOA