미리보기

1. 폼 입력 및 유효성 검사 개선
   ◦ 최적화된 로딩을 위해 React Hook Form을 도입하고, 기능을 극대화하기 위해 유효성 검사까지 포함하여 실시간 검증 구현
   ◦ Controller와 trigger를 활용한 실시간 유효성 검사 설계
   ◦ 항목별 검증 로직을 간소화하여 사용자 입력 오류 방지 및 개발 효율 개선

2. 상태 관리 및 API 최적화
   ◦ Axios + React Query를 활용해 콘텐츠 승인/반려 상태에 대한 mutate 처리 구현
   ◦ query invalidation을 통한 데이터 동기화 및 UX 흐름 최적화
   ◦ 에러 핸들링 및 optimistic update 적용을 통한 안정적인 요청 처리 구현

3. 파일 업로드 및 미리보기 기능
   ◦ Axios 기반의 이미지/영상 업로드 기능과 실시간 미리보기 기능 구현
   ◦ 콘텐츠 등록 전 결과 확인을 위한 Shadcn UI 기반 미리보기 모달 구성
   ◦ 백엔드 API 명세서를 바탕으로 정확한 파일 처리 로직 구현

4. 컴포넌트 리팩토링 및 성능 개선
   ◦ 성능 비교 후 react-select 도입 및 useEffect 최적화를 통한 렌더링 지연 문제 해결
   ◦ Zustand persist 적용으로 새로고침 시 데이터 초기화 방지 기능 구현
   ◦ 라이브러리 기능을 적극 활용한 반복 작업 감소 및 생산성 향상

5. 권한 기반 UI 제어 및 사용자 경험 향상
   ◦ 사용자 Role(MASTER, WRITER)에 따른 접근 권한 설정 및 조건부 렌더링 구현
   ◦ 실무 수준의 UX 설계 및 사용자 중심의 UI 분기 구조 설계

6. CI/CD 이슈 대응 및 협업 경험
   ◦ GitHub Actions 배포 환경에서 발생한 로컬-서버 간 빌드 차이 문제 분석 및 디버깅 브랜치 구성
   ◦ 백엔드와의 협업을 통한 문제 원인 파악 및 대응 전략 수립
   ◦ CI/CD 환경에서 발생할 수 있는 배포 이슈에 대한 실무적 대응 경험 확보

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. 성과:

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

와인 구독 서비스 아이디어로 팀원 3인 구성으로 창업 콘테스트에 본선 진출하였습니다.

팀장 역할을 맡았고, 제품 디자인 및 기획 전반을 담당했습니다.

팀원 4인 구성으로 박물관 큐레이터 서비스를 기획하여 해커톤에서 인기상을 수상하였습니다.

팀장 역할을 맡았고, 기획 전반과 발표 자료 제작을 맡았습니다.

수채화 작품으로 미술공모에서 금상을 수상하였습니다.

수채화 작품으로 공모전에서 특선을 수상하였습니다.