Node.js Express 서버 개발환경 및 REST API 구축하기

client파일에서 client모듈을 생성하고 프로젝트 폴더에서는 서브모듈을 실행하도록 명시하겠습니다.

즉, package.json파일을 통해서 서버와 클라이언트를 동시에 실행시키게 할 수 있도록 설정하겠다는 뜻입니다.

 

 

고객목록을 알려주는 REST API를 개발합니다.

REST API는 최근 상당 웹서버에 기본적으로 지원하는 기능으로서 서버와 클라이언트가 웹 프로토콜 기반으로 하여 효과적으로 데이터를 주고 받을 수 있도록 해줍니다.

이를 실습하기 위해서 가장먼저 기존에 서버모듈에 전체 고객 목록을 불러오는 API를 구현해 볼 필요가 있습니다.

그래서 const customers에서 정리한 json의 형식 데이터를 복사를 해둡니다.

 

 

server.js에 customers에 넣어줍니다.

 

이렇게 하면 json의 형식으로 알아서 client에게 정보를 보내준다는 특징이 있습니다.

 

 

jsonlint.com/

The JSON Validator

jsonlint 서비스에서 한번 올바른 형식의json인지 확인겸 데이터를 테스트 해보는것도 좋습니다.

 

 

정상적인 데이터형식이라고 확인 받았습니다.

 

 

 

일반적으로 리엑트는 비동기 통신을 이용해서 서버에 접근해서 데이터를 가져옵니다.

 

가장먼저 5000번 포트를 API서버로 개발목적으로 이용하기 위해서 client의 package.json의 추가적으로 명시해줄 내용이 있습니다. 바로 proxy 설정입니다.

 

우리는 이제 고객정보를 서버를 통해서 가져오는 연습을 해야합니다.

왜냐하면 고객정보는 프로그램이 동작하는 과정중에 변경될 수 있는 데이터이기 때문입니다.

일반적으로 client 프로그램에서는 웹서비스가 동작하고 나서 사용자의 요청에 따라서 그때그때마다 필요할때 서버에 접근해서 데이터를 불러 올 수 있습니다.

그렇기 때문에 고객데이터는 처음에 비어있다가 서버로부터 데이터를 받으면 그때 데이터가 재구성됩니다.

 

 

기본적으로 props는 변경될 수 없는 데이터를 명시할때 사용하구요, 

state는 컴포넌트내에서 변경될 수 있는 데이터 변수를 처리하고자 할때 사용됩니다.

실제로 API에 접근해서 데이터를 받아오는것은 componenetDidMount()로 받아오는거로 합니다.

컴포넌트가 준비가 되었으므로 api를 불러 올 수 있게 해줍니다.

그리고 접속하고자하는 api 주소를 넣어줍니다. 그리고 jason형식으로 body에 담아주는 역할을 합니다.

 

state에서 customers가 값이 비어있으므로 오류가 날겁니다.

이것을 해결하기 위해서 만약 this.state.customers가 값이 있다면 map을 통해서 값이 출력되게 하고 값이 없다면 빈 내용만 출력되게 합니다.

아무런 데이터를 받아오지 못한 상황

하지만 server.js에 가면 고객정보 데이터가 있음에도 아무런 데이터를 들고오지 못하는 상황이 생깁니다.

 

warning이 있는거 보면 로직에는 문제가 없어보입니다. 한번 network 상태를 보겠습니다.

새로고침하고 들어가면 다음과 같이 나오는데, request url을 보면 port번호가 3000번으로 되어있어서 값이 출력 되지 않는것을 볼 수 있습니다.

 

고객정보가 들어있는 port번호는 5000번 입니다.

 

 

다시 package.jason 파일로 갑니다.

chaewonkong.github.io/posts/express-with-react.html

Express 서버와 React: Proxy 활용과 빌드 및 헤로쿠(Heroku) 배포

다음은 proxy 설정하는 방법이 나오는 웹사이트입니다. 이걸보고 참고해주세요.

 

 

 

이제 프록시 설정끝나고 보면 localhost:3000에서도 데이터가 잘 출력됩니다. request url에서는 아직 localhost:3000번이라고 나오지만, proxy에 의해서 데이터는 port5000번에서 들고오게 되는겁니다.