4. 쇼핑몰 웹사이트 만들기 (7)

<알고리즘 단계>

//1. 전체 상품 페이지, 로그인 페이지, 상품상세 페이지 - 3개의 페이지 (가 필요)   - 완료 -

//1-1. 네비게이션 바 (만들기.생성) !!!    -완료-

//2. 전체 상품 페이지에서는 전체 상품을 볼 수 있다.

//3. 로그인 버튼을 누르면 로그인 페이지가 나온다.

//4. 상품 디테일을 눌렀으나, 로그인이 안되어있을 경우에는 로그인 페이지가 먼저 나온다.

//5. 로그인이 되어있을 경우에는, 상품 디테일(상세) 페이지를 볼 수 있다.

//6. 로그아웃 버튼을 클릭하면 로그아웃이 된다.

//7. 로그아웃이 되면 상품 디테일(상세) 페이지를 볼 수 없고 다시 로그인 페이지가 보인다.

//8. 로그인을 하면 로그아웃이 보이고 로그아웃을 하면 로그인이 보인다.(상단 오른쪽)

//9. 상품을 검색할 수 있다.

 

이제 ProductAll.js 페이지에서 상품을 보여주자!!

 

잠깐!!!

여기서 의문점이 생긴다....

 

1. 근데 상품은 어디서 들고와야해?

2 .그럼 상품 api가 있어야 하는거 아닐까? ( ex.날씨 앱 만들기 위해서는 날씨 api를 가져와야한다. )

 

H&M의 api가 없는 등의 여러가지 문제가 있다...

따라서 어쩔 수 없이 '직접' 만들어야 함 ㅠㅠ!!

 

<작은 서버 (하나) 만들기

- 그 안에 보여주고 싶은 데이터들을 저장을 해놓는다. 요청을 하면 이 서버에서 데이터를 보내준다. >

 

그럼 "클라이언트와 서버 통신"에 대해서 알아보도록 하자!!

 

 json-server : 서버를 빌드업하기 위해서 해야하는 작업들을 이미 다 끝내놓고 우리가 데이터를 넣어주기만 하면 보내줄 수 있는 아주 작은 서비스를 제공하는 패키지

 

이것을 다운받아서 (이용해서) api 호출을 하고 정보를 줄것이다.

 

참고... [ npm = node package manager ]

 

<json-server 설치>

 

 

코드 하나 없이 json이라는 서버를 사용할 수 있다. (코드 필요 X)

이 json이라는 서버는 기본적으로 Rest API 규칙으로 만들어져 있다.

Rest Router와 Rest API는 같은 개념이다.

 

Rest API 란? API를 호출하는데 Restful의 디자인을 참고로(따라) 해서 만든 서버이다.

👉 REST API란 RESTful 설계 원칙을 따라 자원을 URI와 HTTP 메서드로 제공하는 API이다.

1️⃣ REST API란?

REST API는
👉 REST 아키텍처 스타일을 따르도록 설계된 API야.

핵심 특징

• 자원(Resource) 중심 설계
• 자원은 URI로 표현
• 행위는 HTTP Method로 표현

HTTP Method의미

GET	조회
POST	생성
PUT / PATCH	수정
DELETE	삭제

예시

GET /users → 사용자 목록 조회

GET /users/1 → 1번 사용자 조회

POST /users → 사용자 생성

PUT /users/1 → 1번 사용자 수정

DELETE /users/1 → 1번 사용자 삭제

REST API

REST API는 자원을 URI로 표현하고 HTTP 메서드를 통해 자원에 대한 행위를 정의하는 API이다.

REST Router

REST Router는 REST API 구조에 맞게 클라이언트 요청을 URL과 HTTP 메서드 기준으로 분기 처리하는 라우팅 로직이다.

 

📌 한 줄 요약

• REST API: 어떻게 설계할 것인가
• REST Router: 그 설계를 코드로 어떻게 나눌 것인가

 

이제 json-server를 설치(다운)해보자!!

 

 

 

 

 

다음으로...

db.json이라는 파일을 만들기!

그 (파일) 안에 데이터를 넣어준다.

 

JSON 파일은 단지 단순한 텍스트 타입인데 object의 문법을 따르는 파일이다.

또한 API 호출 할때 제일 많이 쓰이는 타입, 즉 API 소통할 때 제일 많이 쓰이는 파일 형식이다.

 

db.json : 확장자가 json인 파일을 만들어 주세요!

 

그리고 그안에 데이터를 넣으면...

사용자가 호출할 때마다 그 안에서 데이터를 그냥 보내준다.

 

<Start JSON Server> : 어떻게 사용하는가? 

json-server --watch db.json

 

npm start를 통해 클라이언트, 즉 리액트 앱을 시작을 해주듯이 json-server도 시작을 해주어야 한다!