프론트엔드 개발 문제 해결

문제가 발생했나요? 아래 내용이 도움이 될지도 모릅니다 ¯\＿(ツ)＿/¯.

문제 해결

이 가이드에 포함되지 않은 문제가 있습니다

이 가이드에 포함되지 않은 프론트엔드 개발 문제가 발생하면, 여러분의 문제와 가능한 해결책을 업데이트하여 이 가이드를 보완해주세요. 이렇게 하면 향후 모험가들이 여러분의 경험과 지식을 바탕으로 더 많은 성공을 거둘 수 있습니다.

테스트 문제

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