[Development Log] React + NestJS 연동하는 방법(with. TypeScript)

난 또다시 개인 프로젝트를 만들어 보려고 한다.

개인 프로젝트를 만든 지 1년 반? 이 되었는데 새로운 아이디어로, 새로운 프레임워크 + 언어로 시작해 보자!

실무에서 백엔드 개발자로 api만 만들어왔었고 프론트, 백 프로젝트가 분리되어 있어서 사실 프론트 코드를 접하기도 어려웠다. 그래서 처음부터 영상과 모든 검색을 총 동원해서 만들어보려고 한다. 사실 걱정 한가득인데 내가 쓸 거를 생각하니까 설레기도 하면서 막막하면서도 얼른 완성하고 싶으면서도 한숨부터 나오지만 시작해 보자! (서론이 너무 길었다..😅)

 

1. 프로젝트 구조

사실 이것부터 어려웠다.. 하나의 프로젝트 안에 NestJS 프레임워크만 설치해서 사용했었는데 프론트 코드는 어디에 배치를 해야 되지?라는 의문점부터 시작해서 모든 구글링과 영상을 참고하면서 답을 찾았다.

예를 들어 projectA 프로젝트 하위 폴더로 server, client를 만들었고 server에는 nestJS 설치, client에는 React를 설치했다.

 

 

프론트와 백을 프로젝트로 분리하지 않은 이유는 그렇게 큰 사이트를 만들 것도 아니었고 사실.. 제일 큰 이유는 하나의 프로젝트 안에서 관리하기를 원했고 내 두 눈으로 바로바로 확인할 수 있게끔 만들고 싶었다..😅

 

2. NestJS 설치 시작(server 파일)

1. 일단, 친숙한 nestJS 먼저 시작하자! 그러면 터미널에서 내 경로는 프로젝트에 들어와 있어야 한다. (ex. PS C:\myProject\projectA) 그다음에 아래 명령어를 터미널에 입력해서 실행한다.

 

npm i -g @nestjs/cli

 

2. server 폴더를 아래 명령어로 만들어준다. npm, yarn 선택하라고 나오는데 npm에 그대로 두고 엔터 치면 설치가 계속된다. (이때 server 폴더 안에 nestJS 관련 파일들이 생성이 된다.)

 

nest new server

 

3. 그다음에 프론트 포트가 기본 3000이기 때문에 백 포트를 원하는 포트로 변경을 먼저 해줘야 한다. 난 3095로!

포트 변경을 위해 node에서 사용하는 dotenv와 같은 개념인 config를 터미널로 먼저 설치해줘야 한다.

 

npm i --save @nestjs/config

 

그다음에 .env 파일에 원하는 포트를 입력하고 main.ts와 app.module.ts 파일을 아래와 동일하게 수정해줘야 한다.

 

📌 main. ts 파일

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  const port = process.env.PORT;

  await app.listen(port);
  console.log(`listening on port ${port}`);
}
bootstrap();

 

📌 .env 파일

PORT=3095

 

📌 app.module.ts 파일

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ConfigModule } from '@nestjs/config';

