첫 구조의 경우에는 Vue를 익히면서 컴포넌트 구조를 구성했다.

라우터를 사용하여 게시판으로 접근하고 내부에서 서브 메뉴에 따라서 중첩 라우터를 사용하여 페이지에 접근했다. 그리고 게시글 컴포넌트를 v-for을 사용해서 인스턴스를 반복하여 사용자에게 게시글을 보여주게 했다.

구조를 위해 적용한 내용

라우팅

요청에 따른 페이지가 제공되는 것은 옛날 이야기이고 대부분 페이지가 1개인 SPA(Single Page Application)인 지금 필요한 정보들을 받아 한 페이지에 랜더링하여 다양한 정보를 하나의 페이지에서 보여주게 된다.

그런 SPA에서도 단순히 하나의 역할을 하는 페이지만 존재하는 것은 아니기 때문에 페이지가 이동함에 따라 필요한 다른 컴포넌트를 보여줘야 한다. 여기서 사용되는 것이 라우팅이다. 프론트에서 라우팅(Routing)이란 어떤 주소에 대해서 어떤 화면을 보여줄지 연결하는 작업을 말한다.

Vue에서는 Vue Router를 이용해서 라우팅을 구현한다. 라우터를 보여줄 컴포넌트에 아래와 같이 보여줄 부분을 만든다.

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

이후 파일에 Vue router 객체를 생성하고 route 해줄 목록을 인자로 넣어준다. 여기서 인자로 children 속성을 사용하여 라우팅할 목록 객체 아래에 라우팅 목록을 넣을 수 있는데, 이렇게 사용하면 URL의 계층구조(’/’)에 따라서 다른 내용이 보이도록 중첩 라우팅을 할 수 있다. 이 경우에는 처음 라우팅 목록에 있는 component 내의 router-view에 보인다.

import * as VueRouter from "vue-router";
import CommunityPage from "../pages/CommunityPage";
import DefaultLayout from "../layouts/DefaultLayout";

const routes = [
	{
		name: "community",
		path: "/community",
		component: CommunityPage,
	},
];

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

export default router;

루트 컴포넌트를 생성하면서 만들어준 Vue router 객체를 사용하도록 등록한다.

const app = createApp(App);

app.use(router);

app.mount("#app");

이후 클릭하면 주소를 변경할 객체에 router-link 태그를 통해 작성해준다.

...
<li>
		<router-link to="/search">공고검색</router-link>
</li>
...

태그에 해당하는 부분을 클릭하면 /search로 이동하게 된다.

여기서 사용한 router-link의 경우에는 렌더링을 하면 <a> 태그로 렌더링된다. 하지만 <a>는 외부 링크, 즉 새로고침을 동반해서 주소를 이동하는 대신에 router-link의 경우에는 새로고침 없이 내부 링크로 이동하게 된다.

v-for [리스트 렌더링]

비슷한, 동일한 컴포넌트가 반복되는 경우에는 데이터의 목록을 가지고 비슷한 컴포넌트를 구성할 수 있다.

<div
			class="article"
			v-for="(board, index) in boards"
			:key="board.id"
		>
	...
</div>