Vue3 앱의 진입점. createApp으로 루트 인스턴스를 만들고 마운트한다.

import { createApp } from 'vue'
import App from './App.vue'

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

데이터 바인딩과 디렉티브의 기본 형태.

<!-- 텍스트 보간 -->
<p>{{ message }}</p>

<!-- 속성 바인딩 -->
<img :src="imageUrl" />

<!-- 이벤트 바인딩 -->
<button @click="increment">+1</button>

<!-- 양방향 바인딩 -->
<input v-model="name" />

Composition API의 반응형 상태 선언 방식. ref는 원시값+객체 모두 가능, reactive는 객체 전용.

import { ref, reactive } from 'vue'

// ref: .value로 접근 (스크립트 내부에서)
const count = ref(0)
count.value++

// reactive: 객체 자체가 반응형 (proxy)
const state = reactive({ name: 'Eisen', age: 40 })
state.age++

의존 데이터가 바뀔 때만 재계산되는 캐시된 값.

import { ref, computed } from 'vue'

const firstName = ref('길동')
const lastName = ref('홍')

const fullName = computed(() => `${lastName.value}${firstName.value}`)

반응형 데이터 변화를 감지해 부수효과(API 호출, DOM 조작 등)를 실행.

import { ref, watch, watchEffect } from 'vue'

const keyword = ref('')

// 특정 소스를 명시적으로 감시
watch(keyword, (newVal, oldVal) => {
  console.log(`${oldVal} → ${newVal}`)
})

// 사용된 반응형 값을 자동 추적
watchEffect(() => {
  console.log('현재 검색어:', keyword.value)
})

폼 입력과 상태의 양방향 바인딩. 내부적으로 :value + @input 조합.

<input v-model="text" />
<!-- 위는 아래와 동일 -->
<input :value="text" @input="text = $event.target.value" />

<!-- 수식어 -->
<input v-model.trim="text" />   // 공백 제거
<input v-model.number="age" />   // 숫자로 변환

조건부 렌더링과 리스트 렌더링.

<p v-if="score >= 90">A</p>
<p v-else-if="score >= 80">B</p>
<p v-else>F</p>

<li v-for="item in items" :key="item.id">
  {{ item.name }}
</li>

// 자식 컴포넌트 (Child.vue)
<script setup>
const props = defineProps({
  title: { type: String, required: true },
  count: { type: Number, default: 0 }
})
</script>

<!-- 부모 컴포넌트 -->
<Child :title="'안녕'" :count="5" />

// 자식 컴포넌트
<script setup>
const emit = defineEmits(['update', 'delete'])

function handleClick() {
  emit('update', { id: 1, value: 'new' })
}
</script>

<!-- 부모 -->
<Child @update="onUpdate" />

부모가 자식 컴포넌트 내부에 마크업/콘텐츠를 주입할 수 있게 하는 기능.

<!-- Card.vue (자식) -->
<div class="card">
  <slot name="header"></slot>
  <slot></slot> <!-- 기본 슬롯 -->
</div>

<!-- 사용처 -->
<Card>
  <template #header><h3>제목</h3></template>
  <p>본문 내용</p>
</Card>

import { onMounted, onUpdated, onUnmounted } from 'vue'

onMounted(() => {
  // DOM이 화면에 붙은 직후 — API 호출, DOM 접근에 적합
})
onUpdated(() => { /* 반응형 데이터로 인해 DOM 갱신 후 */ })
onUnmounted(() => { /* 정리 작업 — 타이머/이벤트리스너 해제 */ })

Composition API 함수를 모듈화해 여러 컴포넌트에서 재사용. use 접두사 관례.

// composables/useCounter.js
import { ref } from 'vue'

export function useCounter(initial = 0) {
  const count = ref(initial)
  const increment = () => count.value++
  return { count, increment }
}

// 컴포넌트에서 사용
import { useCounter } from '@/composables/useCounter'
const { count, increment } = useCounter(10)

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  { path: '/', component: Home },
  { path: '/user/:id', component: UserView, props: true }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// 네비게이션 가드
router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    return '/login'
  }
})

<!-- 템플릿에서 -->
<router-link to="/about">소개</router-link>
<router-view />

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubled: (state) => state.count * 2
  },
  actions: {
    increment() { this.count++ }
  }
})

// 컴포넌트에서
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
store.increment()

// api/client.js
import axios from 'axios'

const api = axios.create({
  baseURL: '/api',
  timeout: 5000
})

// 요청 인터셉터 — JWT 토큰 자동 첨부
api.interceptors.request.use((config) => {
  const token = localStorage.getItem('token')
  if (token) config.headers.Authorization = `Bearer ${token}`
  return config
})

