예를 들어, 운영하는 서비스 nav에 중학교, 고등학교 라우터 링크 두 가지가 있다. 이때 중학교를 선택한 상태면 개발자 도구로 중학교 라우터 링크를 살펴볼 때 router-link-active와 router-link-exact-active 두 클래스를 확인할 수 있다.

• router-link-active 선택된 router-link와 이 선택된 router-link path의 상위 router-link 모두에게 class가 붙음.
• router-link-exact-active 선택된 router-link에만 class가 붙음.

클래스 명은 router를 생성할 때 linkActiveClass 옵션을 사용해서 바꿀 수도 있다.

route 이동하는 다른 방법

어떤 기능을 수행한 뒤에 페이지 이동을 코드 상에서 처리하고 싶을 때

...
//$router: router 패키지를 더하면 사용 가능.
//routing 히스토리에 이동할 route 추가.
this.$router.push('/middleschool');
...

router에는 더 다양한 함수들이 많음. 공식 문서 참고해서 필요한 거 가져다 쓰기.

• 참고: Vue - The Complete Guide (w/ Router, Vuex, Composition API) Udemy 강좌

잘못된 내용은 알려주세요.

URL을 바꾸고 다른 항목을 로드하게 도와주는 routing. vue.js는 SPA를 만들기 때문에 URL과 상호작용 하려면 routing을 사용해야 한다. (확실치 않음)

Routing Setting

(1) vue-router 패키지 설치

vue cli로 설치한 프로젝트에 vue-router 패키지 설치.

[프로젝트 위치에서 terminal을 열고 아래 명령어 입력]
npm install --save vue-router

[최신 버전 설치]
npm install --save vue-router@next

(2) 프로젝트 다시 실행

npm run serve

(3) 라우터 사용

이제 프로젝트에 라우터를 등록할 수 있다.

라우터 등록하는 예제를 쉽게 이해하기 위해 프로젝트 예시로 설명.

• 프로젝트 예시 중학교 또는 고등학교를 선택하면 URL이 변경되고, 중학교를 선택했을 때는 중학생 리스트를, 고등학교를 선택했을 때는 고등학생 리스트를 보여준다.
  • https://서비스주소.../middleschool: 중학생 리스트
  • https://서비스주소.../highschool: 고등학생 리스트

main.js

router 생성, route 등록, app에 router 사용 등록.

import { createApp } from 'vue';
//vue-router 패키지에서 createRouter, createWebHistory 함수를 import한다.
import { createRouter, createWebHistory } from 'vue-router';

import App from './App.vue';
//router로 이동했을 때 띄울 컴포넌트를 import한다.
import MiddleSchool from './components/MiddleSchool.vue';    //중학생 리스트
import HighSchool from './components/HighSchool.vue';    //고등학생 리스트

//router를 만들고, 어떤 URL을 사용할 것인지, 각 URL에 어떤 component를 띄울건지 알려준다.
//history: routing 히스토리를 어떻게 관리할지 router에게 알려주는 것이다.
//createWebHistory: 브라우저가 사용하는 거 그대로 쓰라는 옵션.

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/middleschool', component: MiddleSchool },
    { path: '/highschool', component: HighSchool }
  ]
});

const app = createApp(App);

//vue app이 router를 사용하도록 한다.
app.use(router);

app.mount('#app');

App.vue

component가 나타날 자리 알려준다.

<template>
  <the-navigation></the-navigation>
  <main>
    <!-- router-view 태그를 사용한 곳에 component가 나타난다. -->
    <router-view></router-view>
  </main>
</template>

TheNavigation.vue

탭에 URL 링크를 연결한다.

<template>
  <header>
    <nav>
      <ul>
        <li>
          <router-link to="/middleschool">중학교</router-link>
        </li>
        <li>
          <router-link to="/highschool">고등학교</router-link>
        </li>
      </ul>
    </nav>
  </header>
</template>

이후 vue가 router-link를 a 링크로 만듦.

• 참고: Vue - The Complete Guide (w/ Router, Vuex, Composition API) Udemy 강좌

잘못된 내용은 알려주세요.

컴포넌트 사용 범위

_글로벌 컴포넌트_로 등록하면 모든 파일에서 컴포넌트를 사용할 수 있고, _로컬 컴포넌트_로 등록하면 컴포넌트를 등록한 파일에서만 해당 컴포넌트를 사용할 수 있다.

컴포넌트 등록 예시

(1) 글로벌 컴포넌트 등록

