Travel Report 프론트엔드, 백엔드 통합 개발 프로젝트
프로젝트 깃 클론 한 뒤에 할일
프로젝트에 필요한 패키지 설치
다음은 터미널에서 클론 한 후 단 한번만 실행합니다.
-
백엔드 패키지 설치
npm install
-
프론트엔드 패키지 설치
cd frontend npm install
다시 루트 디렉토리로 이동
cd ..
DB 초기값 설정
앱에 필요한 기본 디비 테이블 및 초기값 생성
npx ts-node migrations\create.roles.ts
npx ts-node migrations\create.admin.ts
서버 실행
-
프론트엔드 서버 실행
cd frontend npm run dev
다시 루트로 이동
cd ..
-
백엔드 서버 실행
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());