오늘의 Nuxt
nuxt.config.js
Nuxt.js의 사용자 정의 설정을 포함하는 파일이다.
전역에서 사용될 head, script, css 태그들을 설정하는 곳이다.
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: "nuxt",
htmlAttrs: {
lang: "ko",
},
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "" },
{ name: "format-detection", content: "telephone=no" },
],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{
rel: "stylesheet",
href: "https://use.fontawesome.com/releases/v5.15.4/css/all.css",
integrity:
"sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm",
crossorigin: "anonymous",
},
],
script: [
{
src: "https://developers.kakao.com/sdk/js/kakao.js",
},
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: ["@/assets/css/reset.css", "@/assets/css/styles.css"],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/eslint
"@nuxtjs/eslint-module",
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
"@nuxtjs/axios",
],
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {},
};오늘의 문제점
head 태그 안에 script 태그가 객체로 선언되었기 때문에 name과 value의 형태로 넣어야 했다.
script: [ { name : "value" } ]<head> <script name="value"></script> </head>
하지만 내가 넣어야하는 것은 스트립트 태그 안에 내용을 넣어야했다. 객체 형태를 유지해야 했기 때문에 이리저리 헤맸는데 알고 보니 엄청 간단한 문제였다.
바로 innerHTML을 이용하는 것!!!
script: [ { name : "value" }, { innerHTML : "텍스트" } ]<head> <script name="value"></script> <script>텍스트</script> </head>
간단한 문제 해결 끝~
주니어 개발자의 기록