zungssam9813

<p>Nuxt2 처럼 eslint 와 prettier 관련 패키지를 추가하고 환경 설정을 해서 해결하였습니다.</p><p>설치한 패키지는 아래와 같습니다. 일단 Typescript는 사용하지 않아서 관련 패키지는 제외하였습니다.</p><pre><code>"devDependencies": {
    "eslint": "^8.23.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-nuxt": "^3.2.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.4.0",
    "nuxt": "3.0.0-rc.8",
    "prettier": "^2.7.1",
    "vite-plugin-eslint": "^1.8.1"
  }</code></pre><p></p><p>nuxt.config.ts</p><pre><code>import { defineNuxtConfig } from 'nuxt';
import eslintPlugin from 'vite-plugin-eslint';

export default defineNuxtConfig({
	vite: {
		plugins: [eslintPlugin()],
	},
});</code></pre><p></p><p>.eslintrc.js</p><pre><code>module.exports = {
	root: true,
	env: {
		browser: true,
		node: true,
	},
	extends: ['eslint:recommended', 'plugin:nuxt/recommended', 'plugin:vue/vue3-recommended', 'plugin:prettier/recommended'],
	rules: {
		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
		'no-debug': process.env.NODE_ENV === 'production' ? 'error' : 'off',
		'no-unused-vars': 'off',
		'prettier/prettier': [
			'error',
			{
				singleQuote: true,
				semi: true,
				useTabs: true,
				tabWidth: 4,
				trailingComma: 'all',
				printWidth: 160,
				bracketSpacing: true,
				arrowParens: 'avoid',
				endOfLine: 'auto',
			},
		],
	},
};</code></pre><p></p><p>Nuxt3 는 설정부터 시작해서 바뀐 점이 많네요. 관련해서 강의가 생겼으면 좋겠습니다.</p>

Nuxt 3 에서 eslint, prettier 사용 방법

<p>그냥 설정안했더니 외부모듈(fullpage.js, swiper, gsap 등)이 바벨 폴리필이 적용이 안되어서</p>
<p>검색해보니 별도로 적용을 시켜줘야 한다는것 같아서 빌드 설정을 했습니다.</p>
<p>IE에서 에러도 store.js(nuxt에 포함된 axios 인듯)에서 includes 구문에서 발생하구요.</p>
<p>그런데 뭐가 잘못되었는지 안되더라구요.</p>
<p>이것저것 막 해보다보니 라이브러리도 엉망이구요.ㅜㅜ</p>
<p>주말에 시간내서 답변해주셔서 감사합니다.</p>

babel polyfill 적용관련해서 질문드려도 될까요?