export default api

// 컴포넌트에서 사용 (async/await + try-catch)
import { ref, onMounted } from 'vue'
import api from '@/api/client'

const users = ref([])

onMounted(async () => {
  try {
    const res = await api.get('/users')
    users.value = res.data
  } catch (e) {
    console.error('조회 실패', e)
  }
})

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>페이지 제목</title>
</head>
<body>
  ...
</body>
</html>

<details>
  <summary>자세히 보기</summary>
  <p>JS 없이 펼쳐지는 내용</p>
</details>

<h1>~<h6>          // 제목 (문서당 h1 1개 권장, 계층 건너뛰지 말 것)
<p>문단</p>
<strong>중요(굵게+의미)</strong>
<em>강조(기울임+의미)</em>
<br>               // 줄바꿈
<hr>               // 수평 구분선
<span>인라인 묶음</span>
<blockquote cite="출처url">인용문</blockquote>
<code>코드 조각</code>
<pre>공백/줄바꿈 유지 텍스트</pre>

<!-- 순서 없는 목록 -->
<ul>
  <li>항목1</li>
  <li>항목2</li>
</ul>

<!-- 순서 있는 목록 -->
<ol start="3">
  <li>3번부터 시작</li>
</ol>

<!-- 정의 목록 -->
<dl>
  <dt>HTML</dt>
  <dd>웹 문서 마크업 언어</dd>
</dl>

<table>
  <caption>월별 매출</caption>
  <thead>
    <tr><th scope="col">월</th><th scope="col">매출</th></tr>
  </thead>
  <tbody>
    <tr><td>1월</td><td>1,200</td></tr>
    <tr><td colspan="2">합계 행</td></tr>
  </tbody>
  <tfoot>
    <tr><td>총계</td><td>1,200</td></tr>
  </tfoot>
</table>

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  새 탭에서 열기
</a>

<img src="photo.jpg" alt="제품 사진 설명" width="400" loading="lazy" />

<!-- 반응형 이미지: 화면 크기별 다른 이미지 제공 -->
<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <img src="large.jpg" alt="설명">
</picture>

<video controls poster="thumb.jpg" width="640">
  <source src="movie.mp4" type="video/mp4">
  브라우저가 비디오를 지원하지 않습니다.
</video>

<audio controls autoplay loop muted>
  <source src="song.mp3" type="audio/mpeg">
</audio>

<form @submit.prevent="onSubmit">
  <fieldset>
    <legend>회원 정보</legend>

    <label for="email">이메일</label>
    <input id="email" type="email" v-model="email" required />

    <select v-model="role">
      <optgroup label="내부">
        <option value="admin">관리자</option>
      </optgroup>
    </select>

    <textarea v-model="memo" rows="4"></textarea>
  </fieldset>

  <button type="submit">저장</button>
  <button type="reset">초기화</button>
</form>

<input type="file" accept="image/*" multiple @change="onFileSelect" />
<input type="number" min="0" max="100" step="5" />

<input
  type="text"
  required
  minlength="2" maxlength="20"
  pattern="[A-Za-z0-9]+"
  placeholder="영문/숫자만 입력"
/>

<div data-user-id="42" data-role="admin"></div>
// JS: el.dataset.userId === '42'

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="페이지 설명 (검색결과 노출)">

<!-- 카카오톡/SNS 공유 미리보기 (Open Graph) -->
<meta property="og:title" content="제목">
<meta property="og:image" content="thumb.jpg">

<link rel="icon" href="/favicon.ico">

<iframe
  src="https://example.com"
  width="600" height="400"
  loading="lazy"
  sandbox="allow-scripts allow-same-origin"
></iframe>

<!-- 버튼처럼 보이는 div에 역할/상태 부여 -->
<div role="button" tabindex="0" aria-pressed="false" @click="toggle">
  토글
</div>

<!-- 스크린리더 전용 라벨 (시각적으로는 숨김) -->
<button aria-label="닫기">✕</button>

<!-- 동적으로 갱신되는 영역을 스크린리더에 알림 -->
<div aria-live="polite">{{ statusMessage }}</div>

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#42b883" />
  <rect x="10" y="10" width="30" height="30" />
</svg>

<!-- 네이티브 HTML template: 렌더링되지 않고 JS로 복제해 사용 -->
<template id="row-tpl">
  <tr><td></td></tr>
</template>

/* 선택자 { 속성: 값; } */
.title {
  color: #333;
  font-size: 18px;
}

/* 기본 선택자 */
* { }                  /* 전체 선택자 */
p { }                  /* 태그 선택자 */
.card { }              /* 클래스 선택자 */
#header { }            /* id 선택자 */

