reactive({}), reactive([])가 아닌일반 객체와 배열에 ref 타입 속성을 사용하더라도reactive 객체에 담아서 사용할 때와 .value unwrapping 여부 외에는 동일하게 동작하는 것 같은데 맞게 이해한걸까요??ref를 쓸 떄 반드시 reactive와 함께 써야하는지 궁금합니다(코드 상 편의를 제외한 이유)export default { setup() { // ################일반 객체에 ref####################### // ref => {} const count2 = ref(0); const state2 = { count2, }; count2.value += 1; count2.value += 1; count2.value += 1; // console.log(count2); // console.log(state2.count2.value); // console.log(state2.count2); // ################Reactive 객체에 ref####################### // ref => Object const count = ref(0); const state = reactive({ count, }); count.value += 1; count.value += 1; count.value += 1; // console.log(count); // console.log(state.count.value); // undefined, 객체 안에 ref가 들어갈 경우 .value를 자동으로 까서 반환해준다. // console.log(state.count); // ################일반 배열에 ref#######################' // ref => array const message2 = ref('Hello'); const arr2 = [message2]; console.log(arr2[0]); console.log(arr2[0].value); // ################Reactive 배열에 ref#######################' // ref => array const message = ref('Hello'); const arr = reactive([message]); console.log(arr[0]); console.log(arr[0].value); const incrementCount = () => { count.value += 1; count2.value += 1; console.log(count, state.count.value); console.log(count2, state2.count2.value); }; const changeText = () => { message.value += '!'; message2.value += '!'; console.log(arr); console.log(arr2); }; return { incrementCount, changeText, state, state2, count, count2, }; }, };

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

진작에 질문을 남겼어야 했는데, 애러 해결이 어려워 너무 지체되네요. 첫 질문 남기게 되었습니다. 문제의 요지: 추측 하기로container.resolve 가 vue 와 라이프사이클 에 순서때문인지, 다른 이유가 있는지 DI 가 안됩니다.  Menu.vue 디버깅강의내용에도 있듯 tsyringe 는@singleton 이 달려있는 클래스를 컨테이너에 등록 후, 클래스 자체를 DI 키로 사용할 수 있다고 알고있습니다. 디버깅 상황에서 보다시피container 내부 _registryMap 안에 AuthorityApi 클래스가 정상등록 된 것을 확인할 수 있었습니다. 하지만 Break-point 된 container.resolve 처리가 안되어 아래처럼 애러가 발생합니다. 아래는 다음줄로 가지않고, 이벨류에이터로 실행한 모습이구요, AuthorityApi를 찾아올 수 없다 합니다.Error: TypeInfo not known for "AuthorityApi" at http://localhost:4000/node_modules/.vite/deps/tsyringe.js?v=a355aabe:746:17 at InternalDependencyContainer2.construct (http://localhost:4000/node_modules/.vite/deps/tsyringe.js?v=a355aabe:751:6) at InternalDependencyContainer2.resolveRegistration (http://localhost:4000/node_modules/.vite/deps/tsyringe.js?v=a355aabe:573:90) at InternalDependencyContainer2.resolve (http://localhost:4000/node_modules/.vite/deps/tsyringe.js?v=a355aabe:500:25) at eval (eval at setup (http://localhost:4000/src/widgets/Menu.vue:28:26), <anonymous>:1:11) at setup (http://localhost:4000/src/widgets/Menu.vue:28:26) at callWithErrorHandling (http://localhost:4000/node_modules/.vite/deps/chunk-VJROVW5H.js?v=a355aabe:1884:19) at setupStatefulComponent (http://localhost:4000/node_modules/.vite/deps/chunk-VJROVW5H.js?v=a355aabe:8253:25) at setupComponent (http://localhost:4000/node_modules/.vite/deps/chunk-VJROVW5H.js?v=a355aabe:8214:36) at mountComponent (http://localhost:4000/node_modules/.vite/deps/chunk-VJROVW5H.js?v=a355aabe:5604:7) 해결방법을 tsyringe 공식 깃헙이슈, 구글링, 스택오버플로 몽창 뒤져봐도 힌트얻기가 참으로 힘드네요. AI 센세는 그저 스택오버플로 내용만 읊어줍니다.이것에 원인을 알 수 있을까요? 실마리만 얻어도 해결하기 수월할텐데, 몇일 째 어째야 되나 고민입니다. 도움을 얻을 수 있을까요? : Source-Codesrc-front 소스코드주의: 개인 npm lib 가 포함되어 node_modules 을 포함한 체 그대로 압축된 파일입니다. npm i 인스톨 없이 앱을 실행해야될거라 예상합니다. 도움을 구합니다. 감사드려요.

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

안녕하세요const routes = [] 내부에 객체로 path와 컴포넌트를 명시적으로 작성하는데 만약 이런 객체가 수백개 단위가 되는 경우에도 일일이 하나씩 다 작성하고 import해야하나요?제가 얼마전 했던 프로젝트에서는 명시적으로 하나씩 입력을 하지 않았었는데... 지금은 프로젝트가 끝나서 소스를 볼수가 없네요... 혹시 제가 말씀드린 상황처럼 화면이 수백개씩 되는 경우에는 어떻게 처리를 하는지에 대해서 알고싶습니다.    

들여쓰기 단축키가 어떻게 되나요?

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

안녕하세요~혹시 새로운 강의는 출시 예정이 없으신지~궁금합니다!답변 주시면 감사하겠습니다~

{ path: '/:pathMatch(.*)*', component: () => import('@/views/NotFoundPage.vue'), },그냥 * 대신 이렇게 넣어주시면 정상적으로 동작합니다!!

fs를 못찾는다고 해서lecture-vue-trello 에서npm install --save-dev @babel/core @babel/cli @babel/node @babel/preset-env로 설치 해주었습니다 하지만 똑같은 오류가 뜹니다..아예 폴더를 삭제하고 깃에서 다시 클론하여 npm 설치 후 열어주었습니다그런데도 똑같은 오류가 뜹니다.webpack버전은 5를 쓰고 있습니다어떻게 해야 해결할 수 있을까용..vue cli 로 만든 프로젝트로 다시 해보았습니다퀵픽스에 install bable-core이 있어서 적용해보았는데 똑같습니다..

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

vbc + 탭을 하면 기본적인 템플릿 가이드가 나온다고 하는데 저는 나오지 않습니다.vue vscode snippet 플러그인을 다운받았는데도 그러는데 왜 그럴까요??

안녕하세요항상 빠른 감사드립니다. 다름이 아니오라Props에 계념은 정확히 알고 있다고 생각하고 있습니다만. [id 참조하는 방법]index.js 정보를 기준으로경우 1:const route = useRoute();const id = route.params.id 경우2:Props를 기준으로 id 정보를 가지고 오는데요const props = definedProps ({id: Number}) (각설하고)props id사용할때랑route에서 제공하는 id 차이점을 알고 싶습니다.(꼭 부/자 관계도 아닌거 같고..ㅡㅡ;;)  "이럴때는 route 사용 ""저럴때는 props 사용 "언제나 감사드리는 코딤님...쾌변 부탁드립니다. 이제 가을 이네요... 즐거운 명절 보내세요

안녕하세요~끝장내기 수업 정도나 이상의 긴호흡의 강의는출시하지 않으실 예정이신지궁금 합니다!

당연히 구글링 해보셨져? 원하는 결과를 못찾으셨나요? 어떤 검색어를 입력했는지 알려주세문제가 발생한 코드(프로젝트)를 Github에 올리시고 링크를 알려주세요.안녕하세요 호돌맨님.덕분에 강의 잘 듣고있습니다.깃헙 collaboator로 초대받을 수 있을까요?깃헙 아이디는 sol4854@naver.com 입니다!감사합니다.

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요, 매번 빠르고 친절한 답변 주셔서 감사합니다!짐코딩님 덕분에 밥 벌어먹고 삽니다..ㅎㅎ 강의 내용 중에 대부분의 서버는 root로 요청하면 index.html 파일을 돌려준다그런데, 전체 경로(ex. localhost:3000/posts)로 요청했을 때, 해당 경로에 index.html 파일이 있지 않는 이상 404 오류를 만나게 된다history mode로 요청 시 전체 경로로 요청한다따라서, history mode로 배포할 때는 서버에 추가 설정이 필요하다 요러한 내용이 있었습니다.제가 의아한 부분은..여기서 말하는 '서버'는 웹서버를 의미하는 걸까요? 이 부분에 대해 신경쓰지 않고, history mode로 build, deploy한 개인 프로젝트가 있습니다. 저는 history mode 배포를 위해 특별한 설정을 하지 않았으나 문제 없이 동작하고 있습니다. (여기서 문제가 없다는 건, root 요청이 아니더라도 404를 돌려주지 않고 제가 설정한 Router 정보대로 페이지를 보여줍니다). 그래서 아리까리 한데요.. 제가 이 부분에 대해 조금 더 알아볼 수 있는 학습자료를 공유해주실 수 있을까요? 

Alert 공통 컴포넌트 1 .수정이 완료되었습니다.네트원크 오류! 로 설명하고 계시는데요 전 API-Server 내리고 화면 설명하시는데로 refresh했더만... 사이트에 연결할 수 없음127.0.0.1에서 연결을 거부했습니다.다음 방법을 시도해 보세요.연결 확인프록시 및 방화벽 확인ERR_CONNECTION_REFUSED 위 화면을 볼 수 있는데요... 그냥 서버만 내리면"네트워크 오류" 메시지가 노출 되는 게 맞는지요? 코딩님... 쾌변 부탁드려요.. ㅡㅡ;; 

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요!lifecycle hook이 이론적으로는 이해가 가지만,실제로 어떻게 사용되는지에 대한 의문이 있습니다..! 예를 들어, onMounted()는 어떻게 사용할 수 있을까요?API 호출을 여기서 하는 것이 최적일까요? onUnmounted()는 무엇을 위해 사용할 수 있을까요? 짐코딩님의 경험과 생각이 궁금합니다! 

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요,강좌 17:39 전후로 해서root element가 n개인 자식 component에서 특정 element에 $attrs를 v-bind 하지 안흐면 run time warning이 발생한다는 설명을 해주셨습니다. 그런데 이 상황에서 inheritAttrs: false를 선언하지 않아도v-bind="$attrs"가 동작해서 run time warning이 사라졌습니다. inheritAttrs:flase를 선언하여구조상 상속을 비활성화해야만v-bind="$attrs"를 설정할 수 있는게 맞지 않나요~?이 과정에서 제가 잘못 이해한 부분이 있을까 싶어 짐코딩님께 여쭤봅니다.