미리보기

리그오브레전드의 다양한 정보를 제공하는 서비스입니다.

깃허브 | 배포 링크 | 디자인 | RIOT API

전적 검색할 유저가 없다면 클릭해주세요! 작은 원딜이야기#KR1

❗RIOT API에 웹 정식 등록 요청을 하여 승인을 받았습니다.

핵심 사용 기술

Next.js, Tailwind-css, React-query, Typescript, AWS EC2

상세 내용

• Figma를 활용한 디자인

• Tailwind CSS Dark mode를 활용한 Dark mode 구현

• next-intl를 사용하여 한국어, 영어를 지원하는 다국어 기능 구현

✨핵심포인트

1. Next.js로 프로젝트 구현

   • 자주 변경되지 않는 데이터(챔피언 데이터, 룬 데이터, 아이템 데이터, 게임 버전 데이터 등)에 대해 불필요한 api 재호출 방지와 SEO 최적화를 위해 CSR, SSR 뿐만 아닌 ISR 및 SSG 도입 필요 판단

   • 페이지 라우팅과 동적 페이지 라우팅에 대한 다양한 기능 제공 및 확실한 페이지 설계 분리 필요

   • 외부 라이브러리 없이 동적 Title 및 meta태그를 사용해 SEO 최적화 필요성

2. Next.js route handlers를 사용하여 데이터 재가공

   • 라이엇 api에서 넘어오는 데이터에 대한 재가공이 필요하다고 판단 -> 페이지나 api함수에서 재가공하기보다는 route handlers를 구축하여 재가공하면 유지보수에 더 유리하다고 판단

3. Context API와 커스텀 훅을 활용해 모달과 툴팁 쉽게 사용할 수 있도록 하였습니다.

   • 모달과 툴팁이 동시에 사용되는 페이지가 없고 라이브러리를 도입할 만큼 복잡한 상태 관리가 없다고 판단하여 Context API 사용

4. 전적 검색 페이지

   • 전적 검색 페이지의 초기 렌더링 속도 문제 발생

   문제 및 해결

   1. 전적 데이터 route handler 로직의 복잡함(Data fetching 시간 증가 이는 페이지 렌더링 속도 문제 야기) -> route handler 로직 단순화 및 불필요한 로직 삭제

   2. 룬, 챔피언, 스펠 데이터 server fetching으로 초기 렌더링 속도 저하 및 props drilling발생 -> Tanstack-Query를 사용하여 client fetching으로 변경 후 fetching부분에 대한 Skeleton UI추가(초기 렌더링 속도 개선, props drilling 문제 해결, 사용자 경험 개선)

      (a문제 해결로 server fetching을 다시 고려했지만 비교 결과 client fetching이 사용자 경험에 더 좋다고 판단)

   3. ingame 페이지에서도 룬,챔피언,스펠 데이터 필요 -> 각 데이터 fetching 로직을 query 커스텀 hook으로 분리 후 재사용

   4. ingame button에서 실시간으로 플레이 상태 구현 -> Tanstack-Query를 사용하여 1분마다 자동으로 해당 유저의 게임 상태 데이터를 받아와 업데이트

   페이지 렌더링 속도 평균 9초에서 약 3.5초로 단축 및 유지보수성 증가

5. 메인 페이지

   • 룬, 챔피언, 스펠 등과 같은 데이터는 게임 버전이 업데이트 되면 달라짐(안바뀌는 것도 아니지만 자주 바뀌는 데이터도 아님) -> revalidateTag를 사용하여 페이지 진입시 게임 버전 데이터를 재검증하는 로직을 추가하여 버전이 달라졌으면 다른 데이터들도 업데이트하도록 구현함으로써 불필요한 server api호출 최소화

6. AWS EC2배포

• Vercel로 배포시 PaaS로 배포에 대한 편리함을 제공하지만 Vercel은 서버리스 방식으로 cold start가 있어 페이지 로딩 지연이 발생 할 수 있음 -> IaaS인 AWS EC2와 Nginx, pm2를 사용하여 배포 및 Let’s Encrypt과 certbot를 이용하여 https설정 후 페이지 로딩 속도 향상

저의 포트폴리오를 사이트로 만든 프로젝트입니다.

깃허브 | 사이트

핵심 사용 기술

React, Styled-component, Fabric.js, Typescript, React-router-dom

✨핵심포인트

1. Fabric.js 도입

   • 기본적으로 제공되는 canvas API 사용의 어려움(상태 추적의 어려움, 이벤트 처리, 애니메이션 처리 등)의 이유로 라이브러리를 도입을 결정하였고 그 중 canvas 요소들을 객체화하여 상호작용이 간편하고 요소의 속성을 추가할 수 있는 Fabric.js를 도입

