프론트엔드 개발 문제 해결
문제에 부딪혔나요? 아마 이것이 도움이 될 것입니다 ¯\_(ツ)_/¯.
문제 해결
이 가이드에 나와있지 않는 문제입니다
이 가이드에 실리지 않은 프론트엔드 개발 문제에 부딪히면, 여러분의 문제와 가능한 해결책을 이 가이드에 업데이트하는 것을 고려해보세요. 이렇게 하면 미래의 모험가들이 여러분의 경험과 지식으로 더 나은 결과를 얻을 수 있게 된다.
테스트 문제
Property or method `nodeType` is not defined
but you’re not using nodeType
anywhere
이 문제는 Vue 컴포넌트 테스트에서 발생할 수 있는데, 기대값이 실패할 때 콘솔에서 diff를 출력하려고 Jest가 시도할 때 오류가 발생할 때 발생합니다. 배열을 속성으로 사용하여 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.newLoader [as .js] (~/workspace/gdk/gitlab/node_modules/pirates/lib/index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (~/workspace/gdk/gitlab/node_modules/core-js/modules/esnext.global-this.js:2:1)
해결책 - 스크립트를 별도의 리포지터리로 이동시켜서 GitLab 리포지터리의 파일을 가리키도록 시도해보세요
Vue 컴포넌트 사용 문제
GlFilteredSearch를 사용하는 컴포넌트 렌더링 및 해당 컴포넌트 또는 부모가 Vue Apollo를 사용하는 경우
GlFilteredSearch를 렌더링하려고 할 때, 컴포넌트의 provide
함수에서 오류가 발생할 수 있습니다:
cannot read suggestionsListClass of undefined
현재, vue-apollo
는 컴포넌트 라이프사이클의 beforeCreate
부분에서 매뉴얼으로 provide()
를 호출하려고 시도합니다. 이는 provide()
가 실제로created
이후에 설정되어야 하는 props를 참조할 때 문제가 발생할 수 있다는 것을 의미합니다.
추가 맥락은 이 MR에서 확인할 수 있습니다.
해결책 - 최상위 Vue 인스턴스 옵션에 apolloProvider
를 제공해보세요
VueApollo는 $options
에서 apolloProvider
가 제공되는 경우 매뉴얼으로 provide()
를 실행하지 않습니다.
new Vue(
el,
+ apolloProvider: {},
render(h) {
return h(App);
},
);