toggleComplete(todoItem, index)에러

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

TodoList 컴포넌트의 할 일 완료 기능 구현

작성

271

수정됨

이 부분에서 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
  }

이걸 추가하라는 글을 보고 추가했는데, 변화가 없길래 서버를 다시 실행 해봤습니다.

그런데 오히려 저거 때문에 다른 오류가 발생하여 서버실행이 안됩니다.

지우니까 다시 실행은 되는데.. 어떻게 해결해야 하나요?

+) 처음 구현때 안되어서 주석처리하고 그대로 진행하다, 리팩토링때 다시 해봤는데, 리팩토링 코드로는 할일완료 기능이 정상 작동합니다. 무슨 차이가 있을까요?

javascript vue.js es6 vuex

답변 2

장기효(캡틴판교)

지식공유자

안녕하세요, index 파라미터를 선언하고 사용하지 않아서 나오는 ESLint 에러입니다. ESLint는 문법 검사 에러라서 크게 신경 쓰지 않으셔도 돼요. 이후 강의에서 차례대로 안내될 예정입니다. 먼저 살펴보시려면 아래 글 확인해 보세요 :)

https://joshua1988.github.io/web-development/vuejs/boost-productivity/

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

‘index is defined but never used’에러는 index 변수가 정의되었지만 코드 내에서 사용되지 않았을 때 나타나는 경고 메시지입니다. removeTodo 함수에서는 index를 사용하고 있지 않기 때문에 해당 경고가 나타나지 않습니다.

devServer: { overlay: false }를 추가했을 때 다른 오류가 발생한 것은, 웹팩 DevServer 설정에 있어서 다른 설정과의 충돌이나 문제로 인해 발생할 수 있습니다. 구체적인 오류 메시지나 상황을 알려주시면 더 정확한 원인 파악 및 해결 방안을 제시할 수 있겠습니다.

+) 구현 단계에서 작동하지 않았던 toggleComplete 함수가 리팩토링 후에 정상 작동하는 부분에 대해서는 코드의 차이에서 원인이 있을 수 있습니다. 리팩토링 과정에서 코드 구조가 개선되거나, 다른 부분의 코드 수정으로 인해 간접적으로 해당 기능이 올바르게 동작하게 된 경우일 수 있습니다. 구현 단계의 코드와 리팩토링 후의 코드를 비교해보며 차이점을 분석해보시는 것이 좋겠습니다.

Vue.js에서 일반적으로 경고 메시지는 개발자 도구를 통해 코드 품질을 높이고자 할 때 유용하게 사용됩니다. 함수에서 index 매개변수가 필요하지 않다면 제거하거나, 만약 나중에 사용할 가능성이 있다면 당분간 경고 메시지가 나타나는 것을 허용할 수도 있습니다. 만일 해당 경고 메시지를 무시하고자 한다면 ESLint 설정을 변경하여 특정 경고를 무시하도록 설정할 수도 있습니다.

도움이 필요하시면 더 자세한 코드와 오류 메시지를 제공해주시면 더 정확한 해결책을 찾는 데 도움을 드릴 수 있을 것 같습니다.

인프런 커뮤니티 질문&답변

toggleComplete(todoItem, index)에러