[NodeJS][Express] 로컬호스트 서버를 만들어 서버 - 클라이언트 통신하기 간단 예제(+ 필요모듈 설치)

안녕하세요.

 

지난 글에서는 ReactJS를 사용하여 View를 만들고, 포트를 열어 웹에 띄워보는 것까지 진행했습니다.

 

 

그래서 터미널에서 npm start 명령어로 클라이언트 브라우저(로컬호스트 서버 및 포트) 를 출력할 수 있었죠.

 

 

이번 글은

 

뷰가 아닌 서버를 만들어 서버를 열고, 서버 <-> 뷰 통신하는 것 까지 진행하는 단계를 설명드리겠습니다.

 

참고로, 서버는 NodeJS 방식으로 사용할 것입니다!

 

 

이전 글을 한 번 보고 올래요!

 

 

 

 

 

서버 통신에 필요한 모듈 설치하기

---

  -  기본적으로 import 할 모듈은 크게 3 가지가 있습니다.

  

  -  express, body-parser, cors

 

  -  하나하나 설치하면서 이 모듈이 어떤 역할을 하는지 간단하게 짚고 넘어가겠습니다.

 

 

 

express 

  -  NodeJS의 웹 어플리케이션 프레임워크

  

  -  웹 서버에 필요한 환경을 구축해줍니다.

 

 

설치 방법

$ npm install express --save

// yarn 사용 시
$ yarn add express

 

다음,

 

 

body-parser

  -  POST 송수신 시 body 내 request data 를 json 형식으로 읽을 수 있는 express 미들웨어.

 

  -  req.body 를 사용하여 form 또는 ajax의 값을 json으로 읽을 수 있습니다. 

 

  -  이를 사용하지 않으면 undefined를 얻으며, 송수신 과정에서 불편함이 생깁니다.

 

 

설치 방법

$ npm install body-parser --save

 

 

다음,

 

 

 

CORS

  -  그다지 추천하는 방법은 아니지만, 테스트 시에 활용하기는 편해서 사용합니다.

 

  -  cors 설정 없이 서버 테스트를 진행한다면, Access-Control-Allow-Origin 오류가 발생합니다.

 

  -  이는 간단하게 말씀드리면, 도메인(포트 포함)이 다른 곳에서 요청이 와서 이를 허용하지 않는다고 서버에서 기본적으로 설정했기 때문에, 발생하는 오류입니다.

 

  -  서버와 뷰의 포트는 다르니까요!

 

 

설치 방법

$ npm install cors --save

// yarn 이 존재한다면
$ yarn add cors

 

기본적인 라이브러리는 설치했습니다.

 

 

 

서버 파일 생성 및 코드 작성

---

간단합니다.

 

프로젝트 폴더 루트 경로에서 servers 폴더를 만든 후, server.js 파일을 생성합니다.

 

 

다음으로, 아래 소스코드를 넣으세요.

 

const express = require('express');  // express 프레임워크 import
const app = express(); // express를 통해 서버 환경 구축
const cors = require('cors');  // cors 라이브러리 import
const bodyParser = require('body-parser');  // body-parser 라이브러리 import
const port = process.env.PORT || 3001; // 3001 포트 사용
// const hostName = '자기 자신의 IP주소'

// express 서버 환경 설정
app.use(cors()); // cors 사용
app.use(bodyParser.json()); // body-parser 사용

// localhost:3001/test URL 입력 시 해당 함수 호출
app.use('/test', (req, res) => {
    res.json({carName : '해롱이'});
})

// express 서버 열기
app.listen(port, () => { // port, hostName, () 으로 인자를 하나 추가하여 직접 호스트명 선언 가능
    console.log(`express is running on ${port}`);
})

 

 

그러고 나서 서버를 열기 위해 해당 파일을 실행해봅시다.

*** 터미널의 현재 경로는 프로젝트 폴더 루트 경로에 있어야 합니다.

$ npm ./servers/server.js

 

 

그 결과,

 

express is running on 3001 

 

콘솔에 위와 같이 찍히며, localhost:3001/test 입력 시 아래와 같은 결과가 나옵니다!

 

 

 

respond(응답) 결과로 얻은 json 객체.

 

 

 

서버를 생성하고

서버를 열고

서버 내 API를 생성하여(URL)

API 호출(URL에 접근해 요청) 및 호출 결과를 얻는 것 까지 했습니다.

 

이제 마지막 단계로, 이 결과를 ReactJS 의 View에서 받아 출력해보겠습니다!

 

 

 

ReactJS 에서 API 호출 결과를 받아 View에 활용하기

---

import React, { Fragment } from 'react'; // JSX 를 사용하기 위해 반드시 import 해야 함
import './App.css';

class ApiTest extends React.Component {

    state = {
        carName : null,
        car : 'K3'
    };

    // fetch API를 사용해 네트워크 통신(API 응답 결과 얻음)  
    componentDidMount() {
        fetch('/test')  // URL 입력.
        .then(res => res.json())
        .then(data => { // URL respond 결과를 가지고 있는 Object.
            alert(`test api 호출 : ${data.carName}`);
            this.setState({
                carName : data.carName
            });
        });
    }
    
    render() {
        return (
            <Fragment>
                <div style={style}> 
                내 차의 종류는 {this.state.car ? this.state.car : '차없옹!'} 이야. 가자구!! 부릉부릉~ <br/>
                내 애마의 이름은? {this.state.carName ? this.state.carName : '이름따윈...'} !!
                </div>
            </Fragment>
        )
    }
}

const style = {
    backgroundColor: 'black',
    height: '150px',
    padding: '16px',
    color: 'white',
    fontSize: '20px',
  };

export default ApiTest;

  -  자세한 부분은 주석 참고해주세요!

  -  fetch API를 사용하여 네트워크 통신을 합니다.

*** componentDidMount() 함수가 뭔가요 ?

 

 

 

해당 컴포넌트를 App.js 에서 import 하여 사용한 결과는?

*** App.js 에서 컴포넌트를 어떻게 가져와 사용했었죠 ?

 

 

 

먼저, alert 가 호출되며, 내부 내용은 /test API 의 결과 json인 "해롱이" 가 정상적으로 호출되었습니다.

 

밑에 검은 색 부분에서는 아직 API 호출 전에 렌더링이 되었기 때문에, "해롱이"의 결과를 얻지 못했고, 그 결과로 "이름따윈... !!" 을 출력합니다.

*** 흰색 부분은 이전에 테스트했던 것이어서 무시하셔도 됩니다.

 

 

 

다음으로, alert에서 "확인" 을 누른다면?

 

 

 

 

  이렇게 "해롱이 !!" 로 바뀌었습니다!!!

 

 

 

 

 

서버 생성 및 호출, 서버[NodeJS] - 클라이언트[ReactJS] 통신 까지 진행했습니다.

 

궁금한 점이나 틀린 부분은 댓글 부탁드립니다.

 

 

감사합니다!