미리보기

Description

기존 플랫폼의 한계를 극복, 모집과 관리 기능을 통합한 스터디 서비스

• 프로젝트 : https://github.com/Kang-1230/smit.git

Experience

1. 회원가입 유효성 검사와 타입 안정성 강화

   1. 데이터 검증과 타입 안정성 개선

      • React Hook으로 유효성 검사를 진행했으나 코드가 많아지고 복잡해지는 문제 발생

      • Zod를 선택 : 스키마 기반의 데이터 유효성 검사, TypeScript와의 우수한 호환성 때문에 선택

      • 코드가 간결해지고 코드량 60% 감소

   2. 폼 상태 관리와 유효성 검사를 간편화하며 성능을 최적화

      • 사용자가 비밀번호를 입력할 때 마다 실시간으로 정교한 유효성 검사가 진행되어야 할 필요성 확인

      • React Hook Form 도입 : trigger와 resolver를 활용해 필드별 동적 유효성 검사를 구현

      • 이메일, 비밀번호, 생년월일 등의 입력값 스키마를 정의하고, 유효성 검증 코드를 통합하여 코드 중복 제거

2. 상태 관리 및 API 최적화

   1. 웹 사이트의 성능 향상과 검색 엔진 최적화를 위해 SSR 도입

      • SSR을 도입하기 위해 Next.js를 사용

   2. Zustand를 사용

      • Context나 Redux를 사용하기엔 보일러 플레이트가 너무 많고 코드가 복잡하였기 때문에 간단한 상태 관리 도구 선택

      • 사용성과 코드 간소화 측면에서 다른 상태 관리보다 유리하다고 생각

      • Props를 내릴 필요나 과도한 보일러 플레이트를 작성할 필요가 없어지는 효과

   3. React Query 사용

      • Next.js로 코드를 짰더니 API 함수가 복잡하고 양이 많아지는 현상 발견

      • 코드가 간소화되고 쉬워짐, isError나 isLoading을 통해 에러나 로딩도 관리할 수 있게 되어 코드의 안전성 증가

   4. 두 상태 관리 도구를 결합하여 클라이언트 및 서버 상태를 체계적으로 관리

      • Zustand로 Client 쪽 상태를, 서버 상태 관리에 특화된 React Query로 Server 쪽 상태만을 관리하는 방식 사용

   5. Supabase API를 활용해 사용자 인증 상태와 데이터를 효율적으로 동기화

3. 소셜 로그인 도입

   1. 백엔드 개발자가 없어 BaaS 플랫폼 사용 : Firebase와 Supabase 두 개 비교

      • Supabase 채택 :

        • Next.js를 활용한 Server Component의 이점을 최대한 활용할 의도

        • 자체 라이브러리를 제공

        • app router server, Client component에서 더 잘 작동하고 가이드 문서를 참고하기 용이한 효과

   2. Google 및 Kakao OAuth 사용

      • 사용자 편의성을 극대화할 수 있는 필수 기능

      • Supabase와의 높은 호환성

   3. signInWithOAuth API를 사용

      • 소셜 로그인 기능을 구현

      • Supabase Auth와 클라이언트 상태를 연동하여 인증 흐름을 간소화

   4. 배포 환경에서 발생한 리다이렉트 URI 설정 문제

      • 배포 환경과 개발 환경의 환경 변수 설정을 통해 해결

4. UI/UX 최적화

   1. Tailwind CSS

      • TailwindCSS를 활용한 스타일링

        • 대규모 프로젝트에 적합한 유틸리티 기반 스타일링 구현.

        • 반응형 디자인을 통해 모바일 및 데스크톱 환경에서 최적화된 UI 제공.

      • 사용자 피드백 반영

        • 총 12건의 피드백을 바탕으로 UI를 개선하고 설문조사를 통해 90% 이상의 사용자 만족도를 달성.

5. 트러블 슈팅

   1. 문제:

      • Supabase auth.signUp에서 사용자 정보가 user 테이블에 저장되지 않는 오류 발생

   2. 해결 과정:

      • 트랜잭션 문제를 확인

      • Supabase의 상태 동기화 로직을 재구성하여 데이터 불일치를 해결

   3. 성과:

      • 사용자 등록 프로세스 안정화

Description

