Nuxt 3 에서 eslint, prettier 사용 방법

Nuxt2 처럼 eslint 와 prettier 관련 패키지를 추가하고 환경 설정을 해서 해결하였습니다.설치한 패키지는 아래와 같습니다. 일단 Typescript는 사용하지 않아서 관련 패키지는 제외하였습니다."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" }nuxt.config.tsimport { defineNuxtConfig } from 'nuxt'; import eslintPlugin from 'vite-plugin-eslint'; export default defineNuxtConfig({ vite: { plugins: [eslintPlugin()], }, });.eslintrc.jsmodule.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', }, ], }, };Nuxt3 는 설정부터 시작해서 바뀐 점이 많네요. 관련해서 강의가 생겼으면 좋겠습니다.

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

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

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

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

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

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

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

매번 감사합니다^^

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

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

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

친절한 답변과 링크 감사합니다.

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

아~ 그렇군요. 감사합니다.

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

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