9월 26일 - 웹 사이트 만들기(3) - axios 사용해서 express 서버에 데이터 요청

API 서버 준비

1. DB에 Test DB 생성

MySQL 워크벤치에 Test 테이블과 Test 테이블에 들어갈 더미 데이터를 생성하고, 확인한다. 

CREATE TABLE Test(
	id int,
    nams char(20)
);

INSERT INTO Test(id)
VALUES
	(4,"asd"),(5,"1ad"),(6,"qwe");
    
SELECT * FROM Test;

 

2. 라우팅 설정

http://localhost:4000/test URI로 요청이 왔을 때 아래와 같은 결과를 리턴하도록 설정한다. 

console.log(result)를 확인하면 아래와 같은 데이터가 보인다.

[
  RowDataPacket { id: 4, name: 'asd' },
  RowDataPacket { id: 5, name: '1ad' },
  RowDataPacket { id: 6, name: 'qwe' }
]

app.get("/test", async (req, res) => {
  connection.query(`select * FROM Test`, (error, result, fields) => {
    console.log(result);
    res.json({ testData: result });
  });
});

3. cors 에러 해결

User에서 axios를 사용해서 api요청하면 cors에러가 발생한다.

cors에러는 Origin(출처)가 다른 서버의 자원을 요청할 때 발생한다.(이곳 저곳 리소스를 사용하면 보안상의 이슈가 생길 수 있기 때문에 생긴 정책이라고 한다.)

아래 코드를 api-server에 추가하면 cors에러를 해결할 수 있다.

(다만 이런 경우 모든 요청을 받아들일 수 있으니 뭔가 나중에 문제가 생길 수도 있지 않을까 생각이 든다.)

 

cors 라이브러리 설치

npm install --save cors

npm install --save--dev @types/cors

app.use(cors());

프론트엔드 User 준비

1. Next.js 페이지를 component 기반으로 수정한다.

componentDidMount에서 데이터를 가져올 예정인데, 저번에 작성했던 코드에서는 componentDidMount를 사용할 수 없기 때문이다.

 

import React from "react";

interface IState {
  data: Array<{ id: number; name: string }>;
}

class Index extends React.Component<_, IState> {
  public constructor(props: any) {
    super(props);
    this.state = {
      data: [],
    };
  }

  render() {
    const { data } = this.state;

    return (
      <div>
        아래는 가져온 데이터
        <div>
          {data.map((d) => (
              <div>
                {d.id}: {d.name}
              </div>
            ))}
        </div>
      </div>
    );
  }
}

export default Index;

2. axios 설치,

npm install --save axios

npm install --save--dev @types/axios

 

3. api server에 요청 및 가져온 데이터 렌더링

import React from "react";
import axios from "axios";

interface IState {
  data: Array<{ id: number; name: string }>;
}

class Index extends React.Component<_, IState> {
  public constructor(props: any) {
    super(props);
    this.state = {
      data: [],
    };
  }

  public async componentDidMount() {
    const result = await axios.get("http://localhost:4000/test");
    this.setState({
      data: result.data.testData,
    });
  }

  render() {
    const { data } = this.state;

    return (
      <div>
        아래는 가져온 데이터
        <div>
          {data.length > 0 &&
            data.map((d) => (
              <div>
                {d.id}: {d.name}
              </div>
            ))}
        </div>
      </div>
    );
  }
}

export default Index;

4. 결과물이 짜잔