Vite, React, TypeScript 프로젝트에 MongoDB연동 및 서버 구축하기

🔗 설치

npm install express
npm install mongodb
npm install cors
npm install dotenv
npm install axios

🔗 MongoDB 연동

mongoDB Cluster생성 이후 VSCode extention에서 MongoDB를 설치하면 빠른 연동이 가능하다.

설치하면 오른쪽에 몽고DB툴이 생성되는데 여기서 cluster URL로 connection을 하면 database를 확인 할 수 있다.

🔗 서버구축

Express로 백엔드 서버를 구성하고 미들웨어로 CORS를 사용했다. 데이터베이스 URL은 보안상 공개되면 안되기때문에 .env파일을 생성하여 .gitignore에 추가해야 한다.

// /server/index.js
import express from 'express'
import dotenv from 'dotenv'
import cors from 'cors'

dotenv.config()

const app = express()

app.use(cors())
app.use(express.json())

const PORT = process.env.PORT || 3000
const MONGOURL = process.env.MONGO_URL

// .env
PORT = 포트번호
MONGO_URL = 'mongodb+srv://***URL***'

mongoDB연동을 위해 MongoClient.connect()를 통해 연결한다. 현재 데이터베이스엔 Cluster생성 할 때 샘플데이터를 넣어주었기때문에 만들어진 샘플데이터의 users correction을 가져오는걸로 시도했다.

import express from 'express'
import dotenv from 'dotenv'
import cors from 'cors'
import { MongoClient } from 'mongodb'

dotenv.config()

const app = express()

app.use(cors())
app.use(express.json())

const PORT = process.env.PORT || 3000
const MONGOURL = process.env.MONGO_URL

const sampleDBName = 'sample_mflix'
let database

async function connectToDB() {
	try {
		const client = await MongoClient.connect(MONGOURL)
		database = client.db(sampleDBName)
		app.listen(PORT, () => console.log(`MongoDB listening on ${PORT}`))
	} catch (error) {
		res.status(500).send(error)
	}
}
connectToDB()

app.get('/api/users', async (req, res) => {
	try {
		const users = await database.collection('users').find({}).toArray()
		res.send(users)
	} catch (error) {
		res.status(500).send(error)
	}
})

추가로 package.json에 server scripts를 추가하고 vite.config.ts에 프록시 설정을 추가하면 된다.

// package.json
"scripts": {
    "dev": "vite",
	"server": "node server/index.js",
    .
    .
 }

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [react()],
	server: {
		proxy: {
			'/api': {
				target: 'http://localhost:포트번호',
				changeOrigin: true,
				secure: false,
			},
		},
	},
	resolve: {
		alias: [{ find: '@', replacement: '/src' }],
	},
})

👉🏻 npm run server

정상적으로 가져와졌다 ! 👍

🔗 클라이언트 요청

클라이언트 쪽에서도 잘 가져와지는지 확인하기위해 /src/index.tsx에서 요청을 보내봤다. 샘플데이터가 생각보다 많아서 users correction에서 name만 가져오도록했다.

import { useState, useEffect } from 'react'
import axios from 'axios'

function App() {
	const [userName, setUserName] = useState(null)

	useEffect(() => {
		const fetchUserData = async () => {
			const res = await axios.get('/api/users')
			const fetchUserNames = res.data.map((item: { name: string }) => item.name)
			setUserName(fetchUserNames)
		}
		fetchUserData()
	}, [])

	return (
		<>
			<p>{userName}</p>
		</>
	)
}

export default App

정상!👍