inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

사진 오류

미해결

[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터

<img src="https://i.ibb.co/XbsPPmQ/image.png" /> 이 사진 주소 바뀐거같아요

  • vue.js
  • nuxt.js
  • pinia
  • vue-3
댓글 1 좋아요 0 조회수 139

@pinia/nuxt 버전이 0.9.0인 경우 @pinia-plugin-persistedstate/nuxt와 충돌

미해결

[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터

질문은 아닙니다. 다른 분들을 위해 공유 차 남겨둡니다. @pinia/nuxt 버전이 0.9.0인 경우 @pinia-plugin-persistedstate/nuxt와 충돌이 발생합니다. @pinia/nuxt 버전이 0.9.0를 0.5.0으로 낮춰주시면 충돌 문제를 해결할 수 있습니다.

  • vue.js
  • nuxt.js
  • pinia
  • vue-3
서정현 댓글 2 좋아요 1 조회수 219

Nuxt3는 SSR인가요? USR인가요?

미해결

[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터

먼저 강의를 수강한지 오래 되어서 제 기억이 틀릴 수 있습니다. 제가 강의를 들을 때 SSR은 서버에서 랜터링 해서 내려준다. CSR은 최초 모든 것을 랜터링 해서 내려준다 USR은 SSR과 CSR의 장점을 결합한 것이다. 즉, 처음에는 SSR 형식으로 서버에서 랜터링 해서 내려주지만 한번 내려 준것은 CSR처럼 운영되어 다시 서버에 요청을 하지 않는다. 이것이 USR이다. 라고 한 것 같은데... 질문 제가 자료를 찾아보니 USR이라고 생각한 것이 SSR의 기본 동작이라고 하는데 맞나요? USR과 SSG(Static Server Generation)는 동일한 개념인가요? Nuxt3 프로젝트를 빌드 후 배포할 때 nginx 그리고 node.js 서버가 각각 별도로 존재하는 것이 맞나요? 아니면 하나의 서버에 인스턴스를 분리하여 운영하는 것이 맞나요? 질문이 많아 죄송합니다.

  • vue.js
  • nuxt.js
  • pinia
  • vue-3
metaone11 댓글 2 좋아요 1 조회수 393

VSCode처럼 멀티 Title & Menu Bar로 개발할려면?

미해결

[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터

매번 질문만 드려서 죄송합니다. 질문 VSCode에서 사이드 바의 파일들을 클릭하면 Title & Menu Bar가 멀티로 표시되는데 이렇게 구현할려면 QDrawer와 QToolbar로 처리가 가능한지 궁금합니다.

  • vue.js
  • nuxt.js
  • pinia
  • vue-3
metaone11 댓글 2 좋아요 0 조회수 299

Course 데이터 가져오기에서 궁금한 점

미해결

[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터

만약에 백엔드가 스프링부트의 Restful API서버를 이용한다고 가정했을 때 질문 1. axios 또는 fetch로 데이터를 가져오는 부분을 composables 폴더에 작성하나요? 질문 2. axios 또는 fetch를 이용할 때 파라미터 값과 리턴 받는 결과 값도 types 폴더 아래 모두 정의하나요?

  • vue.js
  • nuxt.js
  • pinia
  • vue-3
metaone11 댓글 2 좋아요 1 조회수 259

프로젝트 생성

해결됨

[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터

npx nuxi@latest 를 통해서 생성시 package.json 에서 "dependencies": { "nuxt": "^3.13.0", "vue": "latest", "vue-router": "latest" } 생성이 됩니다. 질문 1. 위 부분의 latest 라고 되어 있는 부분이 향후 문제가 될 소지가 있나요??? 버전을 명시에서 인스톨을 다시 해주는게 서비스 배포 및 운영에 안정적인지 궁금합니다. 버젼명시를 해줘야 한다면 nuxt 3.13 기준 vue, vue-router 버전을 몇으로 해야할까요?? 아니면 이런 부분을 어디서 확인하면 좋을까요?? 질문 2. 해당 명령어로 프로젝트 생성시 촬영당시 버젼인 { "name": "nuxt-app", "private": true, "type": "module", "scripts": { "build": "nuxi build", "dev": "nuxi dev", "generate": "nuxi generate", "preview": "nuxi preview", "postinstall": "nuxi prepare" }, "devDependencies": { "nuxt": "^3.9.0", "typescript": "^5.3.3", "vue": "^3.4.3", "vue-router": "^4.2.5", "vue-tsc": "^1.8.27" } } 수정후 .node_modules , package-lock.json 삭제 후 다시 package install 을 해주었는데 이렇게 되면 프로젝트 구조가 바뀌어서 그런건지 빌드와 typecheck 부분이 에러가 발생합니다. 참고로 위 버젼으로 인스톨 하고 npm run dev 로 할 경우 터미널에서 표시되는 nuxt 버젼은 3.9가 아니라 3.13 버젼으로 표시되고 있습니다. 이 부분을 어떻게 진행을 해야할까요?? 확인 부탁드립니다.

  • vue.js
  • nuxt.js
  • pinia
  • vue-3
보헤미안 댓글 3 좋아요 0 조회수 380

nuxt 최신버전 설치 후 layouts 없어서 직접 폴더 생성 후 문제

미해결

Nuxt.js 시작하기

nuxt 최신버전 설치 후 layouts 없어서 직접 폴더 생성 후 문제인데요. error.vue 는 문제없이 실행되는데 default.vue 생성시 pages에 있는 내용은 하나도 안나오고 default.vue에 있는 내용만 똑같이 나오는 현상이 나옵니다. default.vue 내용만 나옴 default.vue 삭제시

  • vue.js
  • nuxt.js
  • ssr
댓글 1 좋아요 1 조회수 381

웹 서버, WAS 그리고 api 서버 관련

미해결

[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터

안녕하세요, 이번 강의에서 렌더링 모드에 대해서 공부하면서 생긴 의문입니다. 1. server side rendering에서 server는 웹서버인가요? API server와 통신하는 것은 웹서버인가요? 저는 웹서버를 구성한 적이 없습니다. 현재 강의에서도 웹서버를 구성하는 단계는 없었고요. 웹서버는 언제/어떻게 생성되는건가요? 사실 최근까지 웹서버, WAS에 대한 개념이 없었습니다. 제가 만든 웹앱이 API 서버와 통신하여 데이터를 잘 가져오고, 잘 보여주고 있다! 이거구나! 싶었는데, 최근 개념의 혼란이 옵니다.. 관련하여 짐코딩님의 설명이 무척 궁금합니다.

  • vue.js
  • nuxt.js
  • pinia
  • vue-3
egpark 댓글 2 좋아요 0 조회수 450

$route 관련 에러

미해결

[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터

안녕하세요, $route를 사용하려고 하니 아래와 같은 에러가 발생했습니다. 강의 중에도 이를 위한 추가 작업은 없었는데, 저는 빨간줄이 생기네요..ㅎㅎ 관련하여 검색해봤는데 해결책을 찾지 못해 문의드립니다!

  • vue.js
  • nuxt.js
  • pinia
  • vue-3
egpark 댓글 1 좋아요 0 조회수 196

package.json 구성 관련 문의

미해결

[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터

안녕하세요, 기본, 실전, firebase 활용에 이어서 nuxtjs까지 자연스럽게 수강중입니다..ㅎㅎ 이번 강의도 여느 때처럼 꼼꼼하고 친절하시네요! 프로젝트 구성 강의를 보며 3가지 의문이 들어 문의드립니다! nuxt.config.ts 파일에서 typeCheck: true를 해두면 아래와 같은 에러가 발생합니다 (이미지 참고). 프로젝트의 package.json, node 및 npm 버전은 짐코딩님과 동일한 상태입니다. typeCheck: false로 해두면 해당 에러가 사라지는데, 당연한 걸까요? 짐코딩님 github에서 nuxt.config.ts 파일을 보면 typeCheck: true로 되어있는 걸 보면, 1) 원래는 없었던 에러이거나 2) 제가 설정을 더/덜 해야하는 부분이 있어보이는데 잘 모르겠습니다.. 짐코딩님 package.json에 보면 vue-router가 설치되어 있습니다. nuxi로 프로젝트 생성하면 최초에는 없더라고요! 필요에 의해 설치를 한 것인지, 아니면 강의 촬영 당시에는 nuxi로 프로젝트 생성 시 vue-router가 default로 포함되어 있던건지 궁금합니다. 3. devDependencies와 dependencies는 무엇으로 구분하나요? 제가 nuxi를 이용해서 프로젝트를 생성했더니, nuxt와 vue는 dependencies에 포함되어 있었습니다만, 짐코딩님 package.json을 보면 둘 다 devDependencies에 포함되어 있더라고요. 어떤 차이가 있을까요? nuxi로 프로젝트 생성 시 dependencies에 있떤 nuxt와 vue를 인위적으로 devDependencies로 옮기신걸까요? 그렇다면 이유가 무엇일까요?

  • vue.js
  • nuxt.js
  • pinia
  • vue-3
egpark 댓글 1 좋아요 0 조회수 225

코드에서 $i18n, $route 등 provide로 제공된 객체가 템플릿에서 붉은색으로 표시됩니다.

미해결

[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터

안녕하세요. 좋은 강의 잘보고 있습니다. 강의를 진행하면서 한가지 문제가 있어서 문의드립니다. 아래 스크린 샷과 같이 nuxtApp.provide 또는 Auto-Import 된 모듈을 Template 영역에서 사용하면 아래와 같이 속성을 찾을 수 없다는 에러가 발생합니다. index.d.ts 또는 타입을 추가하면 해결될 것으로 보이긴 하지만, 강의에서는 딱히 타입을 추가로 정의하지 않은 것으로 보이는데 어떤 설정을 추가해야 정상적으로 타입스크립트가 속성을 인식할 수 있는지 궁금합니다. 감사합니다.

  • vue.js
  • nuxt.js
  • vue-3
  • provide
  • typescript
  • typescript-error
hj 댓글 2 좋아요 0 조회수 287

24년 강의를 들으면서 에러나는 부분 정리

해결됨

Nuxt.js 시작하기

img url 기한만료로 깨져서 나올 때 backend 폴더의 db.json 이미지 주소를 변경하시면 정상적으로 출력됩니다. 인덱스 0은 어떤 이유에서인지는 모르나 가져오지 못하기 때문에 30번을 추가하면 됩니다.아래 코드로 db imageUrl을 전체 수정하시면 됩니다. "imageUrl": "https://picsum.photos/640/480" localhost 액세스 거부 맥북인 경우에 종종 생기는 일인 거 같은데 크롬에서 잘 되다가도 안되면 포트를 5000에서 4000으로 바꾸고 실행하시거나다른 브라우저를 이용해서 진행하시면 됩니다.

  • vue.js
  • nuxt.js
  • ssr
콩가루탄 댓글 2 좋아요 2 조회수 371

fetch와 axios에 대한 질문

미해결

[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터

마지막 Nuxt Configuration 강의가 남아 있지만 궁금해서 질문을 던집니다. 주로 fetch를 이용해서 API 통신을 하는데 axios는 이제 앞으로 사용하지 않는 추세인가요? 아니면 fetch 대신에 axios를 사용하는 것도 좋은 방법인가요? 아직은 잘 몰라서 질문이 틀릴 수도 있는 점 이해주시면 감사드립니다.

  • vue.js
  • nuxt.js
  • pinia
  • vue-3
metaone11 댓글 1 좋아요 0 조회수 208

교안에 있는 jsonwebtoken

미해결

[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터

안녕하세요 이번에 nuxt로 프로젝트를 진행하고있습니다. 강의에는 없지만 교안에는 Authentication API Advanced 해당 부분이 있어 보고있는데, 여기서 jsonwebtoken 을 npm으로 설치를 하고, 해당 jwt를 import하면 500 util.inherits is not a function 이런 오류가 뜹니다. jsonwebtoken 버전을 다운그레이드해서 설치해도 동일한 문제가 발생하는데, 어떻게 해야할까요?

  • vue.js
  • nuxt.js
  • pinia
  • vue-3
devops 댓글 1 좋아요 0 조회수 232

API Routes를 통해 만든 /api/error.ts 의 반환값 문제

미해결

[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터

안녕하세요.. /server/api/error.ts를 다음과 같이 구성하였습니다. export default eventHandler(() => { throw createError({ statusCode: 404, statusMessage: '페이지를 찾을 수 없습니다.', }); }); 그리고 강의에서와 같이 http://localhost:3000/api/error 요청하면 json으로 요청이 되지 않고 다음과 같이 html 화면만 출력이 됩니다. 해당 요류를 어떻게 해결할 수 있을까요. 감사합니다.

  • vue.js
  • nuxt.js
  • pinia
  • vue-3
tinybuild.lab 댓글 1 좋아요 0 조회수 201

Property $hello does not exist on type

미해결

[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터

안녕하세요. 강의를 수강하면서 Plugins 부분에 대해서 질문이 생겨서 글을 작성했습니다. 강의를 따라하다 보니 hello.ts를 교안과 같이 작성하였고, index.d.ts와 app.vue도 동일하게 구성하였는데 다음과 같은 오류가 발생하고 있습니다.(course.vue에서 $hello를 사용하는 부분 - 기능은 동작하고 있음) [vue-tsc] Property '$hello' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, { courses: typeof courses; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 12 more ..., {}>'. 혹시 이러한 오류가 발생하였을 때 어떻게 해결해야 할 지 궁금합니다. (추가+ index.d.ts의 타입 선언 부분의 주석을 해제하면 오류가 사라집니다.) hello.ts export default defineNuxtPlugin(() => { return { provide: { hello: (msg: string) => `Hello ${msg}!`, }, }; }); 강의를 너무 잘 수강하고 있습니다. 감사합니다.

  • vue.js
  • nuxt.js
  • pinia
  • vue-3
tinybuild.lab 댓글 2 좋아요 0 조회수 342

config.authCookieName 에서 타입 오류가 발생합니다.

미해결

[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터

[vue-tsc] Argument of type 'unknown' is not assignable to parameter of type 'string'. /workspace/dev/nuxt-tutorial/server/routes/auth/login.post.ts:38:20 36 | 37 | const config = useRuntimeConfig(); > 38 | setCookie(event, config.authCookieName, JSON.stringify(userWithoutPassword)); | ^^^^^^^^^^^^^^^^^^^^^ 39 | 40 | return { 41 | user: userWithoutPassword, [vue-tsc] Argument of type 'unknown' is not assignable to parameter of type 'string'. /workspace/dev/nuxt-tutorial/server/utils/auth.ts:5:43 3 | export function getUserFromEvent(event: H3Event) { 4 | const config = useRuntimeConfig(); > 5 | const userJsonString = getCookie(event, config.authCookieName); | ^^^^^^^^^^^^^^^^^^^^^ 6 | 7 | console.log('userJsonString: ', userJsonString); config.authCookieName 에서 타입 오류가 발생하는데 어떻게 해결 할 수 있을까요..?

  • vue.js
  • nuxt.js
  • pinia
  • vue-3
Heeeyaaa 댓글 1 좋아요 0 조회수 192

unhandledRejection 오류는 어떻게 해결 해야 하나요?

미해결

[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터

현재 우분투 서버단에서 nuxt3와 pm2로 실행관리를 하려면 테스트중입니다. 그런데, 잘 작동하다가 한번씩.. 아래와 같은 오류를 발생시키면서 서버가 죽습니다. 며칠동안 방법을 찾으려고 했으나, 찾을수가 없어서 질문 드립니다. (구글링, gpt 하면서 체크하라는 부분은 다 체크해 보았는데.. 못 잡았습니다.. 해당 패키지들은 최신버전이고, node도 다른버전으로 변경해 보았으나, 동일한 현상을 발생시킵니다.) 관련 이슈도 있는거 같던데.. 혹 알고 계시는거 없는지요?? 0|nuxt3 | ERROR [unhandledRejection] connect ECONNREFUSED 127.0.0.1:43671 0|nuxt3 | 0|nuxt3 | at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1606:16) 0|nuxt3 | 0|nuxt3 | 0|nuxt3 | ERROR [unhandledRejection] connect ECONNREFUSED 127.0.0.1:43671 0|nuxt3 | 0|nuxt3 | at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1606:16) 로컬에서 개발시에는 개발중 이런 문제가 없었던 것으로 기억하는데.. 서버단으로 이동후에는 이러네요.. 정확한 원인을 모르니, 많이 답답합니다.. 알려주세용..

  • vue.js
  • nuxt.js
  • pinia
  • vue-3
앱프 댓글 1 좋아요 0 조회수 266

nuxt3 프로젝트를 git pull 후 해야 하는 것

미해결

[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터

nuxt3 프로젝트를 git clone으로 pull 받은 후 해야 할 일 것들이 뭘까요? nvm 설치 후 node 와 npm 은 버전을 맞추었습니다. 이후 npm install하면 package.json 파일을 보고 의존성 라이브러리 추가되는 것으로 알고 있습니다. 이 외에 더 설치나 설정을 해야 할 것이 있을까요? 물론 git저장소에는 정상적으로 빌드 된 것들만 올라갔습니다.

  • vue.js
  • nuxt.js
  • pinia
  • vue-3
metaone11 댓글 1 좋아요 0 조회수 222

인기 태그

인프런 TOP Writers

주간 인기글