5. 프로젝트 세팅 (FE + BE 연결)

앞전에 fastify를 간단히 로컬에서 돌아가는 정도로만 세팅하고 도커를 세팅하려하니 빌드가 원하는대로 안되기도 하고, 문서나 정보가 너무 부실해서 그냥 express로 변경하려 함.

Express + TypeScript 설치

pnpm init
pnpm i express cors
pnpm i -D typescript @types/express @types/cors @types/node ts-node-dev

세팅

tsconfig.json

{
  "extends": "@playground/tsconfig/base.json",
  "compilerOptions": {
    "target": "ESNext",
    "module": "CommonJS",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": true,
    "moduleResolution": "Node",
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

src/index.ts

import express from 'express';
import cors from 'cors';

const app = express();
const port = 3000;

// CORS 활성화
app.use(cors());

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from Express!' });
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

package.json

 "scripts": {
    "start": "ts-node-dev --respawn --transpile-only src/index.ts",
    "build": "tsc"
  },

FE의 App.tsx

import { useEffect, useState } from 'react';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Express 서버가 http://localhost:3000에서 실행 중이라고 가정
    fetch('http://localhost:3000/api/data')
      .then((response) => response.json())
      .then((result) => setData(result.message))
      .catch((error) => console.error('Error:', error));
  }, []);

  return (
    <div>
      <h1>Data from Server</h1>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
    </div>
  );
}

export default App;

이러면 cors까지 해결되어 연동 완료.

다음으로는 둘다 동시에 run 할 수 있도록 concurrently 설치 및 root의 package.json 에 다음 스크립트 추가

pnpm i -wD concurrently 

 "scripts": {
    "maplem_front": "cd apps/maplem.gg/frontend && pnpm start",
    "maplem_back": "cd apps/maplem.gg/backend && pnpm start",
    "start": "concurrently --kill-others-on-fail \"pnpm maplem_front\" \"pnpm maplem_back\""
  },