/* 결합자 */
.card p { }            /* 후손 선택자 (자손 전체) */
.card > p { }          /* 자식 선택자 (직계만) */
h2 + p { }            /* 인접 형제 (바로 다음) */
h2 ~ p { }            /* 일반 형제 (이후 전체) */

/* 속성 선택자 */
input[type="text"] { }
a[href^="https"] { }   /* https로 시작 */
a[href$=".pdf"] { }    /* .pdf로 끝남 */
a[href*="naver"] { }   /* naver 포함 */

/* 그룹 선택자 */
h1, h2, h3 { margin: 0; }

동일 요소에 여러 규칙이 충돌할 때 적용 순서를 결정하는 점수 체계.

.box {
  box-sizing: border-box; /* width에 padding+border 포함 */
  width: 200px;
  padding: 16px;
  border: 1px solid #ccc;
  margin: 8px;
}

/* 실무 관행: 전역 리셋 */
*, *::before, *::after { box-sizing: border-box; }

.container {
  display: flex;
  flex-direction: row;             /* row | column | row-reverse | column-reverse */
  justify-content: space-between;  /* 주축 정렬 */
  align-items: center;             /* 교차축 정렬 */
  flex-wrap: wrap;                 /* 줄바꿈 허용 */
  gap: 12px;
}
.item {
  flex: 1;          /* flex-grow flex-shrink flex-basis 축약 */
  flex-shrink: 0;   /* 줄어들지 않음 */
  order: 2;         /* 시각적 순서 변경 (DOM 순서는 유지) */
  align-self: flex-end; /* 개별 아이템만 교차축 정렬 재정의 */
}

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;     /* 사이드바 + 본문 */
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar header"
    "sidebar content"
    "sidebar footer";
  gap: 16px;
}
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }

/* 반응형 카드 그리드 (자동 줄바꿈) */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.modal-wrap { position: relative; }   /* 기준점 생성 */
.modal-close { position: absolute; top: 12px; right: 12px; }

.table-header { position: sticky; top: 0; } /* 스크롤시 헤더 고정 */

.thumbnail { float: left; margin-right: 12px; }
.clearfix::after { content: ""; display: block; clear: both; }

.box {
  color: red;                       /* 키워드 */
  color: #42b883;                   /* HEX */
  color: rgb(66, 184, 131);         /* RGB */
  color: rgba(66, 184, 131, 0.5);   /* RGB + 투명도 */
  color: hsl(152, 47%, 49%);        /* 색상/채도/명도 */
  color: hsl(152 47% 49% / 0.5);    /* HSL + 투명도 (최신 표기) */
}

.text {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 700;        /* 100~900, normal=400, bold=700 */
  line-height: 1.6;        /* 단위 없는 값 = font-size의 배수 (권장) */
  letter-spacing: -0.02em;
  text-align: center;
  text-decoration: underline;
  text-transform: uppercase;
  white-space: nowrap;     /* 줄바꿈 방지 */
  overflow: hidden;
  text-overflow: ellipsis; /* 말줄임표(...) — white-space/overflow와 세트 */
}

/* 여러 줄 말줄임 (line-clamp) */
.desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero {
  background-color: #1b1f2a;
  background-image: url('bg.jpg');
  background-size: cover;       /* 비율 유지하며 영역 꽉 채움 */
  background-position: center;
  background-repeat: no-repeat;

  /* 축약형 */
  background: #1b1f2a url('bg.jpg') no-repeat center / cover;
}

.card {
  border: 1px solid #2a2f3d;
  border-radius: 12px;
  border-top: 3px solid #42b883;   /* 한쪽 면만 다르게 */
}
.avatar { border-radius: 50%; }   /* 원형 */
.pill { border-radius: 999px; }   /* 알약 모양 */