2. Content 페이지

   • Canvas와 Fabric.js를 이용한 애니메이션 구현

     • 점들이 움직이면서 점과 점사이의 거리를 계산해 100이하면 선 생성 -> 점들이 많을 수록 성능상의 이슈가 생김(점이 100개라면 1프레임마다 99 + 98 + ... + 1번의 계산이 필요함)

     • 점을 중심으로 하는 원의 방정식을 그려 다른 점이 그 원안에 있으면 선을 생성하는 방식을 생각했지만 이것 또한 1프레임에 많은 계산이 생겨 성능 이슈 발생 -> 점의 갯수를 최소화하고 모바에서는 canvas를 빼기로 결정

가게에 급한 일손이 필요한 경우 더 높은 페이를 주고 일손을 매칭시켜주는 서비스입니다.

깃허브 | 배포 링크

핵심 사용 기술

Next.js , tailwind-css , React-query , Typescript

인원

프론트엔드(5명)

✨핵심포인트

1. 페이지 FLOW 설계

   • 요구사항의 로그인이나 회원가입 페이지에는 헤더가 없음 -> 그룹 라우팅을 활용하여 헤더가 있는 페이지와 헤더가 없는 페이지를 각각 나눠 레이아웃을 적용

   • 가게정보, 공고, 내 프로필 등록 또는 수정을 하는 페이지는 edit를 붙여 페이지 간 URL 구조의 일관성 보장

   • 가게상세, 가게 공고 상세, 공고 상세 등 식별할 수 있는 고유값이 필요 -> 동적 라우팅을 사용해 해당 페이지에서 그 값을 사용할 수 있도록 설계

2. 내 공고 상세 페이지 개발

   • 신청자 목록 테이블과 내 프로필 신청 내역 테이블의 UI 및 기능이 같다고 판단 -> 공통 컴포넌트로 분리 후 Props를 통해 props에 맞는 테이블 렌더링

3. 페이지네이션 컴포넌트 구현

   • 홈페이지, 테이블에서 사용 -> 공통 컴포넌트로 분리 후 props로 총 데이터 수, 현재 페이지, 한페이지에 보여야하는 데이터 수를 받아 계산하여 각 조건에 맞는 페이지네이션이 렌더링 되도록 구현

4. 가게 등록 페이지, 내 프로필 등록 페이지 구현

   • 가게 등록 이미지 -> S3를 이용한 이미지 업로드 구현

   • react-hook-form을 이용하여 form의 상태관리와 유효성 검사 구현

5. 메인 페이지 상세 필터 컴포넌트 구현

   • react-datepicker를 이용한 시작일 날짜 체크 구현

   • 위치 필터링 -> state로 상태 관리

피클타임(Pickle Time)은 뜻이 맞는 사람들과 함께 자투리 시간을 가치 있게 만들어주는 자기개발 플랫폼입니다.

피클타임이란? 피자를 먹을 때 아주 잠깐의 시간동안 피클을 먹습니다. 이 피클 먹는 시간은 짧지만 피자와의 맛의 조화를 이루어주는 아주 중요한 시간입니다. 이처럼 피클타임은 피클 먹는 시간과 같이 짧은 시간을 가치 있는 시간으로 만들어주는 뜻입니다.

깃허브 | 디자인

❗서버 비용 문제로 서버 배포가 중단되었습니다.

핵심 사용 기술

React, Emotion, Typescript, Tanstack-query, Zustend

인원

프론트엔드(5명), 디자이너(1명)

✨핵심포인트

1. React로 구현

   • 팀원과 회의를 통해 실제 사용자에게 서비스는 하지 않기로함 -> CSR로 충분하다고 판단

2. 메인 페이지 인기 급상승 피클, 마감 임박 피클 컴포넌트 구현

   • 공통 컴포넌트로 구현 가능하지만 그럴 경우 props가 너무 많아 진다고 판단 -> Compound Component패턴을 사용하여 공통 컴포넌트로 구현(props drilling이 줄었음)

   • Suspense와 ErrorBoundary를 사용하여 데이터 로딩, 에러 발생에 대한 상황을 선언적으로 구현

3. bottom sheet modal 컴포넌트 개발

   • 다양한 UI로직을 렌더링을 해야함 -> zustand와 커스텀 훅을 사용하여 모달 상태 관리, 모달 안에 렌더링할 컴포넌트를 상태로 받아 렌더링함으로써 재사용성을 높임

4. 피클 결제 페이지 구현

   • 피클 생성 마지막 단계 및 피클 참가 단계에서 결제 로직 사용 -> 결제 로직을 부분으로 나누어 컴포넌트로 개발

5. 내 피클 페이지 구현

   • 내 피클 카드 구현 -> 내 피클의 상태(진행 전, 진행 중, 종료)에 따라 UI가 달라짐 -> 상태가 3개이고 여기서 더이상 늘어나지 않는다고 판단하여 props로 피클의 상태를 받아 그에 따른 UI를 렌더링하는 공통 컴포넌트 설계