search-bar 컴포넌트를 글로벌 등록할 때 main.js

import { createApp } from "vue";
import App from "./App.vue";

//import 글로벌컴포넌트이름 from "글로벌컴포넌트위치";
import SearchBar from "./components/SearchBar.vue";

const app = createApp(App);

//app에 내장된 component 함수를 사용
//첫 번째 인자: html코드에서 컴포넌트를 사용할 때 쓸 태그 이름
//두 번째 인자: 글로벌 컴포넌트 이름
app.component("search-bar", SearchBar);

app.mount("#app");

(2) 로컬 컴포넌트 등록

search-bar 컴포넌트를 로컬 등록할 때 app.vue

<template>
    <search-bar></search-bar>
</template>

<script>
import SearchBar from "./components/SearchBar.vue";

export default {
  components: {    //components 속성에 로컬 컴포넌트로 등록할 컴포넌트 이름을 넣는다.
    SearchBar,    // = SearchBar: SearchBar -> 모던 자바스크립트 문법
  },
};
</script>

component 등록할 때 components 속성에 넘겨주는 객체 안에 html에서 사용할 컴포넌트 이름: 컴포넌트 이름 문법으로 넘겨주어야 하는데(ex. "search-bar": SearchBar), vue에서는 SearchBar: SearchBar라고 넘겨주어도 알아서 변형해서 잘 사용하기 때문에 위와 같이 써도 문제 없다.

HTML(HyperText Markup Language)?

html은 hypertext markup language다. 각 단어의 뜻을 해석해서 보면 이해하기 쉽다. hypertext: 다른 곳으로 이동 가능한 텍스트 markup: 특정한 기호로 표시(mark)한 것 language: 언어

정리하면, html은 다른 곳으로 이동 가능한 텍스트가 있는 문서를 특정한 표시를 해서 만들 수 있는 언어이다. 웹페이지의 정보와 구조를 나타내는데 사용한다.

1. html 기본 문법

(1) 태그, 요소

• 아래 코드에서 태그와 요소 구분

  <내용>
  사과는 <글씨두껍게>정말</글씨두껍게> 맛있다
  <줄구분하기/>
  바나나는 <글씨기울이기>더</글씨기울이기> 맛있다
  </내용>

• 태그 : <와 >을 포함한 감싸진 부분을 말한다. (<글씨두껍게>, </글씨두껍게>, <줄구분하기/>, <글씨기울이기>, </글씨기울이기>) 여기서 <글씨두껍게> 태그와 <글씨기울이기> 태그는 글씨를 꾸미는 효과를 시작할 위치와 끝날 위치를 알려주기 위해서 시작할 때 태그 하나를 사용하고, 끝날 때 /를 앞부분에 추가한 태그를 사용한다. 시작할 때 사용하는 태그를 시작 태그, 끝날 위치를 알려줄 때 사용하는 태그를 종료 태그라고 부른다. <줄구분하기> 태그 같이 들어갈 내용이 없어 시작과 끝을 지정해줄 필요가 없는 태그는 한 번만 작성해주면 된다. 시작과 끝 표시를 위해 두 번씩 작성해야 하는 태그들과 구분하기 위해 태그를 >로 닫기 전에 /을 써주며, 이러한 태그를 빈 태그(단일 태그)라고 부른다.

  위의 태그들은 html에서 사용하기로 약속한 태그들이 아니기 때문에 컴퓨터가 이해하지 못한다. 웹페이지를 만들고 싶으면 컴퓨터가 이해할 수 있는 태그들을 사용해야 한다. 글씨를 두껍게 하고 싶다면, <글씨두껍게>태그가 아니라 컴퓨터가 이해할 수 있는 <strong>태그를 사용해야 한다.

  - 태그의 종류(semantic & non-semantic) html에는 다양한 태그들이 있다. 그 중 컴퓨터가 태그를 보고 어떤 용도로 사용될지 알 수 있는 태그는 시멘틱(semantic) 태그, 용도를 명확히 알 수 없는 태그는 non-semantic태그라고 부른다. 대부분이 시멘틱 태그이며, 대표적인 논 시멘틱 태그에는 <span>태그와 <div>태그가 있다.

  위에서 글씨를 두껍게 만들기 위해 <strong>태그를 사용했던 것처럼 태그의 본래 용도에 맞게 의미론적으로 사용하는 것은 굉장히 중요하다.

