미리보기

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

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

UI 및 UX 개선

-> 디자인 시스템 개선

-> 공통 사용 뷰 컴포넌트 통합

(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점으로 개선

→ 로딩 및 에러페이지

💡 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로 무중단 배포 환경 설정

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

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

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

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

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

역할: 백엔드(express.js) 및 web3.js & Klaytn API 활용한 블록체인 개발