[Vue.js] 라우터 설치하고, 배경색 바꿔보기.

[ 3. Vue.js 설치하기 ]

설치 안 하신 분들을 위해 남겨두겠습니다

[Spring] (MAC, IntelliJ, vue.js) Spring boot로 프로젝트 만들고, vue.js 설치와 프로젝트 열기.

이번에 만들 웹사이트는vue.js를 사용할 것이다🐠 1. 만들고자 하는 것은? 회원가입 웹사이트를 만들고자 한다. Vue.js를 사용하여 프론트 공부를 하면서, 간단한 회원가입과 로그인을 수행하는 웹

post-this.tistory.com

참고로 Vue.js에 대해서 잘 모릅니다.

아무거나 막 해보는 중이고 옳은 정보인지 저도 모릅니다!

라우터를 설치하고
배경색을 바꿔볼 것이다.

1. 프로젝트 생성하기

□ Vue.js 선택하고, practice01이란 이름을 붙여주기

Vue.js를 선택하여 프로젝트를 만들어도 npm을 설치하면서 결국 Vite 기반으로 프로젝트가 동작하는 것 같다.

그래서 Vite로 만들어도 똑같을 것 같긴한데... 잘 모르니까 일단은 패스하겠다. (다음에 한 번 도전해보기로!)

□ npm 설치하기

오른쪽 하단에 'npm install'이 나타난다. 이 창의 버튼을 눌러서 설치하면 알아서 설치된다.

만약 나타나지 않는다면, 터미널에 가서 왼쪽에 써있는 초록 글씨대로 수행하면 된다. 터미널 못 찾겠으면 아래 사진을 보세요, 여러뷴.

(캡쳐해서 보여줄려고 practice02로 새로 만들었다)

□ npm run dev

터미널에 들어가서 'npm run dev' 명령어를 입력하여 제대로 실행되는지 확인하자.

제대로 실행이 된다면, http://localhost:5173 URL이 나타난다.

참고로 저 파란버튼이 터미널 버튼이다.

□ http://localhost:5173

□ 쓸모없는 파일 지워버리기

icons 디렉토리 없앴고, components에 들어있는 vue파일도 없앴다.

그리고 App.vue의 코드도 수정했다. assets는 무서워서 안건들였다.

<script setup>

</script>

<template>

</template>

<style scoped>

</style>

2. 라우터 설치하기.

□ npm install vue-router

npm install vue-router를 터미널에 적어 라우터를 설치합니다.

아래 링크 들어가면 npm 말고 yarn 외 다양한 설치방법이 있으니 참고하세요.

Vue Router | The official Router for Vue.js

The official Router for Vue.js

router.vuejs.org

□ router 디렉토리 만들고, index.js 파일 만들기

src 하위에 디렉토리 router를 만듭니다. 그리고 router 디렉토리 안에 index.js 파일을 만들면 됩니다.

□ views 디렉토리 만들고, MainView.vue 파일 만들기

□ index.js 파일에 코드 작성하기.

import { createRouter, createWebHistory } from 'vue-router'
import MainView from '../views/MainView.vue'

const routes = [
    { path: '/main',
        name: 'Main',
        component: MainView
    },
]

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

export default router

http://localhost:5173/main 경로로 들어가면 화면이 보이도록 설계할 것이다. /main을 MainView.vue와 연결한다. const 키워드는 재선언이 불가능하다. (자바로 따지면 final 같은 존재인 것 같은데, 다른 점이 있다면 const는 변수에만 사용하고 final은 변수 외에 클래스와 메서드에 붙이는게 가능하다는 점이다.) 그렇게 routes에 const를 붙여 넣어둔 정보들이 외부에서 변동되지 않도록 만든다. 맨 아래 코드에 export default가 있는데 export는 import와 반대로 변수, 함수, 객체, 클래스 등을 외부에 보내는 역할을 하는 것이고, default는 하나의 파일에 개체 하나만 선언되어있는 모듈을 내보낼때 사용한다. 개체가 여러개 있다면 default는 사용하지 않고 export만 적으면 된다.

□ main.js 코드 수정하기

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './assets/main.css'

const app = createApp(App)

app.use(router)
app.mount('#app')

app.use로 router를 연결했고, app.mount를 시켰다. app.mount('#app')은 Vue 애플리케이션을 HTML에 있는 id가 'app'인 요소에 삽입하겠다는 의미이다. (내가 만든 것들 dom에 넣어라 라는 듯?) 여기서 Dom은 웹 페이지를 자바스크립트가 다룰 수 있는 개체(트리 구조)로 만든 것이다.

아래의 코드가 있다고 가정하자.
<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <h1>Hello!</h1>
    </div>
  </body>
</html>
DOM으로 바꿔보겠다.
Document
 └─ html
     └─ body
         └─ div (id="app")
             └─ h1 ("Hello!")

