96d0a352

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

주의 사항

  1. 새로운 패키지를 설치하기 전에 반드시 상의 하세요.

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

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

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

  1. 백엔드 패키지 설치

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

    cd frontend
    npm install

    다시 루트 디렉토리로 이동

    cd ..

서버 실행

  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 폴더는 프론트엔드 코드들이 들어갑니다.

프론트엔드 프로젝트 구조

  • 되도록이면 기능별로 디렉토리를 만들어 사용합니다. 예를 들면 홈 화면과 관련된 기능들은 home 디렉토리에 위치 시킵니다.

  • 그리고 모든 디렉토리에는 index.tsx를 만들어 이것을 통해 그 디렉토리에 있는 컴포넌트들을 외부로 export 시킵니다. 절대로 개별적으로 컴포넌트들을 export 하지 않도록 합니다.

  • 어떤 디렉토리에 위치시킬지 결정할 수 없을 때는 우선은 src/commons 디렉토리에 우선 만들고 나중에 의견을 수렴하여 이동하도록 합니다.

다음은 예제 폴더 구조입니다.

project_directory
+---dist
|   +---index.js
|   +---app.js
+---frontend
|   +---src
|   |   +---auth
|   |   |   +---index.tsx
|   |   |   +---Login.tsx
|   |   |   +---SignUp.tsx
|   |   +---home
|   |   |   +---index.tsx
|   |   |   +---Home.tsx
|   |   +---index.html
|   |   +---index.tsx
|   |   +---App.tsx
|   |   \---SurveyRouter.tsx
  • src/index.tsx가 프로그램 실행 진입점입니다.
  • src/SurveyRouter.tsx는 라우트에 관련된 것을 다룹니다.
  • src/App.tsx가 최상위 레이아웃 입니다.

코드 포맷터 설정

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());