@Module({
  imports: [ConfigModule.forRoot()],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

 

여기까지 하고 터미널에 npm run start:dev로 실행시키고 http://localhost:{지정한 포트}로 열리는지 확인! 

 

연결 성공.jpg

 

4. 이제 마지막으로 typeorm 설치까지 마무리해야 한다. 우선 typeorm을 터미널로 설치해 주고 app.module.ts 파일과 .env 파일만 설정해 주면 된다.

 

npm i --save @nestjs/typeorm typeorm mysql2

 

📌 app.module.ts

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ConfigModule } from '@nestjs/config';
import { TypeOrmModule } from '@nestjs/typeorm';

@Module({
  imports: [
    ConfigModule.forRoot(),
    TypeOrmModule.forRoot({
      type: 'mysql',
      host: 'localhost',
      port: 3306,
      username: process.env.DB_USERNAME,
      password: process.env.DB_PASSWORD,
      database: process.env.DB_DATABASE,
      entities: [],
      synchronize: true, // 개발환경(DB 만들고 false로 변경하기)
      logging: true,
      keepConnectionAlive: true,
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

 

📌 .env(DB_USERNAME, DB_PASSWORD, DB_DATABASE 본인 거에 맞게 작성)

PORT=3095
DB_USERNAME=
DB_PASSWORD=
DB_DATABASE=

 

여기까지 하면 일단 서버 관련된 설치 작업은 마무리가 된 것 같고, 추후 작업 진행하면서 추가하면 될 것 같다!

 

3. React 설치 시작(client 파일)

1. 이제 터미널에서 내 경로는 프로젝트에 들어와 있어야 한다. (ex. PS C:\myProject\projectA\client) 그다음에 아래 명령어를 터미널에서 실행하면 된다.

 

npx create-react-app .

 

2. React에 TypeScript를 사용하기 위해 터미널에 아래 명령어도 같이 실행해서 설치해야 한다. 그다음에 tsconfig.json 파일을 생성하고 App.tsx, index.tsx 파일을 전부 수정한다.(이때 맨 처음 설치했을 경우 App.js, index.js 파일명으로 되어있을 것이다. 난 Typescript를 사용하기 위해 tsx로 파일명을 전부 수정했다.)

 

npm i @types/node @types/react @types/react-dom @types/jest

 

📌 tsconfig.json

{
	"compilerOptions": {
		"target": "ES5",
		"module": "CommonJS", // 어디서든 잘 동작하기 위함
		"strict": true,
		"allowJs": true,
		"esModuleInterop": true,
		"jsx": "react-jsx"
	},
	"include": ["src"]
}

 

📌 App.tsx

import "./App.css";

function App() {
	return <div className="App"></div>;
}

export default App;

 

📌 index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(
	document.getElementById("root") as HTMLElement
);
root.render(
	<React.StrictMode>
		<App />
	</React.StrictMode>
);

 

여기까지 하고 터미널에 npm run start 입력해서 웹사이트와 터미널이 아래 이미지와 동일하게 나오는지 확인!

 

연결 성공.jpg

 

4. Proxy 설정

Proxy 설정을 하지 않고 client의 3000번 포트에서 server의 3095 포트로 요청을 보내면 cors 정책에 의한 아래 오류가 발생할 것이다. 더 쉽게 말하자면, aaa.com 도메인에서 bbb.com 도메인으로 무언갈 보내려고 한다면 보안적으로 막아놔야 안전하기 때문에 설정 없이는 허용하지 않기 때문이다. (네이버에서 지메일로 요청을 보낸다고 생각하면 더 쉽다.)

 

cors오류.jpg

 

여기서 cors를 해결하기 위해 찾은 방법은 2가지였고 client에서 proxy 설정 또는 server에서 cors 설정하는 것이었다. 

혼자 판단하기는 어려워서 인프런 제로초님께 여쭤봤고 아래 답변을 받고 client의 proxy 설정으로 결정하게 되었다!

"보통 cors를 localhost를 허용하지는 않으므로 프론트에서는 proxy를 쓰는 게 좋긴 합니다."

 

사실 처음에 cors 에러가 나서 당황한 나머지 이것저것 다 설치하고 적용해 볼 때 cors 설정도 해봤는데 어렵지 않아서 추가적으로 내용에 정리해 둘 예정이다! 만약 client에서 proxy 설정이 아닌 server에서 cors 설정을 할 사람이 있다면 참고해도 좋을 것 같다.

 

1. 우선 터미널에서 아래 명령어를 입력하여 미들웨어를 설치해준다. 현재 폴더의 경로는 client에 들어와 있어야 한다.

(ex. PS C:\myProject\projectA\client)

 

npm i http-proxy-middleware --save

 

2. client > src > setupProxy.js 파일 생성하고 아래 코드를 작성해야한다. (여기서 ts로 파일을 만들지 않은 이유는 다음 게시글에서 작성할 예정이다.)

 

📌 setupProxy.js

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
	app.use(
		createProxyMiddleware("/api", {
			target: "http://localhost:3095",
			changeOrigin: true,
		})
	);
};

 

여기까지하면 React와 NestJS 연동 완료다! 아래 이미지는 항상 검색할 때 폴더 구조를 정말 보고 싶었지만 거의 없었기 때문에 혹시라도 나 같은 사람을 위해 폴더구조 참고용 이미지다.

 

완성된폴더구조.jpg

 

처음 cors 오류가 발생했을 때 부터 아무거나 막 적용해 봐서 해결되었지만,

왜 해결되었는지를 찾을 수 없어서 다시 처음부터 적용해 보고 어떤 걸 적용해야 하는지와 안 되는 부분은 왜 안되는지까지 찾아볼 수 있었다. 진짜 부딪혀야 많이 찾아보고 해결되었을 때 내적 외침으로 재미를 느끼는 것 같다.

이제 제에발 다음 단계인 React로 화면 좀 만들어 보자..😅

 

 

+ setupProxy 파일을 ts 파일로 만들지 않은 이유는?

https://dego.tistory.com/17

[Development Log] TypeScript에서 http-proxy-middleware 사용법

 

+ Proxy 참고 사이트

https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

Proxying API Requests in Development | Create React App

https://www.npmjs.com/package/http-proxy-middleware

http-proxy-middleware