안녕하세요.vue cli (@vue/cli 5.0.8)로 프로젝트를 생성하니강의 구조와 다르게 /public/ 에 index.html이 생성되며,<script src="dist/build.js"> 도 없습니다.어떻게 main.js intex.html에 붙는 건지 궁금합니다. 감사합니다.

TSLint 확장 프로그램 설치를 해야할까요? 2024-02-08 현재 deprecated된 확장이라 우선 설치를 안하긴 했습니다.

TodoList.vue에서 removeBtn으로 removeTodo함수를 호출하면서 부모창으로 emit을 요청했지만app.vue에서 콘솔로그를 출력해봤을때 해당 함수를 호출이 안되는데, 원인이 뭔지를 모르겠습니다.강의 내용대로 입력했는데, 해당 기능이 수행되지 않고 있습니다. localhost:8080 으로 접속했을 때 아래와 같은 오류가 뜹니다.app.vue소스에서 methods 영역에 아래와 같이 선언했는데 못찾는 이유가 무엇인가요?removeOneItem: function(todoItem){에러메시지 -main.js:4 [Vue warn]: Property "removeOneItem" was accessed during render but is not defined on instance. at <App>  TodoList.vue<template> <div> <ul> <li v-for="(todoItem , index) in propsdata" v-bind:key="todoItem.item" class="shadow"> <i class="checkBtn fa-solid fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}" v-on:click="toggleComplete(todoItem, index)"></i> <span v-blind:class="{textCompleted: todoItem.completed}">{{ todoItem.item }}</span> <span class="removeBtn" v-on:click="removeTodo(todoItem, index)"> <i class="fa-solid fa-trash"></i> </span> </li> </ul> </div> </template> <script> export default { props:['propsdata'], methods: { removeTodo : function(todoItem, index){ this.$emit('removeItem', todoItem, index); }, toggleComplete: function(todoItem, index){ console.log(todoItem.item + " " + index); todoItem.completed = !todoItem.completed; localStorage.removeItem(todoItem.item); localStorage.setItem(todoItem, JSON.stringify(todoItem)); } } } </script>app.vue<template> <div ip="app"> <TodoHeader></TodoHeader> <TodoInput v-on:addTodoItem="addOneItem"></TodoInput> <!-- <TodoInput v-on:하위 컴포넌트에서 발생시킨 이벤트 이름="현재 컴포넌트 매소드명"></TodoInput> --> <TodoList v-bind:propsdata="todoItems" v-on:removeItem="removeOneItem"></TodoList> <!-- <TodoList v-bind:propsdata="todoItems"></TodoList> --> <!-- <TodoList v-bind:내려보낼 프롭스 속성 이름="현재 위치의 컴포넌트 데이터 속성"></TodoList> --> <TodoFooter></TodoFooter> </div> </template> <script> import TodoHeader from './components/TodoHeader.vue' import TodoInput from './components/TodoInput.vue' import TodoList from './components/TodoList.vue' import TodoFooter from './components/TodoFooter.vue' export default { data: function(){ return { todoItems:[] } }, methods:{ addOneItem: function(todoItem){ console.log("addOneItem:[" + todoItem + "]"); var obj = { completed : false, item: todoItem }; // console.log(this.newTodoItem); //저장하는 로직 localStorage.setItem(todoItem,JSON.stringify(obj)); this.todoItems.push(obj); } }, removeOneItem: function(todoItem){ // console.log("removeOneItem app remove items:[" + index + "]:" + todoItem.item); console.log("removeOneItem app remove items:[:" + todoItem.item); localStorage.removeItem(todoItem.item); // this.todoItems.splice(index, 1); },

<template> <transition appear name="modal"> <div class="modal-mask"> <div class="modal-wrapper"> <div class="modal-container"> <!-- Modal Header --> <div class="modal-header"> <slot name="header"> default header </slot> </div> <!-- Modal Body --> <div class="modal-body"> <slot name="body"> default body </slot> </div> <!-- Modal footer --> <!-- <div class="modal-footer"> <slot name="footer"> default footer <button class="modal-default-button" @click="$emit('close')"> OK </button> </slot> </div> --> </div> </div> </div> </transition> </template> <style scoped> .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: table; transition: opacity 0.3s ease; } .modal-wrapper { display: table-cell; vertical-align: middle; } .modal-container { width: 300px; margin: 0px auto; padding: 20px 30px; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); transition: all 0.3s ease; font-family: Helvetica, Arial, sans-serif; } .modal-header { margin-top: 0; color: #42b983; } .modal-body { margin: 20px 0; } .modal-default-button { float: right; } .modal-enter-from { opacity: 0; } .modal-leave-active { opacity: 0; } .modal-enter-from .modal-container, .modal-leave-active .modal-container { -webkit-transform: scale(1.1); transform: scale(1.1); } </style>vue3인데 모달창 띄울 때 애니매이션 효과가 잘 작동하는데 왜 닫을 때는 작동을 안하는 지 잘 모르겠어요<AlertModal v-if="showModal" @close="showModal = false"> <!-- you can use custom content here to overwrite default content --> <template v-slot:header> <h3>경고! <span class="closeModalBtn" @click="showModal = false">x</span></h3> </template> <template v-slot:body> 아무것도 입력하지 않으셨습니다. </template> <!-- <template v-slot:footer> copy right </template> --> </AlertModal>참고로 vue3에서는 slot을 template 태그 안에 v-slot으로 적어야 한다해서 이렇게 작성했어요

- 인프런 아이디: sju02135@hanmail.net- 인프런 이메일: sju02135@hanmail.net- 깃허브 아이디: sju02135@hanmail.net- 깃허브 username: minsung1129

최초 한번만 실행되는 메소드처럼 보이는데... 맞습니까?

모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지만들기 11(9:37) 내용중인터넷 익스플로러 호환성을 위해 width:240px 대신 max-width:240px를 사용하고 flex-shrink:0;을 설정하셨는데인터넷 익스플로러가 사용되지 않는 현 시점에서 <link rel="short icon" type="image/x-icon" href="img/fun-coding.ico" />이와 같이 익스플로러의 호환성을 고려하는 행위가 현업에서 필요한지 궁금합니다!

모던 웹을 위한 상세한 모던 CSS Selector 정리3[2:49]에서셀렉터에 따른 css적용 모습을 보여주셨는데,css가 아래와 같이 작성된 상태에서 p:first-child { color: red; } p:last-child { color: blue; } p:nth-child(2) { color: green; } p:nth-last-child(2) { color: purple; } <body> <div> <p>1번</p> <p>2번</p> <p>3번</p> <p>4번</p> <p>5번</p> </div> </body>의 결과값은<body> <p>1번</p> <p>2번</p> <p>3번</p> <p>4번</p> <p>5번</p> </body>의 결과값은이렇게 나오는데, 왜 이런 차이가 발생하는 것인가요?제 생각엔, <div>태그가 없더라도 <body>태그를 기준으로 하면 last-child가 적용되는 자식 요소의 순서는 똑같아야 할 것 같은데 그 이유가 궁금합니다

인프런 아이디: tastybusango@gmail.com인프런 이메일: tastybusango@gmail.com깃허브 아이디: sonyeonghwa@gmail.com깃허브 username: sonyeonghwa

현재 .eslintre.js 가 오류로 범벅되고 밑줄에 커서를 대보면Delete `` eslint(prettier/prettier) 이 뜹니다..module.exports = { root: true, env: { browser: true, node: true, }, extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended', ], plugins: ['prettier', '@typescript-eslint'], rules: { 'prettier/prettier': [ 'error', { singleQuote: true, semi: true, useTabs: false, tabWidth: 2, printWidth: 80, bracketSpacing: true, arrowParens: 'avoid', }, ], }, parserOptions: { parser: '@typescript-eslint/parser', }, };를 정상적으로 복사 붙여넣기 했고 어느 부분에서 오류가 생긴건지 모르겠어 가지고 질문을 올립니다 ㅠㅠ 혹시 몰라 package.json 입니다.{ "devDependencies": { "@babel/core": "^7.23.7", "@babel/preset-env": "^7.23.7", "@babel/preset-typescript": "^7.23.3", "@typescript-eslint/eslint-plugin": "^6.18.0", "@typescript-eslint/parser": "^6.18.0", "eslint": "^8.56.0", "eslint-plugin-prettier": "^5.1.2", "eslint-plugin-react": "^7.33.2", "prettier": "^3.1.1", "typescript": "^5.3.3" } }  

const test1 = () => { let count = 0; const inner = () => { console.log(count); // closure }; inner(); }; test1(); const test2 = (initialValue = 0) => { let count = initialValue; const inner = () => { console.log(count); // block }; inner(); }; test2();test1의 inner에서는 count가 클로저 스코프를 갖는데, test2의 inner에서는 블록 스코프를 갖는 이유가 뭔가요?

안녕하세요! 강의 잘 보고 있습니다 ㅎㅎ다름이 아니라, import * as getters from './getters' 를 했는데 'import ... ='는 TypeScript 파일에서만 사용할 수 있습니다. ts(8002)라며 에러가 나네요 ㅠㅠ저는 뷰 3를 이용하고 있습니다! 

모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기10 / 5분20초 div태그 사이에 span태그를 넣었는데 span태그가 인라인 태그인건 알겠는데div태그는 블럭 태그라 원래 줄바꿈이 일어나는거 아닌가용 ?어떻게 줄바꿈이 안되고 한줄에 표시되는지 궁금합니다.

코드샌드박스가 많이 바뀐것 같아요.create 샌드박스 눌러도 바닐라 자바스크립트가 뜨질 않습니다.그리고 js 파일에서 console.log('test) 쓰고 실행은 어떻게하고 콘솔창은 어디에 있는건지 궁금해요.

저는 강의대로 vue2를 사용하고 있습니다.그런데 영상에선 main.js에 내용이new Vue({ el: '#app, render: h => h(App), });이렇게 되어있어서 el 밑에 store을 추가하셨는데,new Vue({ render: h => h(App), }).$mount('#app')저는 이렇게 되어있어서요. .$mount('#app')을 지우고영상과 같이 el: '#app'으로 변경하고 그 밑에 store을 추가하라는 말씀이신가요?

다음과 같이 오류가 나옵니다.안드로이드 에뮬레이터는 실행되지만 APP.js에서 작성한 코드를 띄우려 시도 불가입니다.FAILURE: Build failed with an exception.* What went wrong:Could not initialize class org.codehaus.groovy.runtime.InvokerHelper> Exception java.lang.NoClassDefFoundError: Could not initialize class org.codehaus.groovy.reflection.ReflectionCache [in thread "Daemon worker"]* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.* Get more help at https://help.gradle.orgBUILD FAILED in 4serror Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081FAILURE: Build failed with an exception.* What went wrong:Could not initialize class org.codehaus.groovy.runtime.InvokerHelper> Exception java.lang.NoClassDefFoundError: Could not initialize class org.codehaus.groovy.reflection.ReflectionCache [in thread "Daemon worker"]* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.* Get more help at https://help.gradle.orgBUILD FAILED in 4sat checkExecSyncError (child_process.js:616:11)at execFileSync (child_process.js:634:13)at runOnAllDevices (C:\Users\82107\kkk\my_first_app\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:39)at process._tickCallback (internal/process/next_tick.js:68:7)

state: { num: 10 }, mutations: { printNumbers(state) { return state.num; }, sumNumbers(state, anotherNum) { return state.num + anotherNum; } } this.$store.commit('sumNumber', 20);여기서첫번째 인자는 무조건 state라고 하셨는데, 그게 문법인가요? 아니면, printNumbers(state)처럼 값을 넣었기 때문인가요? state: { storeNum: 10 }, mutations: { modifyState(state, payload) { console.log(payload.str); return state.storeNum += payload.num; } } this.$store.commit('modifyState', { str: 'passed from payload', num: 20 });여기서도 modifyState를 호출하면서 같이 넘기는 값이, payload에 담기는건 항상 처음은 state이기 때문인가요? 

저는 main.js 파일을 보면new Vue({ render: h => h(App), }).$mount('#app')이렇게 되어있습니다.이게 el:'#app' 과 같다는건 아는데,store은 강의 내용과 같이 new Vue({ })안에넣으면 될까요? 아니면,.$mount('#app').$mount('store')이렇게 적어야 하나요?

앞서 App.vue에선,import TodoHeader from './components/TodoHeader.vue'하여components: { 'TodoHeader': TodoHeader, },이렇게 컴포넌츠를 등록했습니다. 그런데 왜 모달은 TodoInput.vue 파일에서components: { popModal: popModal, },이렇게 작은따옴표('') or 큰따옴표("")를 사용하지 않고 등록하는건가요? (정상작동은 합니다~!)

이 부분에서 index에 에러 메세지가 나옵니다.'index' is defined but never used 내용의 메세지가 나오는데, removeTodo(todoItem, index)에는 안나오는데 toggleComplete에만 나와요. <i class="checkBtn fa-solid fa-square-check" v-bind:class="{checkBtnCompleted: todoItem.completed}" v-on:click="toggleComplete(todoItem, index)"></i>toggleComplete: function(todoItem, index){ todoItem.completed = !todoItem.completed; }찾아보다가devServer: { overlay: false }이걸 추가하라는 글을 보고 추가했는데, 변화가 없길래 서버를 다시 실행 해봤습니다.그런데 오히려 저거 때문에 다른 오류가 발생하여 서버실행이 안됩니다.지우니까 다시 실행은 되는데.. 어떻게 해결해야 하나요? +) 처음 구현때 안되어서 주석처리하고 그대로 진행하다, 리팩토링때 다시 해봤는데, 리팩토링 코드로는 할일완료 기능이 정상 작동합니다. 무슨 차이가 있을까요?