[TIL] 오늘의 개발일지

 

오늘은 오전에 학원에서 발제가 진행되었고, 발제가 끝난 후 바로 리액트 심화강의를 들었다. 

숙련때 강의가 정말 별로였는데, 심화강의도 똑같았고(이렇게 평점 안좋게 남긴거 처음인 강의)

심화강의를 얼른 수강하고, 내가 따로 끊은 강의를 들으며 리액트를 제대로 이해했다. 

아무리 개발자가 스스로 찾는 능력을 갖추어야 한다지만, 그렇게 모든 것을 중요하니 다 찾아보라는 식으로 얘기 하는 강의라면

누가 돈을 주고 강의를 볼까?

 

아쉬움이 많이 남았던 리액트 심화 강의였다.

하지만, 아쉬운 건 아쉬운거고 이해하고 습득해야하는 건 내 몫이니 

내가 이해가 될 때까지 파야한다 (목마른 사람이 우물을 파야하는 법!!)

 

오늘 더더욱 정신을 똑바로 차리고 수준이 뒤쳐지지 않게 노력해야겠다고 다짐했다.

 

 <TIL 제출하고 할 일> 

1. 패캠 리액트 강의 듣기 

2. 패캠 js 수업 1시간 듣기

3. this 개념 제대로 이해했는지, 튜터님한테 여쭤보기

 

 

 오늘 심화강의 들으며 정리했던 내용 

 

(1) json-server 정의 및 사용하는 이유

• json-server를 통해서 프론트에서 백이 하고 있는 작업을 기다리지 않고, 프론트의 로직과 화면을 구현 할 수 있어 효율적으로 협업을 할 수 있다. mock data로 사용하는 것을 넘어, 실제로 배포까지 하여 간단한 API 서버를 구축하고 과제 프로젝트를 완성하는데 사용할 것

*  mock : 거짓된, 가짜의. 실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해서 샘플로 만들어 본 데이터

• json-server란, 아주 간단한 DB와 API 서버를 생성해주는 패키지 이다. 우리가 json-server를 사용하는 이유는 Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함

 

(2) json-server 설치하기

yarn add json-server

 

 

json-server가 간단한 패키지이긴 하나, 말그대로 서버이다. 그래서 리액트와는 별개로 따로 실행을 해줘야 한다.

-> 리액트도 start하고, json-server로 start 해야 하는 것. 그래야 리액트와 json-server가 서로 통신 할 수 있다.

 

아래 명령을 통해 json-sever를 실행 명령어의 대략적인 뜻은 db.json 이라는 것을 db로 삼고, 3001 포트에서 서버를 시작하겠다는 뜻

yarn json-server --watch db.json --port 3001

 

index.js

const jsonServer = require("json-server");
const path = require("path");

const server = jsonServer.create();
const router = jsonServer.router(path.resolve(__dirname + "/db.json"));
const middlewares = jsonServer.defaults({
  static: path.resolve(__dirname + "/../build/"),
});

const port = process.env.PORT || 3001;

server.use(middlewares);

server.use(jsonServer.bodyParser);

server.use(router);
server.listen(port, () => {
  console.log("JSON Server is running");
});

 

db.json

{
  "todos": [

  ]
}