인코스 E-commerce
프로젝트의 개요
이 프로젝트는 프론트엔드 기능을 시작부터 끝까지 직접 구현하며,
이를 통해 기술적인 이해와 학습을 목표로 하는 E-commerce 서비스 개발 프로젝트였습니다.
프로젝트 진행 중에는 백엔드 개발자와 슬랙을 통해 지속적으로 소통하며 발생하는 이슈를 신속하게 해결해왔습니다.
인코스(InCourse)는 사용자가 판매자 웹사이트로 쉽게 이동할 수 있도록 돕는 E-commerce 애플리케이션입니다. 다양한 프론트엔드 프레임워크와 일부 백엔드 프로세스를 활용하여 기능을 구현함으로써, 사용자 경험을 극대화하였습니다.
이 프로젝트를 통해 E-commerce 도메인을 선택한 이유는 이 분야가 다양한 기술들의 통합을 요구하기 때문입니다.
프론트엔드와 백엔드의 상호작용, 사용자 인증 및 보안, 결제 시스템 통합 등 다양한 기술이 함께 사용됩니다.
이를 통해 우리는 종합적인 기술 역량을 강화하고, 실제 서비스 운영에 필요한 기술적 숙련도를 높일 수 있습니다.
유저 흐름도
페이지 구성
로그인 페이지
회원가입 페이지
제품 리스트 페이지
제품 상세 페이지
주문 페이지
결제 페이지
리뷰 페이지
리뷰 리스트 페이지
회원탈퇴 페이지
기술 스택
Next.js
Next.js는 서버 사이드 렌더링(SSR)을 지원하여 더 나은 SEO 성능을 제공합니다.
또한, SSR은 페이지 로드 속도를 개선하여 사용자 경험(UX)을 향상시키는 데 도움이 됩니다.
이를 통해 사용자와 검색 엔진 모두에게 더 나은 접근성과 성능을 제공할 수 있을거라 기대했습니다.
React Query
React Query는 서버 상태를 관리하는 데 최적화되어 있어,
Redux보다 보일러플레이트 코드가 적고 코드의 복잡성을 줄입니다. 자동 캐싱, 데이터 페칭,
그리고 데이터 동기화 기능을 제공하여 효율적이고 간편하게 서버 상태를 관리할 수 있었습니다.
이는 이커머스 애플리케이션에서 제품 정보, 사용자 데이터 등을 관리할 때 매우 유용합니다.
TypeScript
TypeScript는 정적 타입 검사를 통해 코드의 안정성과 유지보수성을 높입니다.
이커머스 프로젝트에서는 다양한 데이터 모델(예: 제품, 사용자, 주문 등)을 다루므로, 타 입 안정성을 보장하는
TypeScript를 사용하면 버그를 사전에 방지하고 개발 생산성을 향상시킬 수 있었습니다.
Chakra UI
Chakra UI는 React 기반의 모던 UI 컴포넌트 라이브러리로, 반응형이고 접근성이
높은 UI를 구축할 수 있습니다. 이커머스 사이트에서 필요한 다양한 UI 요소들을 빠르고 쉽게 구현할 수 있어 개발 시간을 단축하고,
각 컴포넌트를 커스텀하고 디자인 시스템을 적용시켰습니다.
Husky & Pre-linting
Husky와 pre-linting을 사용하여 코드 커밋 전 linting과 같은 자동화된 작업을 수행하였습니다.
일관된 코드 스타일을 유지하는 데 도움이 되었습니다.