<p>답변주신 내용 참고해서&nbsp;이리저리 해보다보니 IE11에서&nbsp;<strong>store.js</strong> 파일에서 아래와 같은 에러가 발생고 여전히 몇몇 컴포넌트들이 표시되지 않습니다.</p>
<p><strong>SCRIPT438: 개체가 'includes' 속성이나 메서드를 지원하지 않습니다.</strong></p>
<p>nuxt.config.js 파일에 build 항목을 다음과 같이 설정하고,&nbsp;</p>
<div style="color: #a9b7c6; background-color: #2b2b2b; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #9876aa;">build</span>:<span style="color: #9876aa;">&nbsp;</span>{</div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #ffc66d;">extend</span><span style="color: #9876aa;">(</span>config<span style="color: #cc7832;">,</span><span style="color: #9876aa;">&nbsp;</span>ctx<span style="color: #9876aa;">)&nbsp;</span>{</div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>config.<span style="color: #9876aa;">module</span>.<span style="color: #9876aa;">rules</span>.<span style="color: #ffc66d;">push</span>(<span style="color: #9876aa;"></span>{</div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;enforce</span>:<span style="color: #9876aa;">&nbsp;</span><span style="color: #6a8759;">'pre'</span><span style="color: #cc7832;">,</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;test</span>:<span style="color: #6a8759;">&nbsp;/</span><span style="color: #cc7832;">\.</span><span style="color: #ffc66d;">(</span><span style="color: #6a8759;">js</span><span style="color: #dcdcaa;">|</span><span style="color: #6a8759;">vue</span><span style="color: #ffc66d;">)</span><span style="color: #cc7832; font-weight: bold;">$</span><span style="color: #6a8759;">/</span><span style="color: #cc7832;">,</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loader</span>:<span style="color: #9876aa;">&nbsp;</span><span style="color: #6a8759;">'eslint-loader'</span><span style="color: #cc7832;">,</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;exclude</span>:<span style="color: #6a8759;">&nbsp;/</span><span style="color: #ffc66d;">(</span><span style="color: #6a8759;">node_modules</span><span style="color: #ffc66d;">)</span><span style="color: #6a8759;">/</span><span style="color: #cc7832;">,</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options</span>:<span style="color: #9876aa;">&nbsp;</span>{</div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fix</span>:<span style="color: #9876aa;">&nbsp;</span><span style="color: #cc7832; font-weight: bold;">true</span><span style="color: #cc7832;">,</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>}<span style="color: #cc7832;">,</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>})<span style="color: #cc7832;">;</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>}<span style="color: #cc7832;">,</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;babel</span>:<span style="color: #9876aa;">&nbsp;</span>{</div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #ffc66d;">presets</span><span style="color: #9876aa;">(</span>env<span style="color: #cc7832;">,</span><span style="color: #9876aa;">&nbsp;[</span>preset<span style="color: #cc7832;">,</span><span style="color: #9876aa;">&nbsp;</span>options<span style="color: #9876aa;">])&nbsp;</span>{</div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #cc7832; font-weight: bold;">const</span><span style="color: #9876aa;">&nbsp;</span>envTargets<span style="color: #9876aa;">&nbsp;</span><span style="color: #d4d4d4;">=</span><span style="color: #9876aa;">&nbsp;</span>{</div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;client</span>:<span style="color: #9876aa;">&nbsp;</span>{<span style="color: #9876aa;">&nbsp;browsers</span>:<span style="color: #9876aa;">&nbsp;</span>[<span style="color: #6a8759;">'last&nbsp;2&nbsp;versions'</span>]<span style="color: #cc7832;">,</span><span style="color: #9876aa;">&nbsp;ie</span>:<span style="color: #9876aa;">&nbsp;</span><span style="color: #6897bb;">11</span><span style="color: #9876aa;">&nbsp;</span>}<span style="color: #cc7832;">,</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;server</span>:<span style="color: #9876aa;">&nbsp;</span>{<span style="color: #9876aa;">&nbsp;node</span>:<span style="color: #9876aa;">&nbsp;</span><span style="color: #6a8759;">'current'</span><span style="color: #9876aa;">&nbsp;</span>}<span style="color: #cc7832;">,</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>}<span style="color: #cc7832;">;</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #cc7832; font-weight: bold;">return</span><span style="color: #9876aa;">&nbsp;</span>[</div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>[</div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #6a8759;">'@nuxt/babel-preset-app'</span><span style="color: #cc7832;">,</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>{</div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;useBuiltIns</span>:<span style="color: #9876aa;">&nbsp;</span><span style="color: #6a8759;">'entry'</span><span style="color: #cc7832;">,</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;targets</span>:<span style="color: #9876aa;">&nbsp;</span>envTargets[env.<span style="color: #9876aa;">envName</span>]<span style="color: #cc7832;">,</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;corejs</span>:<span style="color: #9876aa;">&nbsp;</span>{<span style="color: #9876aa;">&nbsp;version</span>:<span style="color: #9876aa;">&nbsp;</span><span style="color: #6897bb;">3</span><span style="color: #9876aa;">&nbsp;</span>}<span style="color: #cc7832;">,</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;polyfills</span>:<span style="color: #9876aa;">&nbsp;</span>[<span style="color: #6a8759;">'es.array.iterator'</span><span style="color: #cc7832;">,</span><span style="color: #9876aa;">&nbsp;</span><span style="color: #6a8759;">'es.promise'</span><span style="color: #cc7832;">,</span><span style="color: #9876aa;">&nbsp;</span><span style="color: #6a8759;">'es.object.assign'</span><span style="color: #cc7832;">,</span><span style="color: #9876aa;">&nbsp;</span><span style="color: #6a8759;">'es.promise.finally'</span><span style="color: #cc7832;">,</span><span style="color: #9876aa;">&nbsp;</span><span style="color: #6a8759;">'es.array.includes'</span><span style="color: #cc7832;">,</span><span style="color: #9876aa;">&nbsp;</span><span style="color: #6a8759;">'es.symbol'</span>]<span style="color: #cc7832;">,</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>}<span style="color: #cc7832;">,</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>]<span style="color: #cc7832;">,</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>]<span style="color: #cc7832;">;</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>}<span style="color: #cc7832;">,</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>}<span style="color: #cc7832;">,</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transpile</span>:<span style="color: #9876aa;">&nbsp;</span>[<span style="color: #6a8759;">'@nuxtjs/axios'</span><span style="color: #cc7832;">,</span><span style="color: #9876aa;">&nbsp;</span><span style="color: #6a8759;">'gsap'</span><span style="color: #cc7832;">,</span><span style="color: #9876aa;">&nbsp;</span><span style="color: #6a8759;">'swiper'</span><span style="color: #cc7832;">,</span><span style="color: #9876aa;">&nbsp;</span><span style="color: #6a8759;">'vue-awesome-swiper'</span><span style="color: #cc7832;">,</span><span style="color: #9876aa;">&nbsp;</span><span style="color: #6a8759;">'nuxt-fullpage.js'</span><span style="color: #cc7832;">,</span><span style="color: #9876aa;">&nbsp;</span><span style="color: #6a8759;">'vue-datetime'</span><span style="color: #cc7832;">,</span><span style="color: #9876aa;">&nbsp;</span><span style="color: #6a8759;">'vue-daum-postcode'</span><span style="color: #cc7832;">,</span><span style="color: #9876aa;">&nbsp;</span><span style="color: #6a8759;">'vue-advanced-cropper'</span>]<span style="color: #cc7832;">,</span></div>
<div><span style="color: #9876aa;">&nbsp;&nbsp;&nbsp;&nbsp;</span>}<span style="color: #cc7832;">,</span></div>
</div>
<p>의존성은 아래처럼 설치했습니다.</p>
<div style="color: #a9b7c6; background-color: #2b2b2b; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #9876aa;">"scripts"</span><span style="color: #cc7832;">:</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"dev"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"nuxt"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"build"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"nuxt&nbsp;build"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"start"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"nuxt&nbsp;start"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"generate"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"nuxt&nbsp;generate"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"lint:js"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"eslint&nbsp;--ext&nbsp;.js,.vue&nbsp;--ignore-path&nbsp;.gitignore&nbsp;."</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"lint"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"npm&nbsp;run&nbsp;lint:js"</span></div>
<div>&nbsp;&nbsp;}<span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;<span style="color: #9876aa;">"dependencies"</span><span style="color: #cc7832;">:</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"@nuxtjs/axios"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^5.12.2"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"@nuxtjs/moment"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^1.6.1"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"cookie-universal-nuxt"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^2.1.4"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"gsap"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^3.5.1"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"luxon"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^1.25.0"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"nuxt"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^2.14.6"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"nuxt-fullpage.js"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"0.0.3"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"swiper"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^5.4.5"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"vue-advanced-cropper"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^0.17.9"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"vue-awesome-swiper"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^4.1.1"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"vue-datetime"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^1.0.0-beta.14"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"vue-daum-postcode"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^0.9.0"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"weekstart"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^1.0.1"</span></div>
<div>&nbsp;&nbsp;}<span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;<span style="color: #9876aa;">"devDependencies"</span><span style="color: #cc7832;">:</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"@babel/preset-env"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^7.12.11"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"@babel/runtime-corejs3"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^7.12.5"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"@nuxt/babel-preset-app"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^2.14.12"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"@nuxtjs/eslint-config"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^3.1.0"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"@nuxtjs/eslint-module"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^2.0.0"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"babel-eslint"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^10.1.0"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"babel-loader"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^8.2.2"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"core-js"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^3.8.2"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"eslint"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^7.10.0"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"eslint-config-prettier"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^6.12.0"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"eslint-plugin-nuxt"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^1.0.0"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"eslint-plugin-prettier"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^3.1.4"</span><span style="color: #cc7832;">,</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9876aa;">"prettier"</span><span style="color: #cc7832;">:</span>&nbsp;<span style="color: #6a8759;">"^2.1.2"</span></div>
<div>&nbsp;&nbsp;}<span style="color: #cc7832;">,</span></div>
</div>
<p>혹시나 제가 뭘 빠트린게 있을까요?</p>
<p>아니면 다른 파일들에서&nbsp; 추가적으로&nbsp; 해주어야 하는 일이 있는건가요?</p>
<p>주말에 질문드려서 죄송합니다.</p>
<p>편안한 주말되세요^^</p>

