🎯 백엔드 - 프론트엔드 디렉토리 구조를 설계하고 테스트 데이터베이스를 구성합니다.

📗 Today I Learned

Backend

Backend 파일 구조

📁 src
├── 📄 index.ts        # 앱 진입점 파일
├── 📄 app.ts          # 앱 진입점 파일
├── 📄 settings.ts     # 환경변수 및 각종 설정 변수
├── 📁 routes/         # 라우트 함수 모음
│    ├── 📄 users.ts
│    ├── 📄 notes.ts 
│    └── 📄 healthcheck.ts 
├── 📁 models/         # 모델 클래스 모음
│    ├── 📄 note.ts 
│    └── 📄 user.ts 
├── 📁 utils/          # 유틸리티 함수 및 유틸리티 객체 모음
│    └── 📄 mysql.ts 
└── 📁 middlewares/    # 미들웨어 함수 모음
     ├── 📄 authentication.ts 
     └── 📄 authorization.ts 

📁 routes/

• users.ts

  • Base 경로 : /

  • 로그인 및 JWT 쿠키 발급 : POST /login

  • 로그아웃 및 쿠키 삭제 : POST /logout

  • 사용자 본인 정보 조회 : GET /users/me

  • 회원가입 : POST /users

• notes.ts

  • Base 경로 : /notes

  • 노트 목록 조회 : GET /

  • 노트 상세 조회 : GET /:id

  • 노트 생성 : POST /

  • 노트 수정 : PUT /:id

  • 노트 삭제 : DELETE /:id

• healthcheck.ts

  • Base 경로 : /healthcheck

  • Docker 헬스체크를 위한 204 응답 : GET /

📁 models/

DB Pool 객체를 통해 모델을 CRUD할 수 있는 DAO역할을 합니다.

• note.ts
  • 노트에 대한 CRUD를 제공하는 모델 클래스입니다.

🤔 Pool과 DAO는 어떤 뜻일까?

Pool (DB Pool)
DB 연결을 미리 여러 개 만들어놓고 필요할 때마다 하나씩 꺼내쓰는 구조

DAO (Data Access Object)
데이터베이스에 직접 접근해서 CRUD 하는 클래스나 객체

• user.ts

  • 사용자에 대한 CRUD를 제공하는 모델 클래스입니다.

  • BCrypt로 단방향암호화된 비밀버호를 평문 비밀번호와 대조하는 인스턴스 메서드를 제공합니다.

📁 utils/

• mysql.ts

  • DB SQL 쿼리를 위한 MySQL Pool 인스턴스를 제공합니다.

📁 middlewares/

• authentication.ts

  • Request 객체의 쿠키로 주어진 JWT를 검증하고, User DAO를 Request 객체에 추가합니다.

• authorization.ts

  • Request 객체의 id param에 해당하는 Note가 존재하는지 확인하고, Note의 owner가 Request 객체의 User와 일치하는지 검증하고, Note DAO를 Request 객체에 추가합니다.

---

데이터베이스 설계

• init-user.sql : DB 사용자 생성 및 권한 설정

USE mysql;

-- 사용자 생성 (로컬 전용)
CREATE USER IF NOT EXISTS 'prgms'@'localhost' IDENTIFIED BY '비밀번호';

-- 사용자 생성 (모든 IP 허용 — 개발용)
CREATE USER IF NOT EXISTS 'prgms'@'%' IDENTIFIED BY '비밀번호';

-- 특정 DB에 대한 권한 부여
GRANT ALL PRIVILEGES ON prgms_notes.* TO 'prgms'@'localhost';
GRANT ALL PRIVILEGES ON prgms_notes.* TO 'prgms'@'%';

-- 권한 변경사항 적용
FLUSH PRIVILEGES;

• init-db.sql : DB 및 테이블 생성

CREATE SCHEMA IF NOT EXISTS `prgms_notes` DEFAULT CHARACTER SET utf8mb4;
USE `prgms_notes`

-- 사용자 테이블 생성
CREATE TABLE IF NOT EXISTS users (
    id INT NOT NULL AUTO_INCREMENT,
    email VARCHAR(256) NOT NULL,
    encrypted_password text NOT NULL,
    PRIMARY KEY (id),
    UNIQUE INDEX users_unique_email (email) USING BTREE
);

