blog17 : 글 작성화면 만들기 1 (기초)

1. 필요 없는 디렉토리 및 파일 삭제

 

AboutView.vue

icons 디렉토리

HelloWorld.vue

TheWelcome.vue

Welcomeitem.vue

 

위 파일 및 디렉토리 삭제

 

 

2. 불필요한 코드 삭제 및 주석처리

 

router/index.ts 에서 about 주석처리: about을 사용하지 않을 것이므로 router에서 주석처리한다. 삭제해도 무방하다.

이외에도 AboutView.vue를 사용하는 다른 파일들에서 해당 부분을 주석처리 및 삭제하였다.

// index.ts
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/", //루트 경로라면
      name: "home", //home 뷰를 불러온다.
      component: HomeView,
    },
    // {
    //   path: "/about", //about 경로라면
    //   name: "about", //about 뷰를 불러온다.
    //   // route level code-splitting
    //   // this generates a separate chunk (About.[hash].js) for this route
    //   // which is lazy-loaded when the route is visited.
    //   component: () => import("../views/AboutView.vue"),
    // },
  ],
});

export default router;

 

서버 띄우기

 

 

페이지 렌더링에 필요한 컴포넌트가 없어서 발생하는 오류.(icons디렉토리를 지우면서 IconSupport.vue가 사라졌다.)

위와 같이 오류가 발생할 수 있다. 해당 파일을 삭제하였는데, 해당파일을 사용하는 코드를 지우지 않아 오류가 발생한 것이다. 따라서 파일을 사용하는 코드를 주석 또는 삭제처리 할 필요가 있다.

 

저기서 해당 파일의 경로(위에서는 파란 글씨)를 클릭하면 소스코드 내에서 해당 파일을 호출하는 부분으로 이동한다. (내 경우 intellij 사용).

 

전부 수정하였더니 위와 같이 Home 하나만 남았다. 가운데 정렬 되는 이유는 아직 모르겠다.

 

Home ==> "/"로 이동

 

 

 

3. 새로운 메뉴 및 view 만들어주기

메인 화면에서 "글 작성"을 누르면 "/write" 경로로 이동하는 view를 만들어 준다.

 

3.1 페이지에 메뉴 만들고 경로 명시

App.vue에 "글 작성' 메뉴를 만들고 경로 "/write" 를 명시한다.

  <!--App.vue-->
  <script setup lang="ts">
  import { RouterLink, RouterView } from "vue-router";
  // import HelloWorld from "./components/HelloWorld.vue";
  </script>

  <template>
    <header>
  <!--    <img-->
  <!--      alt="Vue logo"-->
  <!--      class="logo"-->
  <!--      src="@/assets/logo.svg"-->
  <!--      width="125"-->
  <!--      height="125"-->
  <!--    />-->
<!--      <div class="wrapper">-->
<!--        <HelloWorld msg="You did it!" />-->

        <nav>
          <RouterLink to="/">Home</RouterLink>
          <RouterLink to="/write">글 작성</RouterLink> <!-- 글 작성  -->
        </nav>
<!--      </div>-->
    </header>

    <RouterView />
  </template>

  <style scoped>

  </style>

 

3.2 Router 파일에서 라우팅 해주기

현재는 index.ts 파일 한 군데에서 라우팅을 해주고 있다. 따라서 index.ts 파일에서 writeView를 라우팅 해준다.

// index.ts
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import WriteView from "../views/WriteView.vue" //경로를 적어줌으로써 import 필요

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/", //루트 경로라면
      name: "home", //home 뷰를 불러온다.
      component: HomeView,
    },
    {
      path: "/write",
      name: "write",
      component : WriteView //import가 필요하다.
    }

    // {
    //   path: "/about", //about 경로라면
    //   name: "about", //about 뷰를 불러온다.
    //   // route level code-splitting
    //   // this generates a separate chunk (About.[hash].js) for this route
    //   // which is lazy-loaded when the route is visited.
    //   component: () => import("../views/AboutView.vue"),
    // },
  ],
});

export default router;

 

3.3 경로대로 라우팅 될 수 있도록 Vue 컴포넌트 생성

위에서는 "/write" 주소로 접근했을 때 WriteView로 라우팅 된다.

따라서 WriteView.vue 파일이 필요하다.

 

3.1 ~ 3.3은 위처럼 연결되기만 하면 된다. 따라서 순서는 상관 없다.

 

화면 가운데 Home 링크 옆에 "글 작성" 링크가 생겼다. 저걸 누르면 "/write"로 이동한다.