Nuxt 에 babel polyfill 적용하는 방법이 궁금합니다.

<p>늦은 시간에 답변 감사합니다!</p>
<p>답변보고 이것저것 해봤는데 정확히는 알 수 없지만 아무래도 짐작하기로 Promise가 문제인것 같은데</p>
<p>npm install es6-promise</p>
<p>설치하고 nuxt.config.js 파일에</p>
<p>bulid: {</p>
<p>&nbsp; &nbsp; transfile: ['es-promise']</p>
<p>}</p>
<p>처리했는데 빌드 100%쯤 되서 IE에서 'Promise'가 정의되지 않았습니다. 라는 에러가 발생하네요.</p>
<p>혹시 뭘 더 추가해 주어야 하는게 있을까요?</p>

페이지가 변경될때 마다 같은 함수를 mounted() 안에서 실행하는 방법이 있을까요?

<p>아~ 페이지가 변경될때에만 주소를 읽어서 특정 함수(주소와 특정 노드들의 값 비교)를 한번만 실행하고 싶었습니다.</p>
<p>노드의 값과 비교하려니 mounted 에 적용하려 했습니다.</p>
<p>일단 default 레이아웃의 watch에 $route(to, from) {...} 형태로 하니 되긴 하는데 맞나 모르겠네요.</p>
<p>다시 확인해보니 watch에 넣으면 새로고침 시에는 작동을 안하네요.;;;</p>
<div id="gtx-trans" style="position: absolute; left: 402px; top: 148px;">
<div class="gtx-trans-icon"></div>
</div>