-- 노트 테이블 생성
CREATE TABLE IF NOT EXISTS notes (
    id INT NOT NULL AUTO_INCREMENT,
    title text NOT NULL,
    content text NOT NULL,
    user_id INT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    PRIMARY KEY (id),
    CONSTRAINT note_user_id
        FOREIGN KEY (user_id)
        REFERENCES users (id)
        ON DELETE SET NULL
        ON UPDATE CASCADE
);

• init-test-db.sql : 테스트용 초기 데이터 삽입

DROP DATABASE IF EXISTS `prgms_notes`;
CREATE SCHEMA `prgms_notes` DEFAULT CHARACTER SET utf8mb4;
USE `prgms_notes`

--
-- Table structure for table `users`
--

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `email` varchar(256) NOT NULL,
  `encrypted_password` text NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `users_unique_email` (`email`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

--
-- Table structure for table `notes`
--

CREATE TABLE `notes` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` text NOT NULL,
  `content` text NOT NULL,
  `user_id` int(11) DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT current_timestamp(),
  `updated_at` timestamp NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
  PRIMARY KEY (`id`),
  KEY `note_user_id` (`user_id`),
  CONSTRAINT `note_user_id` FOREIGN KEY (`user_id`) REFERENCES `users` (`id`) ON DELETE SET NULL ON UPDATE CASCADE
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

--
-- Dumping data for table `users`
--

LOCK TABLES `users` WRITE;
INSERT INTO `users` VALUES (1,'test@example.com','$2b$10$432oW5OwXPcHPcmyQghkxeICMi65DGPdFnDv21dJ2QU3CSj.xFbi6');
UNLOCK TABLES;

--
-- Dumping data for table `notes`
--

LOCK TABLES `notes` WRITE;
INSERT INTO `notes` VALUES (1,'Test (1)','<p>This note is for testing.</p><p>Note number: 1</p>',1,'2024-01-24 05:47:47','2024-01-24 05:48:04'),(2,'Test (2)','<p>This note is for testing.</p><p>Note number: 2</p>',1,'2024-01-24 05:48:08','2024-01-24 05:48:23');
UNLOCK TABLES;

---

테스트 데이터베이스 설치

• notes-db.yaml : DB 컨테이너 정의 및 서비스 설정

# Deployment
apiVersion: apps/v1
kind: Deployment
metadata:
  name: notes-db
  namespace: db
spec:
  ...
  template:
    spec:
      containers:
        - name: notes-database
          image: mariadb:11.2.2
          env:
            - name: MARIADB_ROOT_PASSWORD
              value: root
          volumeMounts:
            - name: notes-db-storage
              mountPath: "/var/lib/mysql"
      volumes:
        - name: notes-db-storage
          persistentVolumeClaim:
            claimName: notes-db-pvc

---

# Service
apiVersion: v1
kind: Service
metadata:
  name: notes-db
  labels:
    run: notes-db
  namespace: db
spec:
  type: NodePort
  selector:
    run: notes-db
  ports:
    - port: 3306
      nodePort: 30036            

• notes-db-volume.yaml : PersistentVolume / PVC 정의

# PersistentVolume
apiVersion: v1
kind: PersistentVolume
metadata:
  name: notes-db-volume
  labels:
    type: local
  namespace: db
spec:
  storageClassName: manual
  capacity:
    storage: 10Gi
  accessModes:
    - ReadWriteOnce
  hostPath:
    path: "<Path to your data directory>"

---

# PersistentVolumeClaim
apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: notes-db-pvc
  namespace: db
spec:
  storageClassName: manual
  accessModes:
    - ReadWriteOnce
  resources:
    requests:
      storage: 10Gi

kubectl create namespace db
kubectl apply -f notes-db-volume.yaml
kubectl apply -f notes-db.yaml

접근 방법

• 로컬: localhost:30036

• 클러스터 내부: notes-db.db.svc.cluster.local

• 초기화 명령어

mysql --protocol tcp -P 30036 -u root -p < init-user.sql # 루트 계정으로 사용자 생성
mysql --protocol tcp -P 30036 -u root -p < init-db.sql   # 루트 계정으로 DB 및 테이블 생성
mysql --protocol tcp -P 30036 -u prgms -p                # prgms 계정으로 DB 접근 테스트

---

백엔드 디렉토리 초기화

npm init -y                                  # package.json 초기화
npm i dotenv express express-async-errors    # 런타임 의존성 설치
npm i -D typescript @types/express nodemon   # 개발 의존성 설치

• package.json

...
  "main": "build/index.js",
  "scripts": {
    "start": "nodemon",
    "build": "tsc",
   }
...

• nodemon.json

{
  "$schema": "https://json.schemastore.org/nodemon.json",
  "watch": ["src"],
  "ignore": ["src/**/*.test.ts"],
  "ext": "ts,json",
  "exec": "tsc && node .",
  "legacyWatch": true
}

• tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022"],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "CommonJS",
    "moduleResolution": "node",
    "isolatedModules": true,
    "outDir": "./build"
  },
  "include": ["src"],
  "exclude": ["src/**/*.test.ts", "src/**/__mocks__/*.ts"]
}

• src/settings.ts

import dotenv from "dotenv";

dotenv.config();
export const PORT = process.env.PORT || 3031;

• src/app.ts

import express, { NextFunction, Request, Response } from 'express';
import 'express-async-errors';

const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use((err: unknown, req: Request, res: Response, next: NextFunction) => {
  console.error(err);
  res.sendStatus(500);
});

export { app };

• src/index.ts

import { app } from './app';
import { PORT } from './setting';

app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

---

Frontend

Frontend 파일 구조

📁 src
├── 📄 index.tsx        # 스크립트 진입점 파일 
├── 📄 App.tsx          #  메인 앱 컴포넌트
├── 📄 App.css          # 메인 스타일시트
├── 📄 router.tsx       # 라우터 파일
├── 📄 settings.ts      # 환경변수 파일
├── 📁 pages/           # 페이지 컴포넌트 모음
│    ├── 📄 Index.tsx 
│    ├── 📄 Login.tsx 
│    ├── 📄 Join.tsx 
│    ├── 📄 Error.tsx 
│    ├── 📄 Index.template.tsx 
│    └── 📁 notes/
│         ├── 📄 Index.tsx 
│         └── 📄 Detail.tsx 
├── 📁 components/      # 세부 컴포넌트 모음
│    ├── 📄 LoginForm.ts 
│    ├── 📄 JoinForm.ts 
│    ├── 📄 NoteList.ts 
│    ├── 📄 NoteTitleInput.ts 
│    ├── 📄 NoteContentEditor.ts
│    ├── 📁 boundaries/
│    │    ├── 📄 AppErrorBoundary.tsx 
│    │    └── 📄 RouteErrorBoundary.tsx 
│    └── 📁 hocs/
│         ├── 📄 withUnauthenticated.tsx 
│         └── 📄 withAuthenticatedUser.tsx 
│         └── 📄 withCurrentNote.tsx 
├── 📁 hooks/           # React Query 상태관리 관련 Hook 모음
├── 📁 apis/            # API 호출 함수 모음
├── 📁 types/           # 모델 타입 모음
├── 📁 utils/           # 유틸리티 함수 및 객체 모음
│    ├── 📄 http.ts 
│    └── 📄 getStatusFormError.ts 
└── 📁 assets/          # 아이콘 및 이미지 모음

CRA 템플릿 및 설정

npx create-react-app frontend --template typescript

npm i @craco/craco tsconfig-paths-webpack-plugin react-router-dom @tanstack/react-query styled-components open-color

• craco.config.js : 경로 alias 설정

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

/** @type {import('webpack').Configuration} */
module.exports = {
  plugins: [
    {
      plugin: {
        overrideWebpackConfig: ({ webpackConfig }) => {
          webpackConfig.resolve.plugins.push(new TsconfigPathsPlugin({}));
          return webpackConfig;
        },
      },
    },
  ],
};

• Index.template.tsx : 첫 화면 템플릿 구성 컴포넌트

import { Link } from "react-router-dom";
import { styled } from "styled-components";
import oc from "open-color";
import { ReactComponent as MussgImage } from "@/assets/mussg.svg";
export const IndexTemplate: React.FC = () => {
 return (
 <Container>
   <MussgImage height="182" />
   <AppTitle>Programmers Note Editor</AppTitle>
   <AppDescription>
     <strong>Programmers Note Editor</strong>는 (...)
     <br />
     메모는 클라우드에 저장되어 언제 어디서나 (...)
   </AppDescription>
   <StartLink to="login">무료로 시작하기</StartLink>
   <Footer>© 2023 Grepp Co.</Footer>
 </Container>
 );
};

---

✏️ 회고

DB - FE - BE 를 연결하면서 전체 흐름을 직접 구성해보니 개념이 더 잘 잡히는 것 같다. 하지만 다소 빠른 진행과 많은 정보량에 잘 이해하고 있는지 계속 생각하면서 코드를 짜야할 것 같다.