html 코드를 vue 코드로 변환하기

문제 상황

다른 라이브러리 사이트에서 좋은 코드를 발견해서 사용하려고 한다.

그런데 그 코드가 html으로 되어 있고, 나는 vue 프로젝트에 사용해야 하는 경우 생긴 문제이다.

html 코드를 vue에 바로 넣으면 오류가 발생한다!

vue 형식에 맞춰 넣어주어야 한다.

문제 해결

변환 공식

HTML/CSS/JS	Vue3
<body> 태그의 내용들 (CDN 등 라이브러리 연결 코드 제외)	vue 파일의 <template> 태그 안에 삽입
CDN 등 라이브러리 연결 코드 중 CSS + 아이콘(font awesome 라이브러리 등)	index.html 파일의 <head> 태그 안에 삽입
CDN 등 라이브러리 연결 코드 중 JS 관련 코드	index.html 파일의 <body> 태그 제일 밑에 삽입

- html 코드의 <body> 태그 안에 있는 요소 중 <script src ~></script> 부분을 제외한 모든 부분은 vue의 <template> 태그 안에 넣는다.

- html 코드의 <head> 태그와 <body> 안에 있는 요소 중 CSS나 아이콘 관련하여 가져오는 코드는 vue의 index.html 파일에서 <head> 태그 안에 넣는다. (CSS 파일은 웹페이지의 스타일을 정의하므로, HTML이 렌더링되기 전에 먼저 로드될 필요가 있다. 그래서 <head> 태그에 넣는다.)

주의 : 아이콘 관련 라이브러리는 JS 관련 코드더라도 vue의 index.html 파일에서 <head> 태그 안에 넣는다.

- html 코드의 <head> 태그와 <body> 안에 있는 요소 중 JS 관련하여 가져오는 코드는 vue의 index.html 파일에서 <body> 태그 제일 밑에 넣는다. ( JS 파일은 일반적으로 <body> 태그 끝에 두어 모든 HTML 요소가 먼저 로드된 후에 스크립트가 실행되도록 하기 위함이다. + JS는 렌더링 차단을 할 수 있기 때문에 렌더링 차단 방지를 위해 <body>의 제일 마지막 부분에 둔다.)

예시

<!-- html/css/js 코드 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    
</head>
<body>
    <!-- Addon on the left -->
<div class="input-group">
    <span class="input-group-text">
        <i class="fa-solid fa-lock"></i>
    </span>
    <input type="password" class="form-control" placeholder="Password">
</div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  <script src="https://kit.fontawesome.com/a3b1c9d9f8.js" crossorigin="anonymous"></script>
</body>
</html>

1단계 : <body> 태그의 내용들 (CDN 등 라이브러리 연결 코드 제외)을 vue 파일의 태그 안에 삽입

<!-- App.vue -->

<template>
<!-- (이 부분이 추가됨) -->
<div class="input-group">
  <span class="input-group-text">
    <i class="fa-solid fa-lock"></i>
  </span>
  <input type="password" class="form-control" placeholder="Password">
</div>
</template>

<script setup>
</script>

2단계 : CDN 등 라이브러리 연결 코드 중 CSS + 아이콘(font awesome 라이브러리 등)을 index.html 파일의 <head> 태그 안에 삽입

- 주의 : 아이콘 관련 라이브러리는 JS 관련 코드더라도 vue의 index.html 파일에서 태그 안에 넣는다.

- 라이브러리 연결 코드에서 끝 부분을 보면 .css, .js 을 보고 유추할 수 있다.

<!-- vue의 index.html -->

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>finder + font awesome</title>
        <!-- Bootstrap CSS (이 부분이 추가됨) -->
        <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
        crossorigin="anonymous"
      />
      <!-- FontAwesome JS (이 부분이 추가됨) -->
      <script
        src="https://kit.fontawesome.com/a3b1c9d9f8.js"
        crossorigin="anonymous"
      ></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
  </body>
</html>

3단계 : CDN 등 라이브러리 연결 코드 중 JS 관련 코드를 index.html 파일의 태그 제일 밑에 삽입

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>finder + font awesome</title>
        <!-- Bootstrap CSS -->
        <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
        crossorigin="anonymous"
      />
      <!-- FontAwesome CSS -->
      <script
        src="https://kit.fontawesome.com/a3b1c9d9f8.js"
        crossorigin="anonymous"
      ></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- Bootstrap JS (이 부분이 추가됨) --> 
    <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
    crossorigin="anonymous"
    ></script>
  </body>
</html>