미리보기

• 장바구니 로직 구현

  • 클라이언트와 서버에서 장바구니 데이터를 관리하여 사용자 경험을 최적화.

  • 로그인 시 서버에서 장바구니 정보를 불러오고, 로그아웃 시 로컬 스토리지에 임시 저장.

• Error Boundary 및 Suspense Boundary 적용

  • 에러 발생 시 사용자에게 향상된 피드백 제공.

  • 비동기 로딩 상태에서 로딩 스피너를 표시하여 사용자 경험 개선.

• Zod를 통한 런타임 에러 처리

  • API 응답의 데이터 유효성 검사를 강화하여 명확한 에러 처리를 구현.

  • 개발자와 사용자 모두에게 유리한 에러 관리 체계 구축.

• 대용량 이미지 최적화

  • Intersection Observer API를 활용한 lazy loading 구현.

  • 페이지 초기 로딩 속도 개선 및 성능 최적화.

소상공인을 위한 음식 판매 플랫폼 개발

• 인증 및 인가 로직 구현

  • 복잡한 로그인 상태를 처리하고, 사용자 인증 및 인가 체계를 구축하여 보안 강화.

• 컴포넌트 기반 설계

  • 다른 개발자들이 쉽게 사용할 수 있도록 컴포넌트 기반으로 설계.

  • 서버 컴포넌트와 클라이언트 컴포넌트를 효과적으로 구현하여 유지보수성 향상.

• Controlled Component와 Uncontrolled Component 고려

  • 사용자 입력 처리 방식에 대한 고민을 통해 최적의 컴포넌트 설계 적용.장바구니 로직 구현

    • 클라이언트와 서버에서 장바구니 데이터를 관리하여 사용자 경험을 최적화.

    • 로그인 시 서버에서 장바구니 정보를 불러오고, 로그아웃 시 로컬 스토리지에 임시 저장.

  • 대용량 이미지 최적화

    • Intersection Observer API를 활용한 lazy loading 구현.

    • 페이지 초기 로딩 속도 개선 및 성능 최적화.

• Next.js 도입

  • LCP(Largest Contentful Paint)와 CLS(Cumulative Layout Shift) 성능을 향상시켜 사용자 경험 개선.

• 상태 관리 고민

  • Controlled Component와 Uncontrolled Component의 장단점을 분석하고, 서버 상태와 클라이언트 상태의 효과적인 관리 방안 모색.

  • 상태 관리를 위한 적절한 라이브러리 선택에 대한 고민.

• 타입 체크 라이브러리 도입

  • 안정적인 소프트웨어 개발을 위해 컴파일 및 런타임 환경에서의 타입 체크를 위한 라이브러리 도입.

• MSW(Mock Service Worker) 활용

  • 백엔드 개발과 병렬적으로 진행하기 위해 MSW를 도입하여 API 요청을 모킹.

  • 브라우저 환경과 서버 환경의 동작 원리를 이해하고 이를 효과적으로 활용.

JavaScript 및 React, Next.js 개발

• 프로그래밍 경험

  • JavaScript에서 React, Next.js까지 직접 구현해 보며 발전 과정 학습.

  • SCR, SSR, ISR, SSG 등의 개념 및 MVVM 패턴 이해.

• 팀 프로젝트 경험

  • 다양한 Git Flow 전략을 배우고, 팀원들과의 효과적인 커뮤니케이션 능력 향상.