[React & Node.js] Express

0. 서버 개발환경 구축하기

• React부분을 Client폴더를 만들어 그곳으로 옮긴다.
• package.json 과 server.js를 작성한다.
• package.json

• server.js

• npm run dev 명령어를 통해서 실행시킨다.

 

• localhost:3000 으로 들어가면 다음과 같은 화면이 뜬다.

• localhost:5000/api/hello 으로 들어가면 다음과 같은 화면이 뜬다.

• 정상적으로 작동이 됨을 알 수 있다.

---

1. REST API 구축하기

• 위와 같이 서버 개발환경을 구축했으면 이제 REST API를 구축해보겠다.
• REST API는 최근 상당수 웹서버 프레임워크에서 기본적으로 지원하는 기능으로써 서버와 클라이언트가 웹 프로토콜을 기반으로 하여 데이터를 효과적으로 주고 받을 수 있게 해준다.
• server.js를 다음과 같이 json형태로 응답할 수 있도록 구성해보면 다음과 같다.

• 결과화면은 다음과 같다.

• 위 데이터가 올바른 JSON형식인지 확인하기 위해서 JSONLint 라는 서비스를 이용해보겠다.

https://jsonlint.com/

The JSON Validator

• Valid JSON이라는 결과가 나왔으므로 올바른 데이터 형태이다.
• 이제 해볼 것은 React Client 프로그램에서 해당 api에 접속해서 데이터를 가져오는 것이다.
• 일반적으로 react에서는 비동기 통신을 이용하여 서버에 접근해서 데이터를 가져오도록 코딩한다.
• client > package.json 에서 proxy 항목을 다음과 같이 추가해준다.

• App.js를 다음과 같이 바꿔준다.
• componeneDidMount()는 컴포넌트가 실행될때 실행되는 것이고 비동기통신을 사용해 데이터를 받아온다.
• this.state.customers? 이 부분은 this.state.customers가 값이 있을 경우 : 전에 있는 것을 실행하고 값이 없을 경우 : 뒷 부분을 실행하라는 것이다.

• proxy를 통해 5000번 포트에 있는 데이터를 3000번으로 가져올 수 있다.
• 결론적으로, server에 있는 데이터를 client로 가져와서 다음과 같이 화면에 띄울 수 있게 되었다.