✅배경설명
실제 서버도 아니고 mock(가짜) 서버를 왜 만들어야할까??!?
백엔드는 개발되는데 보통 6개월이 걸리지만, 프론트는 개발하는데 2개월 정도 걸린다. 그렇다면, 백엔드단이 개발할때까지 기다릴것인가??!? 그럴순 없지!!
바로 mock 서버로 만들어서 테스트를 해봐야한다.
mock 서버를 어떻게 만들것인가??
✅바로 json-server로 짧은 시간에 mock서버를 구축해보자~~!
json-server 는 아주 짧은 시간에 REST API를 구축해주는 라이브러리이다.
우선 먼저 설치해보자.
1️⃣터미널 창을 열어서 아래와 같은 내용을 입력한다(윈도우 기준)
mkdir jsonserver //jsonserver 폴더 생성
cd jsonserver //jsonserver 디렉토리로 이동하기
npm i -g json-server //json server 설치하기npm i -g json-server 입력한후 터미널창을 보면 아래와 같은 표시가 뜬걸 확인할 수 있다.
mkdir db //jsonserver 안에 db 폴더 생성
//db폴더 안에 db.json 파일을 생성한다
db.json 파일을 생성하면 아래와 같은 간단한 데이터를 넣는다.(내가 넣고 싶은 json 형식의 데이터를 넣으면 된다)
{
"product": [
{
"id": 1,
"productName": "버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링",
"price": 12500,
"stockCount": 100,
"thumbnailImg": "asset/img/1/thumbnailImg.jpg",
"option": [],
"discountRate": 0,
"shippingFee": 1500,
"detailInfoImage": [
"asset/detail/2/detail1.png",
"asset/detail/2/detail2.png"
],
"viewCount": 0,
"pubDate": "2022-02-28",
"modDate": "2022-02-28"
},
{
"id": 2,
"productName": "우당탕탕 라이캣의 실험실 스티커 팩",
"price": 3500,
"stockCount": 1000,
"thumbnailImg": "asset/img/2/thumbnailImg.jpg",
"option": [],
"discountRate": 0,
"shippingFee": 1500,
"detailInfoImage": [
"asset/detail/2/detail1.png",
"asset/detail/2/detail2.png"
],
"viewCount": 0,
"pubDate": "2022-02-28",
"modDate": "2022-02-28"
},
{
"id": 3,
"productName": "딥러닝 개발자 무릎 담요",
"price": 17500,
"stockCount": 0,
"thumbnailImg": "asset/img/3/thumbnailImg.jpg",
"option": [],
"discountRate": 0,
"shippingFee": 1500,
"detailInfoImage": [
"asset/detail/3/detail1.png",
"asset/detail/3/detail2.png",
"asset/detail/3/detail3.png"
],
"viewCount": 0,
"pubDate": "2022-02-28",
"modDate": "2022-02-28"
},
{
"id": 4,
"productName": "네 개발잡니다 개발자키링 금속키링",
"price": 13500,
"stockCount": 100,
"thumbnailImg": "asset/img/4/thumbnailImg.jpg",
"option": [],
"discountRate": 0,
"shippingFee": 1500,
"detailInfoImage": [
"asset/detail/4/detail1.png",
"asset/detail/4/detail2.png"
],
"viewCount": 0,
"pubDate": "2022-02-28",
"modDate": "2022-02-28"
},
{
"id": 5,
"productName": "Hack Your Life 개발자 노트북 파우치",
"price": 36000,
"stockCount": 230,
"thumbnailImg": "asset/img/5/thumbnailImg.jpg",
"option": [
{
"id": 1,
"optionName": "13인치",
"additionalFee": 0
},
{
"id": 2,
"optionName": "15인치",
"additionalFee": 1000
}
],
"discountRate": 19,
"shippingFee": 1500,
"detailInfoImage": [
"asset/detail/5/detail1.png",
"asset/detail/5/detail2.png"
],
"viewCount": 0,
"pubDate": "2022-02-28",
"modDate": "2022-02-28"
},
{
"id": 6,
"productName": "[NEW] 위니브 개발자, 캐릭터 스티커팩 2종",
"price": 5500,
"stockCount": 1000,
"thumbnailImg": "asset/img/6/thumbnailImg.jpg",
"option": [
{
"id": 1,
"optionName": "위니브 개발자 스티커팩",
"additionalFee": 0
},
{
"id": 2,
"optionName": "위니브 프랜즈 스티커팩",
"additionalFee": 0
},
{
"id": 3,
"optionName": "스티커팩 세트(개발자+프렌즈)",
"additionalFee": 5000
}
],
"discountRate": 0,
"shippingFee": 1500,
"detailInfoImage": [
"asset/detail/6/detail1.png",
"asset/detail/6/detail2.png",
"asset/detail/6/detail3.png",
"asset/detail/6/detail4.png",
"asset/detail/6/detail5.png"
],
"viewCount": 0,
"pubDate": "2022-02-28",
"modDate": "2022-02-28"
},
{
"id": 7,
"productName": "제주코딩베이스캠프 코딩 연습장 세트",
"price": 8000,
"stockCount": 1000,
"thumbnailImg": "asset/img/7/thumbnailImg.jpg",
"option": [],
"discountRate": 0,
"shippingFee": 1500,
"detailInfoImage": [
"asset/detail/7/detail1.png",
"asset/detail/7/detail2.png"
],
"viewCount": 0,
"pubDate": "2022-02-28",
"modDate": "2022-02-28"
}
]
}그 다음은 아래와 같이 터미널 안 명령어를 넣는다
cd db 는 db폴더로 이동하세요
json-server --watch db.json --port 3001 리액트의 기본 포트가 3000이기 때문에 port 를 3001로 실행한다.
정상적으로 작동하면 아래와 같이 Done 이 실행된다.
그리고 Resources 밑에 url 주소를 브라우저에 입력해보면 db.json 안의 데이터들을 보여준다.
그러면 이제 이 db.json 파일의 데이터를 토대로, 데이터를 추가할수도 있고, 데이터를 가져올수도 있다!
2️⃣ about:blank 콘솔창에서 테스트 해보자~~~~
1) fetch의 method: get 방식을 사용해서 데이터를 가져와보자
fetch는 필수값으로 url을 인자를 첫번째로 가지며, 두번째는 옵션값으로 method나 header를 지정 가능하다.
method 에는 ('GET', 'POST', 'PUT', 'DELETE' ) 가 있다.
자세한 내용은 fetch에 대한 내용을 따로 적을 예정이다.
url 은 아까 우리가 클릭해봤던 3001번 포트의 url, 데이터를 가져올것이니 method는 get방식을 적는다.
아래와 같은 코드를 콘솔창에서 테스트 해보면 무사히 3001번 포트에 있는 데이터를 가져오는 것을 확인할수 있다.
fetch('http://localhost:3001/product', {
method: 'GET'
})
.then((response) => response.json())
.then((data) => {
console.log('성공:', data);
})
.catch((error) => {
console.error('실패:', error);
});
- 콘솔창 결과 -
2) fetch 의 method:post 방식을 이용해서 데이터를 추가해보자
콘솔창에 아래와 data 라는 상수를 만들어서 data를 집어넣고 아래와 같은 코드를 집어넣는다.
const data = {
"id": 9,
"productName": "제주코딩베이스캠프 1000일 놀고먹는제주캠프",
"price": 80000000,
"stockCount": 1,
"viewCount": 0,
"pubDate": "2022-02-28",
"modDate": "2022-02-28"
};
fetch("http://localhost:3001/product", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data),
})
.then((response) => response.json())
.then((data) => {
console.log("성공:", data);
})
.catch((error) => {
console.error("실패:", error);
});- 콘솔창 결과 -
성공 이라고 떴다.
아래 url에 접속해보면 우리가 추가한 데이터가 떡하니 추가되어진걸 볼수가 있다.
http://localhost:3001/product
id 7번 다음 맨 밑에 id 9번으로 추가된걸 볼수있다.
참고자료 : 멋사 프론트엔드스쿨 3기 수업내용 및 아래 블로그 게시글 참고
'프론트엔드 개발 > JavaScript' 카테고리의 다른 글
| 자바스크립트 초보자도 이해할 수 있는 호이스팅 Hoisting (0) | 2022.11.13 |
|---|---|
| 자바스크립트) 변수 const, let, var (1) | 2022.11.12 |
| JavaScript) 반복문 - Array.forEach &object.for in (0) | 2022.10.12 |
| JavaScript) 함수 return (0) | 2022.10.10 |
| JS) if/else, function 3,6,9게임 연습문제 (0) | 2022.10.07 |