d2aec382

Travel Report 프론트엔드, 백엔드 통합 개발 프로젝트

프로젝트 깃 클론 한 뒤에 할일

프로젝트에 필요한 패키지 설치

다음은 터미널에서 클론 한 후 단 한번만 실행합니다.

  1. 백엔드 패키지 설치

    npm install
  2. 프론트엔드 패키지 설치

    cd frontend
    npm install

    다시 루트 디렉토리로 이동

    cd ..

DB 초기값 설정

앱에 필요한 기본 디비 테이블 및 초기값 생성

npx ts-node migrations\create.roles.ts
npx ts-node migrations\create.admin.ts

서버 실행

  1. 프론트엔드 서버 실행

    cd frontend
    npm run dev

    다시 루트로 이동

    cd ..
  2. 백엔드 서버 실행

    npm run dev

프로젝트 구조

디렉토리 구조는 대략 다음과 같습니다.

project_directory
+---dist
|   +---index.js
|   +---app.js
+---frontend
|   +---src
|   |   +---App.tsx
|   |   +---index.html
|   |   \---index.tsx
|   +---package-lock.json
|   +---package.json
|   +---tailwind.config.js
|   +---tsconfig.json
|   +---webpack.common.js
|   +---webpack.dev.js
|   \---webpack.prod.js
+---backend
+---src
|   +---index.ts
|   +---app.ts
+---.gitignore
+---package.json
\---README.md
  • src 폴더는 백엔드 코드들이 들어갑니다.

  • frontend 폴더는 프론트엔드 코드들이 들어갑니다.

코드 포맷터 설정

VS Code 설정

VS Code에서 Ctrl + Shift + p를 눌러 기본 설정: 사용자 설정 열기를 선택하고, 설정 검색 창에 editor: format on save를 검색하여 항목을 선택 합니다. 이 기능은 파일을 저장할 때마다 파일 확장자에 따라서 자동으로 포맷을 맞추고 저장을 합니다.

Prettier 설치

VS Code 확장에서 Prettier - Code formatter를 설치합니다.

  • .prettierrc.json 파일 설정(이미 설정되어 있습니다).
  • 대부분의 파일에서 VS Code 맨 아래 상태 바에 Prettier라는 항목이 체크 표시되어 나타나야 합니다.

백엔드 데이터베이스

다음은 모두 백엔드 터미널에서 실행해야 합니다. 즉, 프로젝트 루트 디렉토리에서 실행해야 합니다.

몽고디비 설치

몽고디비 윈도우즈 설치

  • 윈도우즈 서비스로 실행하도록 설치합니다.

몽고디비 ORM(mongoose) 설치

npm install mongoose --save

백엔드 유효성 검사

npm install validator
npm i -D @types/validator

validator는 문자열을 검사하는 모듈입니다.

사용방법

import isLength from "validator/lib/isLength";
import isEmail from "validator/lib/isEmail";

export const signup = (req, res) => {
  // 생략
  if (!isLength(name, { min: 2, max: 10 })) {
    return res.status(422).send("이름은 2-10자로 입력해주세요");
  } else if (!isLength(password, { min: 6 })) {
    return res.status(422).send("비밀번호는 6자 이상으로 입력해주세요");
  } else if (!isEmail(email)) {
    return res.status(422).send("유효하지 않은 이메일입니다");
  }
  // 생략
};

백엔드 비밀번호 암호화

bcryptjs 모듈은 암호화합니다.

npm i bcryptjs
npm i -D @types/bcryptjs

사용법

import bcrypt from "bcryptjs";

const hash = await bcrypt.hash(password, 10);
const newUser = await userDb.createUser({
  email,
  password: hash,
});

백엔드 쿠기 파서

쿠키 파서를 이용해서 쿠키를 해석합니다.

npm i cookie-parser
npm i -D @types/cookie-parser

사용법

// src/app.ts
import cookieParser from "cookie-parser";

app.use(cookieParser());