EssenceAura 프로젝트

EssenceAura 프로젝트는 프론트엔드 개발자를 준비하는 과정에서 프론트엔드 / 백엔드 / 데이터베이스를 모두 다룰 수 있는 풀스택 개발자로써의 역량을 향상시키는 목적으로 시작하였습니다.EssenceAura 프로젝트는 '가상의 향수 쇼핑몰'을 주제로 하는 풀스택 역

프로젝트의 기능 개발에서 가장 중요한 결정 중 하나는 사용할 '개발 방식'을 선택하는 것입니다. 개발 접근 방식의 선택은 프로젝트의 성공에 매우 중요한 역할을 하는데, 그 이유는 아래와 같습니다.프로젝트를 개발하는데 필요한 자원은 무한하지 않습니다. 일관된 개발 방식은

회원가입 페이지 (RegistrationPage)가 렌더링됩니다.사용자는 회원가입 폼 (RegistrationForm)에 정보를 입력합니다.이메일 중복 검사는 handleCheckEmail을 통해 수행됩니다.이메일 인증 요청은 handleSendVerificationC

사용자는 이메일과 비밀번호를 입력하여 로그인을 시도합니다.프론트엔드는 이 정보를 백엔드로 전송합니다.백엔드는 받은 이메일과 비밀번호를 검증합니다.validateUserPassword 함수를 통해 사용자가 존재하고 비밀번호가 올바른지 확인합니다.인증이 성공하면, 사용자에

사용자가 이메일과 비밀번호를 입력하여 로그인 버튼을 클릭합니다.loginHandler 함수가 호출되어, 입력된 이메일과 비밀번호의 유효성을 검사한 후 서버에 로그인 요청을 보냅니다.서버는 validateUserPassword 함수를 사용하여 입력된 이메일과 비밀번호를

이름과 전화번호 입력: 사용자가 자신의 이름과 전화번호를 입력합니다.서버 요청: '이메일 찾기' 버튼 클릭 시, findEmailHandler 함수가 호출되며, 서버에 이름과 전화번호로 이메일을 찾는 요청을 보냅니다.이메일 찾기 처리: 서버는 findEmailByNam

클라이언트는 토큰을 사용하여 getUserInfoHandler를 호출합니다.미들웨어 authenticateAccessToken에서 액세스 토큰의 유효성을 검증합니다.유효한 토큰인 경우, getUserInfo 함수를 통해 데이터베이스에서 사용자 정보를 조회합니다.조회된

클라이언트 요청: 사용자가 제품 목록 페이지에 접속하거나 필터링/정렬 옵션을 선택합니다.클라이언트에서 서버로 요청 전송: 프론트엔드 코드에서 fetchProducts 함수가 호출됩니다. 이 함수는 사용자의 요구 사항(예: 페이지 번호, 정렬 기준)에 맞게 서버의 /fe

클라이언트 요청: 사용자가 제품 목록 페이지를 방문하면, 기본적으로 첫 번째 페이지의 제품이 표시됩니다. 사용자가 페이지 번호를 클릭하거나 '다음', '이전' 버튼을 사용할 때마다 새로운 페이지 요청이 발생합니다.쿼리 파라미터 전송: 페이지 요청 시, 프론트엔드는 현재

사용자가 검색 키워드를 입력합니다.프론트엔드에서는 이 키워드를 받아 백엔드에 전송합니다. 이 때, debounce 기능을 사용하여 연속적인 입력이 끝난 후 일정 시간이 지나면 요청을 보내도록 합니다.백엔드에서 productRoutes.js를 통해 getProductsH

사용자가 제품 상세 페이지에서 수량을 선택하고 '장바구니에 추가' 버튼을 클릭합니다.addToCart 함수가 호출되며, 이 함수는 선택된 제품과 수량 정보를 장바구니 상태에 추가합니다.이 때, 사용자 ID를 가져와 장바구니 항목(cart-${userInfo.user_i

사용자는 주문을 생성하는 데 필요한 정보(사용자 이름, 이메일, 주문 상품, 총 금액 등)를 입력합니다.프론트엔드에서 createOrder API 요청을 발송합니다.백엔드에서 createOrderHandler가 이를 처리하고, 사용자의 주문 정보를 데이터베이스에 저장합