취업에 대한 여러 서비스를 제공하는 서비스

Experience

1. 포인트 상점 구현

   1. Supabase 사용

      • 백엔드가 없는 작은 프로젝트였기 때문에 백엔드 작업을 가능하게 해 주는 BaaS 플랫폼이 필요

      • 포인트 상점의 포인트가 실시간으로 동기화될 필요성 확인

        • 프로젝트 규모가 작더라도 유료화하여야 하는 Firebase는 부적합

        • Supabase 선택

          • 인증 및 API 생성을 통해 서버 구축 없이 백엔드 작업을 가능하게 하고 작은 프로젝트는 무료로 제공

          • 실시간 동기화 기능 제공

      • Supabase를 사용하여 프로젝트 구현 비용 감소

      • 실시간 동기화 기능 구현

   2. Zustand 도입

      • 사용자 포인트와 상품 데이터를 전역 상태로 관리할 필요성 확인

      • Zustand 사용

        • Redux 대비 학습 비용이 적고 상태 전역 관리에서 유연성을 제공

      • Zustand를 사용하여 컴포넌트 간 상태 공유를 간소화

   3. 포인트 상점 시스템 구현

      • Supabase의 insert 및 update 기능을 사용

        • 포인트 데이터를 추가 및 갱신

      • 로직 최적화

        • Supabase와 Zustand를 활용해 포인트 거래 시스템 구축

        • 실시간 데이터 동기화를 통해 사용자 포인트 즉시 반영

        • 상품 구매 로직 최적화로 API 호출을 줄이고, 클라이언트-서버 상태 일원화

   4. 도구 선택 시 필요성과 대안을 고민하는 습관을 형성하며, 팀원들과 효율적인 문제 해결 방안을 도출

2. 트러블 슈팅

   1. RLS 문제 해결:

      • 포인트 거래 도중 발생한 Update 로직 문제를 해결하기 위해 검색으로 오류가 날 수 있는 요인들을 검토하였고, Supabase의 Row-Level Security(RLS)를 검토하여 테이블 구조를 재구성

• 프로젝트 : https://github.com/escape-engineering/gachibbo.git

Description

카카오 지도, 전국 문화 축제 표준 데이터, 유튜브의 API를 활용하여 지도에서 축제들의 위치와 정보를 찾아 볼 수 있으며 관련된 영상에도 손쉽게 접근 가능한 서비스

• 프로젝트 : https://github.com/rarrit/festival-recommendations.git

Experience

1. 위치 기반 축제 정보 제공

   1. 카카오 지도 API 사용

      • 사용자 위치 데이터를 기반으로 한 지도 시각화에 최적화

      • 한국에서의 높은 접근성과 신뢰성을 제공

      • 사용할 수 있는 API의 종류가 많아 자율성이 높다고 판단하여 채택

      • 클러스터링 방식으로 데이터를 시각화, 축제 정보 직관적으로 제공

   2. React 사용

      • 지도, 마커, 정보 창 등 각 요소를 독립적으로 관리할 필요성 확인

      • 컴포넌트 기반 개발과 상태 관리의 효율성을 제공

   3. RESTful API 이용

      • 축제 데이터를 수집

   4. 반응형 UI를 설계

      • 모바일 및 데스크톱 환경 모두에 최적화

2. 북마크 기능 개발

   1. Json-server 사용

      • 개발 초기 로컬 환경에서 API 테스트와 데이터 관리를 빠르게 실행

      • 북마크 데이터를 저장

   2. TanStack Query 활용

      • 데이터 캐싱과 비동기 상태 관리에 강점

      • 캐싱 및 데이터 동기화를 구현

      • 북마크 데이터를 효율적으로 관리

      • delete 기능을 관리할 때 TanStack Query를 사용했을 때 효율성 증가

   3. 불필요한 API 호출을 최소화

      • 애플리케이션 성능 최적화

3. 트러블슈팅

   1. 문제

      • 데이터 삭제의 어려움 발생 : Json-server가 DELETE 메서드에서 다중 조건 삭제 미지원

   2. 해결

      • 데이터 구조를 재구성

      • 단일 조건으로도 삭제가 가능하도록 API 호출 방식을 변경

   3. 성과:

      • 데이터 삭제 로직의 안정성 확보