/* box-shadow: x오프셋 y오프셋 blur spread color */
.card { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* 안쪽 그림자 */
.inset { box-shadow: inset 0 0 8px rgba(0,0,0,0.3); }

/* filter: 이미지/요소 시각효과 */
.thumb { filter: blur(4px) grayscale(50%) brightness(1.1); }
.backdrop { backdrop-filter: blur(10px); }  /* 뒤 배경에 적용 (유리효과) */

.scroll-box {
  overflow: auto;        /* 넘칠 때만 스크롤바 */
  overflow-x: hidden;
  overflow-y: scroll;    /* 항상 스크롤바 표시 */
  -webkit-overflow-scrolling: touch;  /* iOS 관성 스크롤 */
}

.modal { position: fixed; z-index: 1000; }
.dropdown { position: absolute; z-index: 10; }

.box {
  transform: translate(10px, 20px);  /* 이동 */
  transform: scale(1.1);             /* 확대/축소 */
  transform: rotate(45deg);          /* 회전 */
  transform: skew(10deg);            /* 기울이기 */

  /* 여러 변형 조합 (공백으로 구분, 순서대로 적용) */
  transform: translateX(-50%) rotate(10deg);
}

/* 정중앙 배치 패턴 (width/height 모를 때) */
.center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.btn {
  background: #2a2f3d;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn:hover {
  background: #42b883;
  transform: translateY(-2px);
}

/* 축약형: property duration timing-function delay */
.fade { transition: all 0.3s ease-in-out 0.1s; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spinner {
  animation: spin 1s linear infinite;
  /* 축약: name duration timing-function delay iteration-count direction fill-mode */
}

@keyframes fadeInUp {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.card { animation: fadeInUp 0.4s ease-out forwards; }

.linear { background: linear-gradient(135deg, #5b8def, #42b883); }
.radial { background: radial-gradient(circle, #fff, #ccc); }

/* 텍스트에 그라데이션 적용 */
.gradient-text {
  background: linear-gradient(90deg, #5b8def, #42b883);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 가상 클래스(:) — 요소의 특정 '상태' */
.btn:hover { }       /* 마우스 올림 */
.btn:active { }      /* 클릭 중 */
.btn:focus { }       /* 포커스됨 */
input:disabled { }
input:checked { }
li:first-child { }
li:last-child { }
li:nth-child(2n) { }     /* 짝수번째 */
li:nth-child(odd) { }    /* 홀수번째 */
p:not(.special) { }      /* 제외 */

/* 가상 요소(::) — 요소 안에 '존재하지 않던 콘텐츠'를 생성 */
.box::before { content: "★ "; }
.box::after { content: ""; display: block; clear: both; }
.box::placeholder { color: #999; }
.box::selection { background: yellow; }

/* 태블릿 이하 */
@media (max-width: 880px) {
  .sidebar { display: none; }
}

/* 갤럭시 탭 가로/세로 전환 대응 */
@media (orientation: portrait) { }
@media (orientation: landscape) { }

/* 범위 동시 지정 */
@media (min-width: 600px) and (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* 다크모드 감지 */
@media (prefers-color-scheme: dark) { }

/* 호버 가능 여부 (터치 기기 구분에 유용) */
@media (hover: hover) { .btn:hover { } }

뷰포트가 아닌 부모 컨테이너의 크기를 기준으로 스타일을 바꾸는 최신 CSS 기능. 사이드바 유무에 따라 같은 카드 컴포넌트가 다르게 보여야 할 때 유용.

.card-wrap { container-type: inline-size; container-name: card; }

@container card (min-width: 400px) {
  .card { display: flex; flex-direction: row; }
}

:root {
  --primary-color: #42b883;
  --spacing-md: 16px;
}
.btn {
  background: var(--primary-color);
  padding: var(--spacing-md);
  color: var(--text-color, #333);  /* 두 번째 인자: fallback 값 */
}

/* 다크모드 전환 예시 */
[data-theme="dark"] {
  --primary-color: #5b8def;
}

/* :has() — 부모 선택자 (자식 상태에 따라 부모 스타일 변경) */
.form-group:has(input:invalid) { border-color: red; }
.card:has(img) { padding-top: 0; }

/* clamp(최소, 권장, 최대) — 반응형 값 자동 계산 */
h1 { font-size: clamp(20px, 4vw, 36px); }

/* min() / max() */
.container { width: min(90%, 1200px); }

/* aspect-ratio — 비율 고정 (썸네일 등) */
.thumb { aspect-ratio: 16 / 9; object-fit: cover; }

/* gap — flex에도 적용 가능 (예전엔 grid 전용) */
.flex-list { display: flex; gap: 8px; }

/* 브라우저마다 다른 기본 스타일을 통일 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }

탭하면 체크/완료 표시되며, 새로고침 시 초기화됩니다 (오프라인 단독 파일이라 저장은 되지 않습니다).

• Vue3 + Vite 프로젝트 구조 한 번 더 훑어보기 (src/components, src/views, src/router, src/stores)
• Spring Boot 쪽 API 명세(Swagger 등) 접근 권한 요청
• Git 저장소 clone 및 브랜치 전략(Git Flow 등) 확인
• 로컬 개발 환경 (.env, DB 접속정보) 셋업
• 팀 코드 컨벤션 / ESLint·Prettier 설정 확인
• v-model, props/emit, Pinia 패턴 — 팀 코드베이스에서 실제 사용 예시 찾아보기
• JWT 토큰 흐름 (로그인 → 저장 → axios 인터셉터 첨부) 팀 구현 방식 파악