TSL : 2020-03-15

요약

오늘은 react 랑 express를 연동하는 법을 배웠다.

두 개의 로컬 호스트를 돌려서 express로부터 데이터를 받아오는 법까지는 알아냈는데, 라우팅을 어떻게 하는건지... express로 해결하려고 한참을 헤맸다. 결국은 react-router-dom을 써야 한다는 것을 알아냈다...

react와 express를 연동하는 방법은 아래와 같다.

P.S. 아래 설명은 기본적으로 react와 express 각각의 사용법을 아는 사람에게 적합하다.

P.S. 또한 아래 설명에 나오는 예시들은 https://dev.to/nburgess/creating-a-react-app-with-react-router-and-an-express-backend-33l3 의 예시를 변형한 것이다. 링크의 자료는 영어로 되어있는데, 나만의 방식으로 한글화 한 것이라고 할 수 있다.(즉, 완전히 똑같지는 않다. 참고할 것.)

react + express

• create-react-app이 있다면 다음 단계로, 없다면 npm install create-react-app -g로 설치해준다. node.js가 설치되어 있지 않다면 node.js 설치와 기본 사용법을 익히고 다시 돌아올 것을 추천한다.

• create-react-app <만들고 싶은 프로젝트 폴더명>을 터미널에 입력하여 조금 기다리면 설치 과정이 끝난다. ls를 입력하면 우리가 설정했던 이름으로 폴더가 만들어져 있을 것이다.

• cd <프로젝트 폴더명>로 들어가서, npm start를 입력해보자. 기본으로 설정된 인터넷 브라우저 페이지가 자동으로 열리며 react 로고와 곤색 바탕이 뜬다면 react app이 잘 작동하는 것이다!

• 이제 server를 만들 차례이다. server를 react app 바깥에 만들어야 할지, 아니면 안에 만들지 고민을 많이 했는데 그냥 안에 만들어 보았다.

• 프로젝트 폴더 안에 server라는 폴더를 만들자. 그리고 cd server

• npm init을 한다. 그러면 package.json파일이 만들어진다.

• npm install express로 express를 설치한다.

• 아직 server 폴더 안이다. 여기서 app.js파일을 만들어준다. 파일 내용은 아래와 같다.

  //<프로젝트 폴더명>/server/app.js
  var express = require('express');
  
  var app = express();
  
  var indexRouter = require('./routes/index');
  
  app.use('/hello', indexRouter);
  
  app.listen(9000, () => console.log("running server on 9000"));

• server 폴더 안에 "routes"라는 폴더를 만들어준다.

• routes 폴더 안에 index.js라는 파일을 만들과 다음과 같이 적어준다.

  //<프로젝트 폴더명>/server/routes/index.js
  var express = require('express');
  var router = express.Router();
  
  router.get('/', (req, res, next) => {
      let info = {
          name: "swimmingkiim",
          job: "student",
          skills: ["html", "css", "javascript", "node.js", "react"]
      };
      res.json(info);
  });
  
  module.exports = router;

• 위 두 파일을 간략히 설명하자면, http://localhost:9000/hello로 들어가면 info라는 객체가 넘겨지는 것을 말한다. 이제 react에서 그걸 fetch로 받아와 사용하면 된다.

• "그럼 routing은... 어디서 하는거지? express? react?"라는 질문이 들어 한참을 구글링했다. 결국 나는 "express는 db의 정보를 받아서 주소마다 필요한 정보를 넘겨주는 역할을 하는 것" 이라고 이해하게 되었다. 찾아보니 react-router-dom도 routing의 역할을 한다. 결론은 routing을 반반씩 담당한다는 것? 그냥 그 선에서 납득하기로 하였다.

• react app에서 차례대로 index.js, App.js를 수정해준다.

  //<프로젝트 폴더명>/index.js
  import React from 'react';
  import ReactDOM from 'react-dom';
  import { BrowserRouter } from 'react-router-dom';
  import App from './App';
  import * as serviceWorker from './serviceWorker';
  
  ReactDOM.render((
      <BrowserRouter>
          <App />
      </BrowserRouter>        
  ), document.getElementById('root'));
  
  serviceWorker.unregister();

  //<프로젝트 폴더명>/App.js
  import React, { useState, useEffect } from 'react';
  import { Route, Switch } from 'react-router-dom';
  import Home from './pages/Home';
  import List from './pages/List';
  import './App.css';
  
  const App = () => {
    return (
      <div>
        <header>
          <h1>what api send us is : </h1>
        </header>
        <Switch>
          <Route exact path='/' component={Home} />
          <Route path='/list' component={List} />
        </Switch>
      </div>
    );
  }
  
  export default App;

• 코드에 보이는 것처럼 홈 화면에서 /list로 routing하기 위해 /pages/Home 과 /pages/List를 만들어주어야 한다. List에서는 localhost:9000/hello에서 보낸 info를 받아와 화면에 표시하는 것까지 해볼 것이다.

• src폴더 아래에 pages라는 폴더를 만들어주고 거기에 Home.js와 List.js를 만들어 준다. 내용은 아래와 같다.

  //<프로젝트 폴더명>/src/pages/Home.js
  import React from 'react';
  import { Link } from 'react-router-dom';
  
  const Home = () => {
      return (
          <div className="App">
              <h1>this is home</h1>
              <Link to={'./list'}>
                  <button>
                      My List
                  </button>
              </Link>
          </div>
      );
  }
  
  export default Home;

  import React, { useState, useEffect } from "react";
  
  const List = () => {
      const [info, setInfo] = useState({});
  
      const getList = () => {
          fetch('/hello')
          .then(res => res.json())
          .then(result => setInfo(result))
      }
  
      useEffect(() => {
          getList();
      }, []);
  
      return (
          <div className="App">
              <h1>this is info from api</h1>
          	<p>name : {info.name}</p>
  			<p>job : {info.job}</p>
  			<p>skills : </p>
              {info.skills ? (
                  <div>
                      {info.skills.map((item) => {
                          return (
                              <div>
                                  {item}
                              </div>
                          );
                      })}
                  </div>
              ) : (
                  <div>
                      <h2>NO skills Found</h2>
                  </div>
              )}
          </div>
      );
  }
  
  export default List;

• 이렇게 하면 기본 세팅은 끝난 것이다. 이제 server랑 react app을 동시에 돌려주기만 하면 된다.

• 프로젝트 폴더 안에서 npm install npm-run-all으로 설치해주자. npm-run-all은 간단히 말해서 여러개의 npm run 명령어를 동시에 처리해주는 것이다.

• 이제 프로젝트 폴더 안의 package.json으로 가서 script부분에 명령어를 아래와 같이 추가해주자.

  "scripts": {
      "start": "react-scripts start",
      "server": "nodemon ./server/app.js",  // 추가된 부분
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject",
      "gogosing": "npm-run-all --parallel start server"  // 추가된 부분
    },

• 아차차, 이렇게 하려면 nodemon도 설치되어 있어야 한다. nodemon이 없다면 -g 옵션으로 설치하길 바란다.

• 수정된 파일들을 다 저장했다면, 터미널에서 프로젝트 폴더로 들어가고, 거기서 npm run gogosing을 실행해보자.

• what api send us is : this is home 과 my list라는 버튼이 나오면 버튼을 눌러보자. 주소가 /list로 바뀌며 express에서 보냈던 정보 객체가 잘 나온다면 성공이다.