[Task] Express & React 연동하기

1. Express

npm init

npm install express

터미널에 위와 같은 명령어를 입력해 package.json를 생성하고 express를 의존성에 추가한다. 

// app.js
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

위 코드는 Express 공식문서에서 제공하는 기본 코드이다. 아래와 같은 명령어를 터미널에 입력하면 3000번 포트에 Express 로컬서버가 열린다.

node app.js

 

2. axios로 React와 Express 연동

npm i axios

npm install을 통해 axios 라이브러리를 프로젝트에 의존성을 추가한다

const baseURL = "http://localhost:3000/movie-api";

const serverClient = axios.create({ baseURL });

axios 라이브러리의 axios.create 함수를 활용해서 serverClient 객체를 만들어준다.

export const getMovieDetailInAPI = async (movieId) => {
	const url = `/movie/${movieId}`;
	const res = await serverClient.get(url);

	return res.data;
};

통신 목적에 따라 함수를 개별적으로 생성하고 그 안에서 axios를 활용해 request를 서버에 전송한다

 

 

3. Tanstack Query를 활용해 HTTP 통신

Tanstack Query는 훅이기 때문에 컴포넌트 안에서만 사용할 수 있다. 따라서 API 함수를 활용할 컴포넌트에 들어가 다음과 같은 코드를 작성한다.

const { data: movieDetail } = useQuery({
	initalData: [],
    queryKey: ['movies', { movieId }],
    queryFn: (movieId) => getMovieDetailInAPI(movieId)
})