[StudySync 프로젝트] Vue 3 + TypeScript + Tailwind CSS로 StudySync 프론트엔드 설정

2025년 4월 18일

StudySync 프로젝트는 AI 기반 학습 플래너 웹 앱이다. Vue 3, TypeScript, Tailwind CSS로 프론트엔드를 설정하고, Spring Boot, JPA, MySQL로 백엔드를 구현한다. 오늘은 프론트엔드 초기 설정(Vite, Tailwind CSS, ESLint, Prettier)을 완료했다. IntelliJ와 GitHub 저장소(study_sync)를 사용해 진행한 과정을 기록한다.

---

프로젝트 개요

StudySync는 학습 목표를 설정하면 AI(ChatGPT API)가 맞춤형 계획을 생성하는 앱이다. 주요 기능은 다음과 같다:

• 사용자 인증(JWT 기반)
• AI 기반 학습 계획
• 실시간 퀴즈, 커뮤니티 피드
• 반응형 UI, PWA

프론트엔드는 Vue 3, TypeScript, Tailwind CSS를 사용한다. 백엔드는 Spring Boot, JPA, MySQL로 나중에 설정한다.

---

준비물

• Node.js 18 이상
• IntelliJ IDEA (Community/Ultimate)
• GitHub 저장소: study_sync
• MySQL (백엔드용, 오늘 사용 안 함)

---

설정 과정

프론트엔드는 study_sync/frontend 폴더에 설정한다. Vite를 빌드 도구로 사용한다. IntelliJ에서 진행한 단계는 다음과 같다.

1. GitHub 저장소 클론

GitHub 저장소(study_sync)를 IntelliJ에서 클론한다.

1. IntelliJ 실행 → File > New > Project from Version Control.
2. URL: https://github.com/your-username/study_sync.git.
3. 디렉토리 선택 (예: ~/projects/study_sync) → Clone.
4. 루트에 frontend 폴더 생성:
5. mkdir frontend

GitHub 저장소는 프론트엔드와 백엔드를 모노레포로 관리한다.

---

2. Vite로 Vue 3 + TypeScript 프로젝트 생성

Vite로 Vue 3와 TypeScript 프로젝트를 생성한다.

1. 터미널에서 frontend 폴더로 이동:
2. cd frontend
3. Vite 템플릿 생성:
   • .는 현재 폴더(frontend)에 생성.
   • vue-ts는 Vue 3와 TypeScript 포함.
4. npm create vite@latest . -- --template vue-ts
5. 의존성 설치:
6. npm install
7. 개발 서버 실행:
   • http://localhost:5173에서 Vue 기본 페이지 확인.
8. npm run dev

IntelliJ에서 frontend/package.json을 열어 scripts의 dev를 실행할 수 있다. Vue.js 플러그인 설치로 .vue 파일을 지원한다.

Vite는 빠른 HMR(Hot Module Replacement)로 개발 효율성을 높인다.

---

3. Tailwind CSS 설치

Tailwind CSS는 유틸리티 기반 CSS 프레임워크다.

1. Tailwind와 도구 설치:
2. npm install -D tailwindcss postcss autoprefixer
3. 설정 파일 생성:
   • tailwind.config.js, postcss.config.js 생성.
4. npx tailwindcss init -p
5. tailwind.config.js 수정:
6. /** @type {import('tailwindcss').Config} */ export default { content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], theme: { extend: {} }, plugins: [], }
7. frontend/src/assets/main.css 생성:
8. @tailwind base; @tailwind components; @tailwind utilities;
9. frontend/src/main.ts에서 CSS 임포트:
10. import { createApp } from 'vue' import App from './App.vue' import './assets/main.css' createApp(App).mount('#app')

Tailwind는 클래스 기반 스타일링으로 반응형 UI를 빠르게 구현한다. IntelliJ에서 Tailwind CSS IntelliSense 플러그인을 설치하면 클래스 자동 완성이 가능하다.

---

4. ESLint와 Prettier 설정

ESLint와 Prettier로 코드 품질과 포맷팅을 관리한다.

1. 패키지 설치:
2. npm install -D eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier
3. ESLint 설정:
   • 질문:
     • Use ESLint for? → Syntax and problems.
     • Modules? → JavaScript modules.
     • Framework? → Vue.js.
     • TypeScript? → Yes.
     • Environment? → Browser.
     • Format? → JavaScript.
   • frontend/.eslintrc.js:
   • module.exports = { env: { browser: true, es2021: true }, extends: [ 'eslint:recommended', 'plugin:vue/vue3-essential', 'plugin:@typescript-eslint/recommended', ], parser: 'vue-eslint-parser', parserOptions: { parser: '@typescript-eslint/parser', sourceType: 'module', }, plugins: ['vue', '@typescript-eslint'], }
4. npx eslint --init
5. Prettier 설정 (frontend/.prettierrc):
6. { "semi": true, "trailingComma": "es5", "singleQuote": true, "printWidth": 80, "tabWidth": 2 }
7. .eslintignore:
8. dist/ node_modules/

IntelliJ에서 ESLint, Prettier 플러그인을 설치하면 실시간 오류 표시와 자동 포맷팅이 가능하다.

---

5. GitHub 커밋

설정 완료 후 frontend 폴더를 GitHub에 푸시한다.

1. study_sync/.gitignore:
2. /frontend/node_modules/ /frontend/dist/ /frontend/.env.local
3. IntelliJ에서 커밋:
   • VCS > Commit → frontend/ 추가.
   • 메시지: Initial frontend setup with Vue, TypeScript, Tailwind CSS.
   • VCS > Git > Push.

---

IntelliJ 설정

IntelliJ에서 Vue 3와 TypeScript 작업을 최적화한다:

• 플러그인: Vue.js, ESLint, Prettier, Tailwind CSS IntelliSense.
• Node.js: Settings > Languages & Frameworks > Node.js → Node 18+, npm 설정.
• 실행: frontend/package.json에서 npm run dev 실행.
• .vue 파일은 Vue.js 플러그인으로 지원.

---

코드

주요 파일은 다음과 같다:

// frontend/src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'

createApp(App).mount('#app')

<!-- frontend/src/App.vue -->
<script setup lang="ts"></script>

<template>
  <main class="p-4">
    <h1 class="text-2xl font-bold">Welcome to StudySync</h1>
    <p>Your personalized learning planner.</p>
  </main>
</template>

/* frontend/src/assets/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

// frontend/tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: { extend: {} },
  plugins: [],
}

// frontend/.eslintrc.js
module.exports = {
  env: { browser: true, es2021: true },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
}

// frontend/.prettierrc
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

---

다음 단계

• Vue Router로 홈/인증 페이지 라우팅 설정.
• AppButton.vue 컴포넌트 작성.
• 백엔드(Spring Boot, JPA, MySQL) 설정.

---

요약

오늘 StudySync 프론트엔드를 설정했다:

• Vite로 Vue 3 + TypeScript 프로젝트 생성.
• Tailwind CSS로 스타일링 준비.
• ESLint, Prettier로 코드 품질 관리.
• IntelliJ와 GitHub로 환경 구축.

명령어:

cd frontend
npm create vite@latest . -- --template vue-ts
npm install
npm install -D tailwindcss postcss autoprefixer eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier
npx tailwindcss init -p
npx eslint --init
npm run dev

---

참고 자료

• Vue 3 문서
• Vite 문서
• Tailwind CSS 문서
• TypeScript 문서