[Node.js] Express에서 REST API 구축하기 (ft. 동빈나쓰앵님)

나는 동빈나 선생님의 8강 강의를 듣는 중인데

옛 버전이라 현재 버전에 맞게 쩜 업그레이드 함

 

 

1. server.js에서 /api/customer를 요청했을 때 데이터 반환하도록 수정

function createData(id, image, name, birthday, gender, job) {
    return { id, image, name, birthday, gender, job };
}

app.get('/api/customer', (req, res) => {
    res.send([
        createData(1, "https://placekitten.com/64/64", "fufubao", "200720", "girl", "student"),
        createData(2, "https://placekitten.com/64/64", "lebao", "120728", "boy", "manager"),
        createData(3, "https://placekitten.com/64/64", "aibao", "130713", "girl", "ceo"),
    ]);
});

데이터 추가하는거 귀찮아서 createData 라는 함수 만들었음

그럼 브라우저에서 http://localhost:3001/api/customer를 요청하면

[{"id":1,"image":"https://placekitten.com/64/64","name":"fubao","birthday":"200720","gender":"girl","job":"student"},{"id":2,"image":"https://placekitten.com/64/64","name":"lebao","birthday":"120728","gender":"boy","job":"manager"},{"id":3,"image":"https://placekitten.com/64/64","name":"aibao","birthday":"130713","gender":"girl","job":"ceo"}]

화면에 이렇게 배열이 뙇 하고 뜸

 

 

2. client의 package.js에 proxy추가

"proxy":"http://localhost:3001/"

이거슨 서버로 proxy경로를 쓰겟다는것이다

 

 

3. App.js 수정

하드코딩부분 지우고 서버에서 데이터를 받아서 테이블을 업데이트 하도록 수정한다.

 

function App() {
  const [customers, setCustomers] = useState([]);

  useEffect(() => {
    callApi().then(res => setCustomers(res));
  }, []);

  const callApi = async () => {
    try {
      const response = await fetch('/api/customer');
      const body = await response.json();
      return body;
    } catch (error) {
      console.error('Error fetching API:', error);
      return [];
    }
  };
  
  ...  생략
 
        <TableBody>
          {customers.map((curr) => (
            <Customer
              key={curr.id}
              id={curr.id}
              image={curr.image}
              name={curr.name}
              birthday={curr.birthday}
              gender={curr.gender}
              job={curr.job}
            />
          ))}
        </TableBody>

 

이렇게하면 서버에서 데이터 받기 끗

 

개발자도구에서 보면 port가 3000으로 뜨지만

proxy 설정에 의해서 실제로 데이터를 가져오는건 3001이다. 굿