미리보기

Github 및 배포 사이트

• Github

• 배포 사이트

사용 스택

Javascript Typescript React.js Next.js TailwindCSS MUI React-query Zustand Nest.js postgreSQL Github AWS EC2 AWS ECR Docker

Feature

• RESTful API

• AWS, Docker를 사용한 프론트엔드, 백엔드 서버 및 데이터 베이스 배포

• 게시판 내 필터, 페이지네이션 기능 추가

• 반응형 UI를 적용해 다양한 기기에서 일관된 사용자 경험을 제공

SEO 최적화

• sitemap.xml

  • Next.js에서 제공하는 sitemap.ts 파일 변환 라우트 핸들러를 통해 동적 sitemap.xml 생성

  • 사이트맵 생성으로 인해 search bots 크롤링 최적화

• robots.txt

  • Next.js에서 제공하는 robots.ts 파일 변환 라우트 핸들러를 통해 동적 robots.txt 생성

  • search bots 크롤링 허용 범위 설정

• metadata

  • layout.tsx를 통해 metadata 작성으로 title, description, open graph 설정

  • contents detail 페이지의 경우, 서버 컴포넌트에서 서버 데이터를 받아와 해당 데이터를 페이지 layout에 추가적으로 설정하여 사용자의 접근성을 높이고자 함

• 검색 포털 사이트 3사에 sitemap.xml, robots.txt 파일을 토대로 검색 노출 신청
  ⇒ 현재 검색 포털 사이트 3사에 키워드 검색 시 확인 가능

• Naver Search Advisor, Google Analytics 추가
  ⇒ 웹 페이지 내 사용자 유입 경로 및 디바이스 등 인사이트 확보

서버 구현

• Firebase를 이용해 초기 서버를 구축했으나, 페이지네이션 구현이 복잡하고 대량 데이터를 처리할 때 속도 저하 문제 발생(데이터 패칭 약 3s 가량 소요)
  ⇒ 이를 해결하기 위해, Nest.js와 PostgreSQL로 직접 서버와 데이터베이스 설계
  페이지네이션 알고리즘을 적용해 API 성능을 크게 개선, 데이터 패칭 시간 3배 이상 단축(데이터 패칭 약 0.5 - 0.7s 소요)

• 프론트엔드에서 이미지 리사이징 후 firebase bucket 저장
  ⇒ 서버에서 이미지 리사이징 후, AWS S3에 업로드할 수 있도록 로직 수정

Github 및 배포 사이트

• Github

• 배포 사이트

사용 스택

Javascript Typescript React.js Next.js TailwindCSS Recoil Axios React-query Github AWS Docker

Feature

• 디자이너, 프론트엔드 및 백엔드 개발자 협업 프로젝트(기획 참여)

• RESTful API

• AWS, Docker를 사용한 프론트엔드 배포

• kakao API를 통해 지도 및 위치 검색 기능 구현

Kakao API

• 카카오 지도 키워드 검색 API에서 받아오는 서버 데이터를 React-query에서 제공하는 useInfiniteQuery를 활용하여 무한 스크롤 기능 구현

middleware

• Next.js의 SSR 환경에서 도메인 간 쿠키 접근 제한으로 인해, 쿠키 값을 읽을 수 없는 undefined 에러 발생

  ⇒ 이 문제를 해결하기 위해 Next.js의 rewrite 기능을 사용하여 프록시 서버를 설정, 도메인 간 통신을 안전하게 처리하고, 토큰을 기반으로 정확한 페이지 리디렉션 구현. 이를 통해 로그인 및 인증 기능이 안정적으로 동작하도록 개선

Input Compound Components Pattern

• 회원가입 시 뿐만아니라 반려동물 정보 및 일정 추가, 수정 등 많은 화면에서 다양한 Input 타입 사용

  ⇒ 디자인 패턴을 일정하게 조절할 수 있는 Compound Components Pattern을 이용하여 Input 컴포넌트 개발

Github 및 배포 사이트

• Github

• Notion

• 배포 사이트

사용 스택

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

Feature

• 우리 동네 길고양이의 위치와 정보를 공유하여 올바른 길고양이 돌봄 문화를 만드는 서비스

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

• RESTful API

Kakao Map API

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

  → 단순 위치 표기용, 커스텀 위치 아이콘나 클러스터 표시 등 다양한 상황에서 목적에 맞게 활용 가능하도록 컴포넌트 설계

• 커스텀 위치 아이콘 구현

  • 컨텐츠 위치 표시 아이콘

    • 선택 유무에 따라 css 적용

  • 현재 위치 표시 아이콘

    • tailwindCSS를 활용하여 애니메이션 추가

  • 커스텀 클러스터 추가

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

Zustand

• 새로운 상태관리 라이브러리 도입
  ⇒ Recoil과 Redux의 장점은 살리고 단점은 보완한듯한 느낌
  ⇒ React Hook과 같은 선언 방식, store 생성 시 액션 작성이 용이하여 사용빈도가 높은 커스텀 메소드를 등록할 수 있다는 점이 좋아 채택

Toast 커스텀 훅 제작

• Toast 커스텀 훅을 제작해 정보 알림, 확인, 에러 등 다양한 상태의 메시지를 동적으로 관리 및 각 메시지의 상태에 따라 유연하게 UI 변경
  ⇒ Zustand 상태 관리를 활용해 Toast 메시지들을 전역적으로 관리, 이를 통해 각 컴포넌트에서 동일한 메시지 관리 로직을 공유
  ⇒ setTimeout을 이용해 Toast 메시지가 일정 시간 후에 자동으로 사라지도록 구현
  ⇒ 다양한 UI 상태 관리: Toast 메시지를 단순히 텍스트만 출력하는 것이 아니라, 객체 형태로 전달된 다양한 상태(성공, 텍스트)에 맞춰 아이콘, 색상, 메시지 스타일을 유연하게 변경할 수 있도록 설계

  const { addToast } = useToast();
  
  addToast.check('새로운 소식을 등록했어요!');
  

Social Login + middleware

• 위 pet diary 프로젝트와 마찬가지로 서버에서 토큰을 받아올 수 없는 문제 발생

  
  ⇒ 소셜 로그인 후 토큰 값을 next.js 서버에서 토큰 값을 설정 후 미들웨어에서 페이지 리디렉션을 수행할 수 있도록 구현

설명

• 기획자 1명, 디자이너 1명, 프론트엔드 개발자 2명, 백엔드 개발자 1명으로 구성된 팀

• 프론트엔드 개발자로 참여

• 참여팀 17개 팀 중 3위 수상

기능 구현 사항

• 우리 동네 길냥이들 올바른 돌봄 문화의 시작, 이냥저냥 서비스 출시

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

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

• ToolTip컴포넌트

• Toast 커스텀 훅 제작

• 캐릭터 아이콘 디자인