유학생 학사정보 열람 시스템 #1 – 프로젝트 생성 및 초기 세팅

목차

목표

이 글에서는 Vue.js (프론트엔드), Node.js (백엔드), MySQL (데이터베이스) 기반으로 풀스택 개발 환경을 구축하고, 폴더 구조를 나누는 작업까지 진행한다.

이 프로젝트는 과거 JSP 기반의 학사정보 시스템을 최신 SPA 구조로 재구성하는 학습 및 포트폴리오 목적이다.

💻 1. 개발 환경 사양

• macOS (Apple M1 MacBook Pro)
• VSCode (주 IDE)
• Node.js 20+
• MySQL 8.x
• npm, npx

💻 2. 프로젝트 폴더 구조 설계

# 원하는 위치로 이동
cd /Volumes/SN850X/Study

# 루트 폴더 생성
mkdir haksa-info
cd haksa-info

 

✅ 프론트엔드(Vue 3 + Vite)

npm create vue@latest frontend
# 옵션은 아래처럼 선택 (Vite 기반, TypeScript 없음, Router 있음, Pinia 있음)
# ? Project name: frontend
# ? Add TypeScript? No
# ? Add JSX Support? No
# ? Add Vue Router? Yes
# ? Add Pinia? Yes
# ? Add Vitest? No
# ? Add ESLint? Yes
# ? Add Prettier? Yes

cd frontend
npm install
npm run format
cd ..

✅ 백엔드(Node.js + Express)

mkdir backend
cd backend

npm init -y
npm install express cors mysql2 dotenv
mkdir routes controllers models config

# 메인 서버 파일 생성
touch index.js .env

cd ..

📁 실제 폴더 구조 (초기 상태 기준)

/Volumes/SN850X/Study/haksa-info/
 ┣ backend/
 ┃ ┣ config/            # DB 연결 및 설정
 ┃ ┣ controllers/       # 각 기능별 컨트롤러
 ┃ ┣ models/            # DB 쿼리 및 모델 관리
 ┃ ┣ routes/            # API 라우팅 관리
 ┃ ┣ node_modules/
 ┃ ┣ .env               # 환경 변수 파일 (DB 정보 등)
 ┃ ┣ index.js           # 메인 서버 진입점
 ┃ ┣ package.json
 ┃ ┗ package-lock.json
 ┃
 ┣ frontend/
 ┃ ┣ .vscode/           # 에디터 설정
 ┃ ┣ node_modules/
 ┃ ┣ public/
 ┃ ┣ src/               # Vue 컴포넌트, 라우터, 스토어 등
 ┃ ┣ .editorconfig
 ┃ ┣ .gitattributes
 ┃ ┣ .gitignore
 ┃ ┣ .prettierrc.json
 ┃ ┣ eslint.config.js
 ┃ ┣ index.html
 ┃ ┣ jsconfig.json
 ┃ ┣ package.json
 ┃ ┣ package-lock.json
 ┃ ┣ README.md
 ┃ ┗ vite.config.js

💡 주요 설정 포인트

🔧 backend

• index.js: Express 서버 엔트리 파일
• routes/: 기능별 API 라우팅
• controllers/: 각 API 로직 처리
• models/: DB 쿼리 함수 분리
• config/: MySQL 연결, 환경변수 설정 등

💻 frontend

• src/: 전체 Vue 앱의 핵심. views/, components/, stores/ 구조로 나눌 예정
• vite.config.js: 개발 서버 설정, 경로 별칭(alias) 등 가능
• .prettierrc.json, eslint.config.js: 코드 스타일 통일

코드 스타일 설정 – ESLint & Prettier

npm install -D eslint prettier eslint-plugin-prettier eslint-plugin-import eslint-plugin-simple-import-sort eslint-plugin-unused-imports @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-vue vue-eslint-parser