[Vue] Vue.js 실습(1) : VS Code, Node.js 다운로드 및 프로젝트 생성

Vue 3 독학 실습: 와이드 랜딩 페이지 레이아웃 구축

 

1. 프로젝트 초기화 및 폴더 구조 (JavaScript / Vite)

TypeScript 옵션을 제외하고 순수 자바스크립트 기반의 Vue 3 프로젝트를 생성하여 실습을 진행함.

npm create vue@latest
# 설정: TypeScript(No), Vue Router(Yes) 선택
npm install
npm run dev

📂 핵심 디렉토리 및 파일 역할

• src/main.js: 앱의 진입점(Entry point). Vue 인스턴스를 생성하고 전역 플러그인(Router 등)을 연결하여 실행하는 시동 장치.
• src/views/: 주소창의 URL 경로가 바뀔 때마다 화면 전체가 통째로 교체되는 독립적인 페이지 컴포넌트 저장소 (HomeView.vue).
• src/components/: 페이지 내에 삽입되어 재사용되는 UI 부품 컴포넌트 저장소 (Header.vue).
• src/router/: URL 경로와 View 컴포넌트를 매핑하는 라우팅 규칙 정의 관리 (index.js).
• src/assets/: 이미지(background.jpg), 전역 CSS 스타일시트 등 프로젝트 전반에 쓰이는 정적 리소스 보관소.

---

2. 최상위 레이아웃 거푸집 (src/App.vue) 분석

프로젝트의 뼈대가 되는 App.vue 파일의 구조를 직접 설계하여 기업형 와이드 레이아웃의 기본 틀을 정의함.

<script setup lang="ts">
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
</script>

<template>
  <div class="site-layout">
    <Header />
    <main class="main-container">
      <router-view />
    </main>
    <Footer />
  </div>
</template>

<style>
html, body, #app {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background-color: #0b1220;
  box-sizing: border-box;
}
html {
  scrollbar-gutter: stable;
}
#app {
  max-width: none !important;
  padding: 0 !important;
}
</style>

<style scoped>
.site-layout {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.main-container {
  width: 100%;
  flex: 1;
  margin: 0;
  padding: 0;
  padding-top: 80px;
}
</style>

 

App.vue 구조 및 스타일 분석 노트

• 컴포넌트 조립 (<template>): 화면 최상단에는 고정된 <Header />를 두고, 최하단에는 <Footer />를 배치함. 중앙의 <main> 영역 안에는 <router-view /> 태그를 삽입하여 사용자가 클릭하는 메뉴에 따라 본문 화면만 다이내믹하게 갈아 끼워지도록 설계함.
• 전역 마진 및 너비 리셋 (<style>): 브라우저가 기본으로 가지는 여백을 지우고, 기본 템플릿에 걸려있던 가로폭 제한을 #app { max-width: none !important; }로 강제 해제하여 모니터 끝과 끝을 모두 쓰는 와이드 스크린의 기반을 마련함.
• 유연한 세로 흐름 레이아웃 (<style scoped>): 전체 레이아웃 컨테이너에 display: flex; flex-direction: column;을 적용하고 본문 영역에 flex: 1;을 부여함. 이로 인해 본문 내용이 적을 때는 푸터가 화면 최하단에 딱 붙고, 내용이 길어지면 자연스럽게 세로로 스크롤이 늘어나는 반응형 구조가 완성됨.

---

3. 레이아웃 트러블슈팅 및 해결 방안

① 페이지 이동 시 화면 들썩임 현상 (Layout Shift)

• 현상: 내용이 짧은 페이지와 긴 페이지를 이동할 때마다 우측 세로 스크롤바가 생겼다 사라지며 브라우저 가로 폭이 미세하게 가변되어 화면이 좌우로 덜컥거림.
• 해결 (App.vue 23라인): 글로벌 CSS html 태그에 scrollbar-gutter: stable; 속성 적용. 스크롤바 유무와 관계없이 우측에 투명 공간을 상시 확보하여 레이아웃 밀림 현상을 완전히 차단함.

② 상단 고정 헤더 배치 시 콘텐츠 겹침 현상

• 현상: 상단 메뉴바에 position: fixed를 부여해 상단에 띄우자, 본문 콘텐츠 영역이 헤더 밑으로 파고들어 상단 타이틀 텍스트가 가려짐.
• 해결 (App.vue 42라인): 본문을 감싸는 .main-container에 헤더의 세로 높이인 padding-top: 80px;를 명시적으로 부여하여 본문 콘텐츠를 헤더 아래로 밀어내 정렬함.

③ 현재 머물고 있는 메뉴 자동 하이라이트 활성화

• 현상: 사용자가 클릭하여 현재 진입해 있는 메뉴 글자만 빨간색으로 유지해야 함.
• 해결: Vue Router의 내장 기능을 응용함. 주소창의 URL 주소와 <router-link to="..."> 태그의 경로가 일치하면 시스템이 자동으로 해당 태그에 .router-link-active 클래스를 주입함. CSS에서 이 클래스에 활성화 스타일(color: #ff6b6b; font-weight: 700;)을 설계하여 별도의 스크립트 로직 없이 동적 하이라이트를 구현함

---

핵심 Vue 3 기본 문법 요약

문법 명칭 기능 설명

ref()	반응형 데이터	데이터 변경 시 이를 참조하는 DOM(화면) 요소를 실시간으로 자동 추적하여 갱신하는 기능
{{ }}	보간법 (Interpolation)	HTML 태그 사이에 자바스크립트 변수 값을 그대로 바인딩하여 텍스트로 출력하는 구조
v-bind ( : )	속성 바인딩	HTML 속성(src, class, style 등)에 dynamic한 자바스크립트 변수 및 오브젝트를 연동
**v-if / v-for**	조건부 / 반복 렌더링	조건 만족 시에만 태그를 노출(v-if)하거나, 배열 데이터를 순회해 동일 구조의 태그를 다중 출력(v-for)
v-on ( @ )	이벤트 리스너	사용자 클릭, 키보드 입력 등의 이벤트를 감지하여 지정된 핸들러 함수를 실행 (@click)

 

 

 

실습 페이지 스크린샷