[Node.js] REST API 구축하기

🏎 React.js & Node.js express에서 REST API 구축하기

---

0️⃣ REST API?

REST API는 웹 프레임워크에서 지원하는 기능으로서 클라이언트가 웹 프로토콜을 기반으로 하여 효과적으로 데이터를 주고받을 수 있도록 해준다.

---

1️⃣ Server (./server.js) : customers api 만들기

---

1. 클라이언트가 customer api에 접근하면 반환되는 값을 설정해준다. 아래와 같이 자바스크립트의 배열 데이터를 응답(response) 하겠다고 데이터를 넣어 주기만 하면 json 형태로 변환해서 client에게 보내준다는 특징이 있다. /api/customers로 접속하면 아래의 데이터를 볼 수 있도록 한다.

https://jsonlint.com/ 를 이용하면 json 형식이 맞는지 아닌지 확인할 수 있다.

app.get('/api/customers', (req, res) => {  
res.send([  
      {  
      'id' : '1',  
      'image' : '[https://placeimg.com/64/64/1'](https://placeimg.com/64/64/1'),  
      'name' : '동글',  
      'birthday' : '930121',  
      'gender' : '남자',  
      'job' : '프론트엔드 개발자'  
      },  
      {  
      'id' : '2',  
      'image' : '[https://placeimg.com/64/64/2'](https://placeimg.com/64/64/2'),  
      'name' : '당그리',  
      'birthday' : '950204',  
      'gender' : '여자',  
      'job' : '디자이너'  
      },  
      {  
      'id' : '3',  
      'image' : '[https://placeimg.com/64/64/3'](https://placeimg.com/64/64/3'),  
      'name' : '치동',  
      'birthday' : '911023',  
      'gender' : '남자',  
      'job' : '웹 퍼블리셔'  
      }  
]);

2. 이제 서버를 구동시켜서 우리가 원하는 데이터가 출력되고 있는지 확인한다. 아래 그림과 같이 3명의 고객의 데이터가 배열의 형태로 정상적으로 출력되는 것을 확인할 수 있다.

2️⃣ Client (./client/package.json) 5000번 포트를 api 서버로 이용하기 위한 프록시 설정

client의 package.json 파일로 이동하여 proxy를 추가해준다.

 "proxy" : "http://localhost:5000/"

3️⃣ Client (./client/src/App.js) 이제 client에서 server에 접속해서 고객 정보를 가져올 수 있도록 코딩을 진행한다.

1) 고객 목록은 변경이 가능하기 때문에 변경될 수 있는 데이터를 처리하는 state를 이용한다.

state = { 
 customers : "" 
}

2) API 서버에 접근을 해서 데이터를 받아오는 작업은 componentDidMount() 를 사용한다. react의 컴포넌트는 라이브러리이기 때문에 생명 주기가 존재한다. componentDidMount()는 모든 컴포넌트가 마운트가 완료가 되었을 때 실행된다.

componentDidMount(){

}

3) callApi() 함수를 불러오도록 설정하고 callApi()에 대해서 정의한다.

componentDidMount(){ 
    this.callApi() 
}

4) 'callApi()'는 비동기적으로 수행할 수 있도록 해준다.
(1) 접속하고자 하는 API 주소인 'api/customers' 넣기

callApi = async () => {  
      const response = await fetch('/api/customers')
}

(2) API 주소에 있는 데이터를 가져와서 json 형태로 body 변수에 넣어줌

callApi = async () => { 
    const response = await fetch('/api/customers') 
    const body = await response.json(); }

(3) body를 반환하는 것을 통해 callApi에 고객 목록 데이터를 전달해주게 된다.

callApi = async () => { 
    const response = await fetch('/api/customers') 
    const body = await response.json(); 
return body; 
}

5) 데이터를 받아서 state로 설정하기
(1) then 함수를 통해서 body에 담긴 데이터를 res의 이름으로 바꿔주고 'customers' 변수에 res를 넣어준다.

componentDidMount(){  
 this.callApi()  
 .then(res => this.setState({customers : res}))  
 }

(2) 만약에 오류가 발생했을 때 콘솔 창에 해당 오류를 출력해줄 수 있도록 설정한다.

componentDidMount(){  
this.callApi()  
 .then(res => this.setState({customers : res}))  
 .catch(err => consolo.log(err));  
}

(3) 고객 목록을 state로 만들어주었기 때문에 출력되는 부분의 코드도 수정해준다.

<TableBody>
      {
// customers에서 this.state.customers로 변경 
       this.state.customers.map(c => {
         return(
           <Customer
                   key      = {c.id} 
                   id       = {c.id}
                   image    = {c.image}
                   name     = {c.name}
                   birthday = {c.birthday}
                   gender   = {c.gender}
                   job      = {c.job}
           />
             );            
         })
      }
</TableBody>

6) React 서버 실행해보기
(1) react 서버를 실행해보면 아래와 같은 에러💢 가 발생하게 된다. 이는 비동기적으로 데이터를 가져왔기 때문이다.

---

TypeError: this.state.customers.map is not a function

---

(2) 따라서 코드 수정이 필요한데, this.state.customers 값이 true 값인 경우에만 다음 코드가 수행될 수 있도록 해 주고 false일 때는 공백을 출력하도록 설정해준다.

<TableBody>
    {
    this.state.customers ? 
// true일 때
        this.state.customers.map(c => {
               return(
                 <Customer
                   key      = {c.id} 
                   id       = {c.id}
                   image    = {c.image}
                   name     = {c.name}
                   birthday = {c.birthday}
                   gender   = {c.gender}
                   job      = {c.job}
                 />
               ); // return           
             }) // map 함수
// false일 때 
            : ""} 
</TableBody>

(3) 실행시키고 Network를 확인해보면 아래와 같이 `Request URL` 이 3000인 것을 볼 수 있는데, 실제로는 proxy 설정에 의해서 5000 포트에 접근을 해서 데이터를 받아오는 것이다.

---

4️⃣ 마무리

서버와 클라이언트 구축 및 연동을 완료했고 서버 5000 포트의 API에 클라이언트가 접근을 해서 성공적으로 데이터를 받아오는 작업까지 완료하였다. 다음으로 'AWS RDS를 이용하여 MySQL DB 구축하기'를 진행해보겠다.