마드리드> MERN Stack 설정 (ft.서수완)

Frontend
• Redux + TypeScript template
npx create-react-app my-app --template redux-typescript
※ 참고: Redux Toolkit

Backend
• 회원가입& 로그인 만들기도 같이 진행.  
• backend도 yarn으로 실행!!
yarn add @types/express @types/node nodemon ts-node typescript --dev
yarn add express

몽고DB 설치하기 는 여기 참조
• mongoose 설치
npm i express mongoose morgan nodemon


프로젝트 구조.

---------------------------------------------------------------------------------------------------------
.env

MONGODB_URI = "mongodb://127.0.0.1:27017/mongodb"


MONGODB=jllgshllWEUJHGHYJkjsfjds90
JWT_KEY=secret

---------------------------------------------------------------------------------------------------------
nodemon.json 

{
    "watch": [
      "src",
      ".env"
    ],
    "ext": "js,ts,json",
    "ignore": [
      "src/**/*.spec.ts"
    ],
    "exec": "ts-node  --transpile-only ./src/server.ts"
}

---------------------------------------------------------------------------------------------------------
Package.json

{
  "name": "ts-express",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@types/express": "^4.17.13",
    "@types/node": "^16.11.7",
    "nodemon": "^2.0.15",
    "ts-node": "^10.4.0",
    "typescript": "^4.4.4"
  },
  "dependencies": {
    "body-parser": "^1.19.0",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "express-validator": "^6.13.0",
    "http": "0.0.1-security",
    "jsonwebtoken": "^8.5.1",
    "jwt": "^0.2.0",
    "mongoose": "^6.0.13",
    "morgan": "^1.10.0",
    "validator": "^13.7.0"
  },
  "scripts": {
    "prestart": "tsc",
    "start": "nodemon --exec ts-node dist/www.js"
  },
  "keywords": [],
  "author": "",
  "description": ""
}

---------------------------------------------------------------------------------------------------------
tsconfig.json


{
    "compilerOptions": {
      "target": "ES6",
      "module": "CommonJS",
      "outDir": "./dist",
      "esModuleInterop": true
    },
    "include": [
        "src/**/*.js",
        "src/**/*.ts",
        "src/**/*.tsx"
      ],
      "exclude": ["node_modules", "**/*.spec.ts"]
  }

---------------------------------------------------------------------------------------------------------
server.ts

import UserRouter from "./api/route/UserRouter";
import connectDB from "./Loaders/db";

connectDB();

const express = require("express");
const cors = require("cors");
const app = express();

app.use(cors()); // CORS 미들웨어 등록
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.use(UserRouter); //라우터
app.set("port", 3001);
app
  .listen(app.get("port"), () => {
    console.log(`${app.get("port")} server is Running`);
  })
  .on("error", (err) => {
    console.log(`Error message ${err}`);
  });

---------------------------------------------------------------------------------------------------------

Loaders 
db.ts

Mongoose 버전확인 === npm list mongoose 

mongoose버전이 6.0이상이라면 mongoose는 항상

useNewUrlParser: true,

useUnifiedTopology: true,

useCreateIndex: true,

useFindAndModify: false, 로 기억하고 실행하기 때문에 더이상 지원하지 않는다는 이야기이다.
그래서 그냥 코드 지우면 됩니당

이렇게!
import mongoose from "mongoose";
import config from "../config"; 
const connectDB = async () => {
  try {
    await mongoose.connect(config.mongoURI);
    console.log("Mongoose Connected ...");
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }
};
export default connectDB;

---------------------------------------------------------------------------------------------------------
그 외에 이슈는 없음.

나머지 회원가입 로그인 코드는.. https://iot624.tistory.com/159?category=1001197 참고….