[ 마이블로그 ] node.js 서버 세팅!

[ 마이블로그] node.js로 서버 구축 with express

[ 마이블로그] node.js로 서버 구축 with express

 

지난 글에서 express 라이브러리를 사용하여 node.js로 서버를 구동하는 것까지 성공!

이번 글에서는 client(프론트엔드)에서 express로 구축한 서버를 사용하기 위한 세팅을 해보도록 하겠다.

일단, 나의 프로젝트 폴더 구조는 다음과 같다.

root 폴더 밑에 client라는 폴더를 만들어서 create-react-app 명령어를 사용하여 react로 돌아가는 프론트를 만들었다.

root 폴더 바로 밑에는 따로 server.js라는 파일을 만들어서 백엔드 서버 관련 내용을 적어두었다.

root 폴더 위치에서 'node server.js' 명령어를 입력하면 백쪽 서버가 켜진다!

프론트에서 백쪽 서버에 접속할 때 프론트의 package.json 파일에 프록시 설정을 해주어야 한다.

프론트 쪽 package.json 파일에
사진과 같이 적어주도록 한다.

아마 "browserslist": [] 항목이 있을 것이다.
그 밑에 적어주면 된다!

 

 

 

그러고 나서 src 폴더 밑에 components 폴더를 만들어준 후 test.js 파일을 만들어서 작성해 본다.

import React from 'react';

class Test extends React.Component {
  render() {
    return(
      <div>
      <h2>hello</h2>
    </div>
  )
  }
}
export default Test;

 

이제 App.js 에 Test 컴포넌트를 추가해 본다!

import logo from './logo.svg';
import Test from './components/test';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <Test /> <!-- 여기에 Test 컴포넌트 추가! -->
      </header>
    </div>
  );
}

export default App;

 

 

이제 cmd 창에 서버를 실행시키고 잘 출력되는지 확인해 보기!

root 폴더 바로 밑의 package.json 파일에 서버 세팅을 해준다.

잠시 후에 cmd 창에다 yarn dev라는 명령어를 치면 'concurrently --kill-others-on-fail ~~~~' 내용이 실행된다!

 

cmd로 창이 실행되고 나서 localhost:3000에 접속하면 다음과 같이 hello 출력 완료!!!