프론트엔드 개발 문제 해결

문제에 부딪혔나요? 아마 이것이 도움이 될 것입니다 ¯\＿(ツ)＿/¯.

문제 해결

이 가이드에 나와있지 않는 문제입니다

이 가이드에 실리지 않은 프론트엔드 개발 문제에 부딪히면, 여러분의 문제와 가능한 해결책을 이 가이드에 업데이트하는 것을 고려해보세요. 이렇게 하면 미래의 모험가들이 여러분의 경험과 지식으로 더 나은 결과를 얻을 수 있게 된다.

테스트 문제

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);
    },
  );