• 요소 : 요소는 시작 태그, 내용, 끝 태그로 구성된 부분을 말한다. (<내용> 사과는 <글씨두껍게>정말</글씨두껍게> 맛있다 <줄구분하기/> 바나나는 <글씨기울이기>더</글씨기울이기> 맛있다 </내용>, <글씨두껍게>정말</글씨두껍게>, <글씨기울이기>더</글씨기울이기>)

(2) 속성

속성은 태그에 추가적인 정보를 주어야할 경우 사용하는 것이다. 예를 들어 이미지를 웹페이지에 넣고 싶다면 이미지 태그를 사용한 뒤에 사용할 이미지에 대한 정보(이미지의 위치)를 같이 알려주어야 한다. 이 때, 이미지의 위치 정보를 알려줄 수 있는 src속성에 이미지 위치 정보 값을 속성값으로 알려주면 된다. 속성값은 따옴표로 감싸주어야 한다.

<이미지 주소="이미지가 위치한 주소\이미지 이름"/>
<!--이미지: 태그 이름-->
<!--주소: 속성 이름-->
<!--"c:\Users\...\banana.jpg": 이미지 위치 정보 값-->
<img src="C:\Users\username\OneDrive\바탕 화면\banana.jpg"/>

(3) 요소 중첩

하나의 태그 안에는 다른 태그가 들어있을 수도 있고, 다른 태그가 이 태그를 감싸고 있을 수도 있다.

<!--외할아버지 태그는 엄마 태그를 감싸고 있고 엄마 태그는 아들 태그와 딸 태그를 감싸고 있다.-->
<외할아버지>
  <엄마>
    <아들></아들>
    <딸></딸>
  </엄마>
</외할아버지>

다른 태그를 감싸고 있는 태그를 부모 태그라고 부르고, 다른 태그 안에 들어있는 태그를 자식 태그라고 한다. 엄마태그를 기준으로 부모 태그는 <외할아버지>태그이며, 자식 태그는 <아들>, <딸>태그이다. 부모와 자식의 관계는 상대적이다.

<list>태그나 <table>태그 같이 부모와 자식의 관계가 정해져 있는 태그들도 있다.

2. html 문서 기본 구조

<!DOCTYPE html>
<html>
 <head>
   <!--웹페이지의 본문에 들어갈 내용 이외의 추가 정보를 넣는 곳이다-->
 </head>
 <body>
   <!--웹페이지의 본문 내용이 들어가는 곳이다-->
 </body>
</html>

(1) !DOCTYPE html

html은 처음 등장했던 1993년 이후에도 계속해서 발전해왔기 때문에 다양한 버전이 존재한다. html의 각 버전은 조금씩 다른 특징을 가지고 있기 때문에, 웹 페이지를 화면 상에 출력하기 위해 브라우저가 html 코드를 해석할 때는 브라우저가 해당 코드의 html 버전을 아는 것이 좋다. 사용하는 html버전을 알려주기 위해서는 html문서 맨 처음에 사용한 html 버전을 알려줄 수 있는 태그를 작성하면 되는데, 이를 문서 형식 정의(DTD) 태그라고 한다. 가장 최근에 나온 html5같은 경우에는 문서 맨 처음에 <!DOCTYPE html>를 작성해주면 된다.

(2) head, body 태그

웹페이지를 만들 때는 웹페이지의 화면에 보여지는 내용뿐만 아니라 웹페이지의 탭 제목 등 추가적인 정보를 제공해주어야 할 때가 많다. 이러한 태그들은 보통 <head>태그 안에 넣어 정리하고, 그 외의 본문 내용과 관련된 태그들은 <body>태그 안에 들어간다. 이렇게 head태그와 body태그를 사용하면 문서를 최대한 구조화시켜 웹페이지 소스를 잘 이해할 수 있다.

• 참고 내용:

  - [생활코딩 WEB1 - HTML & Internet (처음부터 웹사이트 완성까지)](https://opentutorials.org/course/3084)
  - [poiemaweb HTML5 (1,2,3,4 lesson)](https://poiemaweb.com/)
  - [위키백과 - 하이퍼텍스트](https://ko.wikipedia.org/wiki/%ED%95%98%EC%9D%B4%ED%8D%BC%ED%85%8D%EC%8A%A4%ED%8A%B8)
  - [위키백과 - 마크업](https://ko.wikipedia.org/wiki/%ED%95%98%EC%9D%B4%ED%8D%BC%ED%85%8D%EC%8A%A4%ED%8A%B8)
  - [DOCTYPE html 선언 의미 및 버전별 허용 태그 표](https://dasima.xyz/doctype-html/)