데이터의 흐름
앞에 Server를 만들때는 현재 만들고있는 클라이언트가 없었기 때문에 테스팅을 위해 POSTMAN을 이용했다. 하지만 이제 클라이언트를 만들고 테스트를 할때는 서버가 만들어져있고 디비와 연결이 되어있기 때문에 통신을 통하여 제대로된 테스트를 진행할 수 있다.
흐름은 위의 사진처럼(마우스 그림 ...)
- Client에서 Server에게 요청을 보낸다. (Request)
2-1. Server는 해당요청에 대한 로직을 이행후 응답한다 (Response)
2-2. 만약 데이터에 관한 어떠한 수정이 일어나야 한다면 Server는 Database에게 데이터 요청을 보낸다.- Database는 Server의 요청대로 데이터를 가공한 뒤 데이터를 담아 보내거나 응답을 해준다.
- Server는 가공된 데이터를 받아 다시 Client에 넘겨준다.
자 그럼 지금부터해야될것은 Client를 구현하는것인데 이때 필요한것이 Server와 통신에 필요한 도구이다. 나는 여기서 axios라는 비동기 통신방법을 이용할 것이다.
Axios
AJAX통신의 종류로써 서버와 클라이언트간에 통신을 하기위한 모듈이다.
우선 설치는
npm install axios --save를 이용해서 받아온다.
그 다음 랜딩페이지에서 임의적인 통신 테스트를 위해서 테스트 코드를 작성해보자
모듈을 받아온다.
그리고 해당 페이지가 처음 로딩되었을때 어떠한 기능이 일어나도록useEffectHook을 사용한다.
그래서 통신을 통하여 해당 페이지에 들어오면 콘솔에 텍스트가 나오도록 작성해보자
클라이언트에서 해당 url로 요청을 보내어 텍스트를 응답받아 출력하도록 작성하였다. 여기에 맞게 서버에도 해당 로직을 추가해주자
이렇게 하고나서 서버와 클라이언트를 실행 시킨뒤 랜딩페이지로 들어간다면
위와같은 CORS에러를 볼수 있다.
이것은 다음 게시글에서 해결해보자
Web Developer