<p>친절한 답변과 링크 감사합니다.</p>

Nuxt js 강의는 예정에 없나요?

<p>아~ 그렇군요. 감사합니다.</p>

백엔드가 자바일때 로그인 유지관련 질문드립니다.

<p>답변 감사합니다.</p>
<p>한가지만 더 질문드립니다. 제가 강좌에서 놓친건지 모르겠는데...</p>
<p>로그인 유지할때 프론트쪽에서 nuxtServerInit() 설정으로 유저정보를 가져와서 세팅하는것만 보입니다.</p>
<p>그러면 서버로 리퀘스트를 보낼때 서버에서는 이 사용자가 로그인된 인증사용자인지 어떻게 판단하는거죠?</p>
<p>프론트에서 서버로 리퀘스트를 보낼때마다 세션아이디나 토큰값을 헤더에 싫어서 보내면 서버가 이 토큰정보를 가지고</p>
<p>비교해서 로그인한 사용자로 판단해서 응답을 주는거 아닌가요?</p>
<p><strong>제가 다른 뷰강좌(Nuxt 사용안함) 봤을때는</strong></p>
<p><strong>서버에서 발급한 토큰을 프론트에서 쿠키에 저장 -> </strong></p>
<p><strong>프론트에서 페이지 호출될때마다 저장된 쿠키의 토큰 정보를 다시 state에 저장 -> </strong></p>
<p><strong>서버로 리퀘스트를 보낼때마다 state 의 토큰을 axios 인터셉터로 헤더에 실어서 서버에 리퀘스트 보냄 -></strong></p>
<p><strong>서버에서 토큰으로 로그인된 사용자 판단 후 응답</strong></p>
<p>이런 방식이었는데요...</p>
<p>혹시 이 강좌에서는 쿠키정보를 백엔드에서 직접 저장하고 가져가고 하는건가요?</p>
<p>현재 기능구현 5-6까지밖에 못보긴 했는데&nbsp;이런 부분을 제가 놓친건지 아직 못본건지 모르겠네요.</p>
<p></p>
<p>처음 배워서 당장 프로젝트를 해야하니 마음이 급해서 강좌도 다 보기 전에 자꾸 질문드려서 죄송하네요.;;;</p>

zungssam9813

投稿