[쿠킹레시피] 프로젝트 세팅 및 제이슨 서버 설치

 

 

 

 

 

 

Index.css

 

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800&display=swap');

/* base styles */
html, body, #root {
  height: 100%;
}
body {
  font-family: Raleway, sans-serif;
  margin: 0;
  font-size: 1.4em;
  background: #dfdfdf;
  color: #333;
}
h1,h2,h3,p {
  margin: 0;
}
input, textarea {
  color: #333;
  padding: 8px;
  font-size: 1em;
  border-radius: 4px;
  border: 1px solid #d4d4d4;
  background-color: #fff;
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.page-title {
  text-align: center;
  margin: 40px auto;
  color: #333;
}
.loading, .error {
  text-align: center;
  margin: 40px auto;
}

 

 

 

 

App.css

 

.App {
  min-height: 100%;
}

 

 

 

App.jsx

 

import "./App.css";

function App() {
  return <div className="App">앱입니다.</div>;
}

export default App;

 

 

 

 

 

 

제이슨 서버를 사용해보겠음. 

제이슨 파일만 있으면 CRUD작업을 할 수 있는 임시 서버임

 

data폴더를 만들고 그 안에 임의로 만든 db파일을 넣는다.

db.json

0.00MB

이 db.json 파일에는 json형식으로 db가 들어가있다. 

 

recipes 배열안에는  3개의 객체 ( 레시피 3개) 가 들어있다. 

 

 

그리고 제이슨 서버를 설치한다. 

 

 

 

브라우저에서  위의 주소들을 입력해본다. 

 

 

 

 

 

서버와 리액트 실행 창을 따로 띄운다.