MERN 스택 애플리케이션| 2부-JS 튜토리얼-php.cn

MERN 스택 애플리케이션| 2부

Patricia Arquette

풀어 주다： 2024-10-23 21:26:02

원래의

279명이 탐색했습니다.

MERN Stack Application| Part 2

MERN 스택으로 구축된 전자 상거래 애플리케이션의 맥락에서 사용자가 제품 세부 정보를 가져오려고 할 때 요청-응답 주기가 어떻게 작동하는지 살펴보겠습니다.

사용자가 전자상거래 사이트를 열고 제품 세부정보를 보고 싶어합니다. 제품 목록을 클릭하거나 특정 항목을 검색할 수도 있습니다.

프런트엔드 UI를 담당하는 React는 이러한 상호작용을 감지하고 제품 데이터를 가져오는 요청을 트리거합니다.

React는 /api/products/:id와 같은 엔드포인트를 대상으로 백엔드에 HTTP 요청(axios, fetch 등을 사용)을 수행합니다. 여기서 :id는 제품의 고유 식별자입니다.

Node.js와 Express로 구축된 백엔드 서버는 정의된 경로에서 들어오는 HTTP 요청을 수신합니다.

/api/products/:id에 대한 요청이 도착하면 Express는 경로를 인식하고 요청을 해당 경로 핸들러로 전달합니다.

요청이 처리되기 전에 미들웨어 기능을 거칠 수도 있습니다.

예를 들어 미들웨어는 요청 세부 정보를 기록하거나, 사용자가 인증되었는지 확인하거나, 요청 매개변수의 유효성을 검사할 수 있습니다.

모든 것이 정상이면 요청은 경로 핸들러로 진행됩니다. 그렇지 않으면 미들웨어가 오류 응답(예: "무단 액세스")을 반환할 수 있습니다.

요청이 적절한 경로 핸들러에 도달하면 Express는 Mongoose와 같은 MongoDB 드라이버를 사용하여 데이터베이스를 쿼리합니다.

쿼리는 다음과 같습니다: Product.findById(productId), 여기서 productId는 URL에서 추출됩니다.

MongoDB는 데이터베이스에서 이름, 가격, 설명, 이미지, 재고 여부를 포함한 제품 세부정보를 검색합니다.

MongoDB에서 제품 세부정보를 가져온 후 Express는 데이터를 처리합니다.

데이터는 제품에 대해 필요한 모든 정보가 포함된 JSON 개체 형식으로 구성됩니다.

Express는 이 JSON 응답을 React 프런트엔드로 다시 보냅니다.

React는 응답으로 제품 세부정보를 받습니다.

데이터를 사용하여 사용자 인터페이스를 업데이트하고 제품 이름, 가격, 이미지, 설명 및 기타 관련 정보를 표시합니다.

제품을 찾을 수 없거나 오류가 발생하는 경우(예: "제품을 사용할 수 없음") React는 사용자에게 적절한 메시지를 표시합니다.

요청-응답 흐름 예시

사용자 액션(반응): 사용자가 홈페이지에서 '무선 헤드폰'이라는 제품을 클릭합니다.
HTTP 요청: React는 /api/products/12345에 GET 요청을 보냅니다. 여기서 12345는 "무선 헤드폰"의 제품 ID입니다.
Express 경로 처리: Express는 요청을 수신하고 /api/products/:id에 대한 경로가 있는지 확인합니다. 그런 다음 요청을 관련 핸들러에 전달합니다.
데이터베이스 쿼리(MongoDB): Express는 Mongoose를 사용하여 MongoDB를 쿼리하고 Product.findById("12345")를 실행하여 "무선 헤드폰"의 세부 정보를 가져옵니다.
응답 형성: 제품이 발견되면 Express는 다음과 같은 세부 정보가 포함된 JSON 응답을 보냅니다.

{
"id": "12345",
"name": "무선 헤드폰",
"가격": 59.99,
"description": "잡음 제거 기능을 갖춘 고품질 무선 헤드폰.",
"이미지": ["image1.jpg", "image2.jpg"],
"재고": 20
}