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

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

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

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 버젼으로 표시되고 있습니다. 이 부분을 어떻게 진행을 해야할까요?? 확인 부탁드립니다.

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

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

안녕하세요,기본, 실전, 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로 옮기신걸까요? 그렇다면 이유가 무엇일까요?    

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

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

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

안녕하세요.강의를 수강하면서 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.tsexport default defineNuxtPlugin(() => { return { provide: { hello: (msg: string) => `Hello ${msg}!`, }, }; });강의를 너무 잘 수강하고 있습니다. 감사합니다.

[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 에서 타입 오류가 발생하는데 어떻게 해결 할 수 있을까요..?

현재 우분투 서버단에서 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) 로컬에서 개발시에는 개발중 이런 문제가 없었던 것으로 기억하는데..서버단으로 이동후에는 이러네요..정확한 원인을 모르니, 많이 답답합니다.. 알려주세용..

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

<NuxtLink v-slot="{ navigate }" custom :to="`/course/${courseSlug}`"> <CourseCard :title="title" :subtitle="subtitle" :thumbnail="thumbnail" /> </NuxtLink>해당 부분에서 오류가 발생하고 상세페이지로 진입이 안되는데 navigate 를 쓸 수 없는건가요?

<template> <div class="q-pa-xl"> <AppCard> <template #header> <div class="text-h5 text-weight-medium">{{ course?.title }}</div> <div class="flex q-gutter-x-sm items-center q-mt-sm text-grey-8"> <span class="flex items-center"> <q-icon name="star" size="16px" color="orange" /> <span>{{ course?.rating }}</span> </span> <span>{{ course?.reviewsCount }}</span> <span>&middot;</span> <span>{{ course?.studentCount }}</span> <q-space /> <a class="text-bold" :href="course?.reviewsUrl" target="_blank"> 수강평 보기 </a> </div> </template> <div class="q-mb-md"> <VideoPlayer :src="course?.video" /> </div> <div class="row q-col-gutter-md"> <div class="col-6"> <q-btn label="인프런에서 수강하기" unelevated class="full-width" color="primary" :href="course?.inflearnUrl" target="_blank" /> </div> <div class="col-6"> <q-btn label="짐코딩 클럽에서 수강하기" unelevated class="full-width" color="red" :href="course?.gymcodingUrl" target="_blank" /> </div> </div> <p class="q-mt-lg text-grey-8"> {{ course?.content }} </p> <template #footer> <q-btn v-if="prevCourse" label="이전 강의" color="primary" unelevated :to="prevCourse.path" /> <q-space /> <q-btn v-if="prevCourse" label="쿼리추가" color="primary" unelevated :to="{ path: $route.path, query: { timestamp: Date.now() } }" /> <q-space /> <q-btn v-if="nextCourse" label="다음 강의" color="primary" unelevated :to="nextCourse.path" /> </template> </AppCard> </div> </template> <script setup lang="ts"> const route = useRoute(); const courseSlug = route.params.courseSlug as string; const { course, prevCourse, nextCourse } = useCourse(courseSlug); console.log('re'); definePageMeta({ key: (route) => route.fullPath, }); </script> <style scoped></style>   <template> <NuxtLayout> <NuxtPage /> <!-- <RouterView /> --> <!--layouts>default.vue의 slot부분--> </NuxtLayout> </template> <script setup lang="ts"></script>  해당 코드처럼 넣은후 쿼리파라미터를 넣어도 리랜더링이 안되네요.. ㅠ 

아직 강좌 초반부이기는 한데.. 테스트 코드를 작성하면서 실시간 렌더링을 되면서 오작동을 너무 많이 한다고 느껴집니다..리엑트나 next.js를 사용시에는 이정도까지는 아니였는데, nuxt3는 좀 많이 심한거 같은데..저만의 생각인가요?? 예로.. 같은 경로에 렌더링 코드를 구성하기 위해서..pages/course.vue 생성하고.. http://localhost:3000/course 로 접속해서 결과물 확인했습니다.그리고, pages/course.vue를 삭제하고, pages/course/index.vue를 생성해서 다시 새로고침이나 다른 브라우저로 접근해도 동일한 오류를 발생시킨 페이지를 보여줍니다. 물론 nuxt3를 재실행하면 문제는 해결이 되기는 합니다.여기서 질문은.. nuxt3를 재실행하는 형태면 실시간 렌더링이 된다고 할 수 있느냐는 거죠... ㅡ.ㅜ;강의 보시면 테스트 코딩하니, 이제 제대로 작동한다고 생각을 하는거지.. 복잡한 프로젝트가 이처럼 정상적인 코드가 오류를 뿜어되면 어떻게 해야 할지.. 답답해 지네요.. ㅜ.ㅜ; 이런 형태의 문제가 처음이 아니고, 여러번 있었다는 겁니다. 처음에는 그러려니 했으나.. 하면 할수록 이건 좀 심하지 않나 싶어서 적어봅니다. 이런 문제를 해결할 방법이 있을까요??캐시 때문인지, 다르면 다른 설정으로 근본적으로 개발할때라도 해결할 방법이 있으면 알려주시면 감사하겠습니다..   

강의 잘 보고 있습니다.nuxt3가 버전없이 되어서 그런지, 강의에서는 안 보이는 _nuxt/pages/index.vue?macro=true 이런게 많이 보입니다.라우팅을 확인하기 위해서 개발자 도구의 network에서 보면 이런 코드가 다 들어가 보이는데..이건 뭐며, 로딩이 안되게나 해당 페이지 사용시 로드하는 형태는 불가능한가요??home으로 이동시 index.vue 로드해서 가져오고, about 클릭시 about.vue를 정상적으로 로드해서 정상적으로 code split이 이루어지고 있는 상태인데.. 해당 페이지를 리로드해서 가져오면.. 이처럼 pages 밑에 있는 모든 파일의 macro=true로 다 가져오고 있거든요..알려주시면 감사하겠습니다.. 아.. 코드 오류 발생시 저 macro=true 붙은 것을 화면에 많이 뿌려주어서 더 궁금합니다.. 

퀘이사 설치 후nuxt.config.ts에모듈을 추가하면 [vite-node] [ERR_LOAD_URL] quasar/lang/en-US.mjs오류가 뜨네요2번쨰 복습중인데 처음에는 잘 됐던거같은데 왜 갑자기 안되는걸까요?

nuxt3에서는 typescript를 사용해야 하는것은 알고 있는데, 외부 모듈 연동이나 기타 연동등에서 어쩔수 없이 자바스크립트를 사용해야 하는 경우가 있을건데, 이때 자바스크립트를 어떻게 가져와 처리해야 하는지 알고 싶습니다.우선 간단히 예제를 구성했는데.. 간단한것도 안되네요.. ㅡ.ㅜ; <template> <div> <h1>{{ data.message }}</h1> <p>Today is: {{ data.date }}</p> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import { fetchData } from '/assets/js/javascript_test'; const data = ref(fetchData()); </script>// assets/js/javascript_test.js export default function () { return { message: "Hello from JavaScript", date: new Date().toDateString(), }; }이처럼 구성했을때, 어떻게 가져와서 처리해야 하는지 좀 알려주시면 감사하겠습니다.500 에러 뜨는데, 이 코드 작동 좀 하게 해 주세요.. ㅡ.ㅜ;