[001] Node.js 배우기 - 리액트와 Node.js 연동

안녕하세요~ totally 개발자입니다.

 

Node.js와 React 연동

 

오늘은 Node.js와 React를 연동하는 방법에 대해서 알아보도록 하겠습니다. Node.js를 통해서 서버를 실행하고 브라우저가 아닌 다른 환경에서도 자바스크립트를 사용할 수 있게 해줍니다. Chrome V8 Javascript 엔진으로 빌드된 런타임이라고 소개되어 있으며 이벤트 기반, 이벤트 루프, 싱글 스레드, 논 블로킹 I/O (이전 작업이 마무리되지 않아도 다음 작업 실행) 등 여러 특징을 가지고 있습니다.

 

리액트를 활용해서 Node.js와 연동해보고 서버를 실행시켜보도록 하겠습니다.

 

Step 1: 리액트와 Node.js를 설치해줍니다.

https://nodejs.org/ko/download/

다운로드 | Node.js

https://ko.reactjs.org/docs/getting-started.html

시작하기 – React

 

 

Step 2: 리액트 프로젝트를 하나 만들어주시면 됩니다. npx create-react-app 프로젝트이름 이렇게 입력하시면 됩니다.

 

 

Step 3: 터미널을 열어주시고 각각 npm install express, npm install cors, npm install nodemon, npm install http-proxy-middleware, npm install axios를 설치해줍니다. 간단하게 설명하면 아래와 같습니다.

 

express	쉽게 서버를 만들 수 있게 해주는 라이브러리 집합체
cors	Cross Origin Resource Sharing의 약자로서 포트 번호, 도메인 주소 등이 다를 때 보안 상의 이유로 api 호출을 차단하는 것이며 해결하기 위해 cors 미들웨어 사용 혹은 res.header("Access-Control-Allow-Origin", "*"); 이런 방식으로 사용해주어야 합니다.
nodemon	Node.js 기반 개발할 때, 파일에 변경사항이 생기면 자동으로 재실행할 수 있도록 도와줍니다.
http-proxy-middleware	여러 개의 프록시를 등록하는 일에 편리하게 도와줍니다.

 

 

Step 4: server.js 파일을 생성해서 만들어줍니다. App.js와 같은 경로로 해주시면 되고 경로와 이름은 달라도 무방합니다. 먼저 express 서버 변수를 선언하고 cors도 선언해줍니다. 그리고 서버를 만들어주도록 하겠습니다. 그 다음 11-13번째 줄에 /api에 요청을 해서 요청이 되었다면 hello라는 메시지를 보내보도록 합니다. 그리고 16-18번째 줄에 현재 8080 포트 번호에 서버가 잘 작동하고 있는지 여부를 알기 위해서 console.log로 메시지를 출력해보도록 하겠습니다.

 

 

 

 

Step 5: 프로젝트 폴더(App.js가 src 폴더 내에 있고 그 src 폴더 밖)에 setupProxy.js 파일을 생성하고 다음처럼 코드를 작성해줍니다.

 

 

 

Step 6: App.js에 다음처럼 수정해서 테스트 해보도록 하겠습니다. fetch 함수를 사용하여 http://localhost:8080/api에 get 요청하여 data를 출력해보도록 하겠습니다.

 

 

Step 7: 터미널에서 node server.js을 열어줍니다. (에러 나는 경우에는 경로를 확인해주셔야 합니다. cd src 해주시고 다시 시도)

 

 

Step 8: 그 다음 TERMINAL GITLENS 맨 오른쪽에 있는 + 버튼을 눌러서 새로운 터미널을 하나 더 만들어줍니다.

 

그 다음 npm run start로 리액트 앱을 실행해줍니다. 결과는 아래와 같이 나오고 Console에 message: 'hello'가 출력된 것을 확인해볼 수 있습니다. 

 

 

localhost:8080/api/ 로 접속해도 동일한 결과를 얻을 수 있습니다. 시작이 반이기 때문에 차근차근 따라해보시면 될 것 같습니다. 감사합니다.