□ App.vue 코드 추가하기
<router-view/> 추가한다.

<script setup>

</script>

<template>
  <router-view/>
</template>

<style scoped>

</style>

<router-view/>는 vue-router 라이브러리를 설치하면서 자동으로 제공된 컴포넌트다. npm install vue-router하면서 자동으로 쓸 수 있도록 내장되었다. <router-view/>는 현재 주소에 따라 템플릿이 바뀌도록 한다. /main 경로가 들어오면 이 경로에 맞는 템플릿이 들어가는 것이다.

3. 배경색 바꾸기.

□ MainView.vue

<script>

</script>

<template>
  <div class="main-view">
  </div>
</template>

<style scoped>
.main-view {
  position: relative;
  width:  100vw;
  height: 100vh;
  background-color: lemonchiffon;
}


</style>

template는 레이아웃을 구성하며 화면을 담당한다. script는 동작을 담당한다. 컴포넌트의 상태와 행동을 정의하는데, import와 export도 넣고 데이터, 함수 등도 넣는다. <style>은 디자인을 담당한다. scoped가 붙으면 이 파일에만 스타일이 적용된다는 뜻이다.

template에 전체화면을 담당할 main-view를 만들었다. 그리고 style에서 너비와 높이를 100vw, 100vh라고 해줬다. 처음에는 100%라고 해줬는데 적용이 안됐다. 무슨 차이가 있는걸까? vw(vh)는 브라우저 화면의 너비(혹은 높이)를 100등분 한 것 중 몇칸이냐는 뜻이다. 만약 1vw(vh)라고 적었으면 100분의 1로 1%를 의미한다. % 단위는 부모 요소의 크기를 기준으로 몇 %인지 나타낸다. 부모 요소의 크기에 따라 실제 값이 달라지게 되는 것이다. background-color로 배경색을 바꿔보았다.

□ 결과

아래에 출처를 남겨두겠습니다.
블로그엔 제가 최대한 이해한 내용까지만 적는거라
출처에 들어가시면 더 많은 내용이 있어 공부하시는데 도움되실겁니다.

🪽

틀린 내용이 있다면 댓글로 알려주세요

- 문법

템플릿 문법 | Vue.js

v3-docs.vuejs-korea.org

- 라우터 설치

vue-router 설치부터 환경설정 및 사용방법

목차1. router 설치2. router 설정3. router 예제 1. router 설치 (yarn , npm) yarn 설치yarn add vue-router@4 npm 설치npm install vue-router@4 참고 : https://router.vuejs.org/installation.html 2. router 설정router를 사용하기 위해 3개

icea.tistory.com

- const

변수 총정리 1. var let const와 선언,할당,범위 - 코딩애플 온라인 강좌

0:00 var let const로 변수만들어 쓰는 법 1:30 선언이라는 특징 2:48 할당이라는 특징 4:25 재할당 불가능한 불변의 Object를 만들려면 6:52 존재범위라는 특징 10:10 변수나 함수 선언의 Hoisting 현상

codingapple.com

- mount

[React] Mount, Update, Unmount

[React] Mount, Update, Unmount React 컴포넌트의 라이프사이클은 컴포넌트가 마운트(mount)될 때, 업데이트(update)될 때, 그리고 언마운트(unmount)될 때 각각의 단계에서 발생하는 일련의 과정입니

y-chyachya.tistory.com

- export default

[JS] export, export default의 차이점

0. 개요 자바스크립트를 사용하다보면 라이브러리나 내가 만든 모듈을 만들고 가져올 때 import/export 를 자주 사용한다. 그런데 무의식적으로 export, export default 를 번갈아 가며 사용할 때가 있다.

velog.io

'🌵 Vue.js' 카테고리의 다른 글

[Vue.js] :hover를 사용해서 버튼에 마우스 커서를 대면 색반전 시키기. (1)	2025.08.04
[Vue.js] 버튼 만들고, 버튼 누르면 텍스트 나타내기. (6)	2025.07.27
[Vue.js] 글씨체 적용하기. (눈누) (2)	2025.07.24
[Vue.js] transform: translate로 텍스트 중앙에 배치하기. (6)	2025.07.23
[Vue.js] 배경에 나타나는 검은색 테두리(?) 없애기. (0)	2025.07.22

🌊 ._.sori🪽

[Vue.js] 라우터 설치하고, 배경색 바꿔보기.

1. 프로젝트 생성하기

2. 라우터 설치하기.

3. 배경색 바꾸기.

'🌵 Vue.js' 카테고리의 다른 글

티스토리툴바

[Vue.js] 라우터 설치하고, 배경색 바꿔보기.

1. 프로젝트 생성하기

2. 라우터 설치하기.

3. 배경색 바꾸기.

'🌵 Vue.js' 카테고리의 다른 글

관련글

티스토리툴바