[3주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 15

post는 웹 브라우저로 테스트가 안됩니다.

postman의 등장

 

get과 post

http 메소드는 여러가지가 있다

 

post get put patch delete head options connect trace

 

생성(등록) : Post

ex. 회원가입 = 나 좀 등록해줘 = id, password, name, email, contact

개인정보를 숨겨서 보내야한다.

웹 브라우저는 개인정보를 숨겨서 옮겨야한다는걸 알고 있다.

데이터가 바디에 숨겨져 와야 데이터가 온것을 알 수 있다.

조회 : get

ex. URL로 데이터 보냈는데?

수정 : PUT(덮어쓰기) / PATCH

 

post 를 위한 개발도구 postman

 

https://www.postman.com/

Postman: The World's Leading API Platform | Sign Up for Free

 

에러가 나도 html로 이쁘게 보여주는 모습

 

body에 숨겨져서 온 데이터를 화면에 뿌려줘볼까?

 

respones 내용들이 담겨있고

request 내용들이 담겨있다

 

app.use(express.json) 

익스프레스 안에 있는 모듈중에 하나

미들웨어를 사용하면

req로 날아오는 데이터를 json으로 읽어볼수 있다.

 

유튜브 데모 업그레이드

 

1. 기존 유튜버 3명만 정보를 반환할 수 있었고, 새로운 유튜버를 등록할 수가 없었다

2. 1,2,3 유튜버에 대한 api

 

POST를 활용해서! 유튜버를 추가

<API 설계>(URL, method)

0) 전체 유튜버 "조회" GET/youtubers

-req : X

-res : map을 전체 조회

1) 개별 유튜버 "조회" GET/youtubers/:id : id로 map에서 객체를 찾아서, 그 객체의 정보를 뿌려줌

-req : params.id <= map에 저장된 key값을 전달

-res : map에서 id로 객체를 조회해서 전달

 

2) 유튜버 "등록" => POST /youtubers

-req : body <= channelTitle, sub = 0 , videoNum = 0 신규 유튜버 정보를 전달

db에 저장까지 해줌!

-res: "channelTitle님, 유튜버 생활을 응원합니다!" 

 

app.use(express.json())

app에다가  use 함수를 사용 http 대신 사용할 미들웨어 어떻게 셋팅을 할지

express.json 형태로 사용

 

다른 툴에서 복사 해서 다른 곳에서 붙여넣기 했을때 오류 가능성이 있어서

직접 일일이 타이핑하면 정상적으로 실행될수 있다.