프론트엔드 개발 문제 해결

프론트엔드 개발 중 발생할 수 있는 테스트, Vue 컴포넌트, Apollo Client 관련 일반적인 문제와 해결 방법을 설명합니다.

문제가 생겼나요? 이 가이드가 도움이 될 수도 있습니다 ¯\＿(ツ)＿/¯. 문제 해결 # 이 가이드에 해당 문제가 없는 경우 # 이 가이드에 없는 프론트엔드 개발 문제를 겪었다면, 해당 문제와 가능한 해결책을 이 가이드에 추가하는 것을 고려해 보세요. 이렇게 하면 미래의 개발자들이 여러분의 경험과 지식으로 무장하여 이러한 어려움을 더 잘 극복할 수 있습니다. 테스트 문제 # nodeType 속성 또는 메서드가 정의되지 않았지만 코드에서 nodeType을 사용하지 않는 경우 # 이 문제는 Vue 컴포넌트 테스트에서 기대값이 실패할 때 발생할 수 있습니다. Jest가 콘솔에서 diff를 pretty print하려고 할 때 오류가 발생하는 것입니다. 배열을 속성으로 사용하는 toEqual 을 사용하는 것도 원인 중 하나일 수 있습니다. 자세한 개요와 조사 내용은 이 영상 을 참조하세요. 해결 방법 - Vue 워처가 있는 객체를 클론해 보세요 - expect(wrapper.findComponent(ChildComponent).props()).toEqual(...); + expect(cloneDeep(wrapper.findComponent(ChildComponent).props())).toEqual(...) 해결 방법 - toEqual 대신 toMatchObject 를 사용해 보세요 - expect(wrapper.findComponent(ChildComponent).props()).toEqual(...); + expect(wrapper.findComponent(ChildComponent).props()).toMatchObject(...); toMatchObject 는 어설션의 성격을 실제로 변경하며, 기대값에서 일부 항목이 누락 되어 있어도 실패하지 않습니다. 스크립트 문제 # GitLab 리포지터리 내 스크립트 실행 시 core-js 오류 # 아래 명령은 GitLab 리포지터리가 ~/workspace/gdk 디렉터리에 설정되어 있다고 가정합니다. 코드 변환과 같이 GitLab 리포지터리 내에서 스크립트를 실행할 때 다음과 같은 core-js 관련 문제가 발생할 수 있습니다: ~/workspace/gdk/gitlab/node_modules/core-js/modules/es.global-this.js:7 $({ ^ TypeError: $ is not a function at Object.<anonymous> (~/workspace/gdk/gitlab/node_modules/core-js/modules/es.global-this.js:6:1) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Module._compile (~/workspace/gdk/gitlab/node_modules/pirates/lib/index.js:99:24) at Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Object.newLo