프론트엔드 개발 문제 해결

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

문제 해결

이 안내서에 당신이 겪은 문제가 포함되어 있지 않음

이 안내서에 없는 프론트엔드 개발 문제에 부딪히면, 당신의 문제와 가능한 치료법을 사용하여 안내서를 업데이트하는 것을 고려해보세요. 이렇게 하면 향후 모험가들은 여러분의 경험과 지식으로 무장하여 더 많은 성공을 거둘 수 있습니다.

테스트 문제

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 이후에 설정되지 않은 속성을 참조할 때 오류가 발생함을 의미합니다.

더 많은 맥락은 이 종료된 MR에서 확인할 수 있습니다.

치료법 - 최상위 Vue 인스턴스 옵션에 apolloProvider를 제공해 보세요

VueApollo는 $options에서 apolloProvider가 제공되는 것을 볼면 매뉴얼으로 provide() 실행을 건너뜁니다. 

  new Vue(
    el,
+   apolloProvider: {},
    render(h) {
      return h(App);
    },
  );