소개

프런트 엔드가 React (Material UI), 백엔드가 Node.js express의 앱을 빌드했기 때문에 (무슨 달인지 모르겠지만) 비망록에 절차를 남깁니다.

환경

Windows 10

Node.js v12.16.3

npm 6.14.4

yarn 1.22.4

절차

디렉토리 작성

# アプリのコードを管理するディレクトリを作成
mkdir app
cd app
# クライアント、サーバーのコードを配置するディレクトリを作成
mkdir client server

프런트 엔드: React, Material UI 도입

cd client
npx create-react-app my-app   ※my-app=アプリ名 ※npxはnpm 5.2 から利用できるパッケージランナーツール
cd my-app
yarn add @material-ui/core --save
# アプリ内でアイコンを使用したい場合はこれもインストールする。回線が遅いとインストール時にタイムアウトが発生する可能性があるため、タイムアウトの時間を長めに設定しておく。
yarn add @material-ui/icons --save  --network-timeout 1000000000

※동작 확인은 나중에 실시

백엔드: express 도입

cd ../..
cd server
npm init (対話式で色々と入力するものがある。こだわりなければ全てEnterでよい。）
npm install express --save
type nul > server.js (macではtouch server.js かな？ 単にsever.jsというファイルを作成しているだけ。)

server.js를 텍스트 편집기에서 열고 아래 코드를 복사합니다.

server.js

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());
// Reactのアプリ名によってはディレクトリ名を一部変更する
app.use(express.static(path.join(__dirname, '../client/my-app/build')));

app.listen((process.env.PORT || 8000), () => {
  console.log(`Listening on port ${PORT}`);
});

동작 확인

프런트 엔드

개발 서버 시작

cd client/my-app
yarn start

http://localhost:3000 에 접속해 이러한 화면이 표시되면 성공입니다.

yarn start 실행 중에 App.js 등을 변경하여 저장하면 자동으로 컴파일하고 페이지도 자동으로 다시로드됩니다.

프런트의 개발중은 yarn start 그리고 개발용 서버를 기동시키면서, 백엔드의 express의 서버도 기동시켜 REST API의 호출을 하는 것이 좋다고 생각합니다.

빌드

코드를 빌드하고 정적 파일(html, js 파일 등)을 출력합니다.

yarn build

기본적으로 app/client/my-app/build 에 빌드된 파일이 출력됩니다.
이 폴더를 express의 static 폴더로 설정해 두면 http://localhost:8000 로 표시할 수 있습니다.

백엔드

서버 시작

cd server
node server.js

http://localhost:8000 로 이동하여 http://localhost:3000 과 비슷한 화면이 나타나면 성공합니다.

덤

Material UI의 Button component Icon component를 조합한 예입니다.


Material UI의 Icon 참조: htps : // 마테리아 l. 이오/레소 r세s/이콘 s/? 이콘 = 치 CK_시 rc ぇ_ 오 t ぃ 네 & 스타 ぇ = 바세 네

App.js

import React from 'react';
import './App.css';

import { Button } from '@material-ui/core';
import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';

function App() {
  return (
    <div className="App">
      <Button  variant="contained" color="primary">
        <CheckCircleOutlineIcon />
        please click!
      </Button>
    </div>
  );
}

export default App;

App.css

.App {
  padding-top: 100px;
  text-align: center;
}

참고 사이트

새로운 React 앱 만들기

Material UI 공식