Vue to CodingApple

코딩애플 강의를 통해 배운 Vue를 정리한 글입니다.

📅 작성일

2025년 2월 20일

---

📌 목차

1. 소개
2. part2-1 : Blog 프로젝트 생성, Bootstrap
3. part2-2 : 블로그 글목록을 만들어보자 & 데이터바인딩, props 복습
4. part2-3 : vue-router 설치와 기본 라우팅
5. part2-4 : 상세페이지 200만개 만들기 (URL 파라미터)
6. part2-5 : 심심할까봐 소개하는 Nested routes & push 함수
7. part2-6 : 라우터 나머지 기능들 (hash mode, guards)
8. part2-7 : 만든 Vue 사이트 build & Github Pages로 배포하려면
9. 참고 자료

---

📝 소개

Part 2 : blog 레이아웃과 라우터

---

part2-1

🔹 bootstrap 설치

• 설치사이트

npm install bootstrap@5

# main.js
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

---

part2-2

🔹 복습하는 내용

---

part2-3

🔹 라우터 설치 및 적용

// 1) vue-router 설치
// 터미널에서 실행
npm install vue-router@4

// 2) router.js 코드 설정
import { createWebHistory, createRouter } from "vue-router";

const routes = [
  {
    path: "/경로",
    component: import해온 컴포넌트,
  }
];

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

export default router;

// 3) main.js에서 router 추가
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

// 4) 컴포넌트에서 사용
// <router-link to="/경로">링크</router-link>
// <router-view /> 사용 가능 (props 전송 가능)

---

part2-4

🔹 라우부트스트랩을 설치 시 사용하기 좋은것

• mt mb ml 등 마진과 패딩을 클래스명 만으로 줄 수 있다

🔹 상세페이지

• path에 적은 경로 에 /:id를 붙여주면됨

//id에는 정규식을 사용할 수 있다
*이라는것도 있음 이건 여러개 반복
"/list/:id";

🔹 파라미터

• $route.params는 파라미터 자리에 기입된것을 다 볼 수 있다

🔹 404페이지

• /:anything(.*) 기본형식
• 모든 문자라는 정규식
• 이건 무조건 제일 마지막

---

part2-5

🔹 Nested routes

• router.js에서 children을 생성

{
    path: "/detail/:id",
    component: Detail,
    children: [
        {
            path: "author",
            component: Author,
        },
        {
            path: "comment",
            component: Comment,
        }
    ]
}

🔹 push

• $router.push('/경로') 를 통해 화면 이동이 가능하다
• 그 외에도 go back 등 많은 기능이 있는데 그거는 필요할떄 찾기

---

part2-6

🔹 카피본 확인

---

part2-7

🔹 처음 경로를 다르게 하고싶다면

1. 처음 경로를 다르게 하고싶다면 (App.vue가아닌 다른 페이지를 호출)
   vue.config에서 publicPath 공간에 /님이만든 repository이름을 적어주면됩니다

   이거 그 외 또 설정하는거 있는데 그거는 내일 보자고!!
   그외 설정은 history: createWebHistory(process.env.BASE_URL), 이렇게 적어줘야한다

   그리고 만약 그냥 APP.vue로 배포를 한다면

   const { defineConfig } = require("@vue/cli-service");
   
   module.exports = defineConfig({
     transpileDependencies: true,
     publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
   });

   이렇게 경로를 바꿔줘야한다

---

📚 참고 자료

• 코딩애플 강의
• 내 깃허브