☝️ 클라이언트-서버 간 통신 이해하기

// server/index.js
// 클라이언트(app.js)의 fetch 요청에 대한 서버 응답

// id를 요청 받으면 특정 영화의 정보를 보내줘야 한다.
// 라우터 경로의 변경 /:id/:mode 를 통해 path 방식 url 값을 가져올 수 있다.
app.get('/movies/:id', function(req, res) {
	movies.filter(item => {
  // path 방식을 사용하는 url의 경우 params를 통해서 값을 가져올 수 있음
  // 받아오는 타입은 string이므로 number로 바꾸어야 한다.
	  return item.id === Number(req.params.id);
	})
	// console.log('받아오는 id의 타입: '+ typeof req.params.id);

  // 존재하지 않는 id를 요청받았을 경우에는 404 에러(클라이언트 측 에러)로 응답한다.
  if(/*받아오는 id가 실제 데이터 id와 같지 않다면*/) ...

  // 성공했을 경우의 상태와 응답 메세지
})

// client/app.js
// 서버(server/index.js)에 데이터를 요청

// 첫 렌더링 시 서버에 데이터를 요청하고 받아온다.
componentDidMount() {
  fetch('<http://localhost:3000/movies>')
  .then(res => {
		// 받아온 데이터 처리
    return res.json();
  })
  .then(data => {
		// json화된 데이터로 상태 변화
    this.setState({ movies: data, currentMovie: mockMovie[0] })
  })
}

참고) Semantic URL 관련 블로그

Semantic URL 를 프로젝트 내 소통수단으로!

✌️ 클라이언트 마지막 테스트 케이스

2020년 11월 26일 TIL 보러 가기