zinyon / trouble-shooting

개발을 하면서 문제를 해결한 경험을 이슈에 기록하는 repo

trouble-shooting

개발을 하면서 문제를 해결한 경험을 깃헙 이슈에 기록하는 repo

trouble-shooting's Issues

pupeteer를 활용한 크롤링시 주의할점

Problem

table안의 td를 하나 하나 크롤링하는데 마지막 td element의 a tag를 찾지 못하는 이슈

Cause

td가 tr마다 3개씩 배치되어있는데 마지막 tr에는 첫번째 td에만 콘텐츠가 존재했다.

Solution

콘텐츠가 있는 td와 없는 td를 구분하기 위해 td > .info 와 같은식으로 selector의 depth를 늘려줬다.

Learned

pupeteer를 활용하여 리스트 형식의 요소를 크롤링할 때 껍데기만 있는 요소가 없는지 확인하자

nested requestAnimationFrame

한줄 요약

Problem

paint 시점을 보장하면서 dom 조작을 하려면?
중첩 requestAnimationFrame

Cause

Solution

https://gist.github.com/getify/3002042#gistcomment-2351663

Learned

rtx-query not refetching after mutation

한줄 요약

Problem

rtx-query에서 tag를 이용해 mutation query 후 refetch해오는 로직을 구상하려 했는데 제대로 동작하지 않음

Cause

https://stackoverflow.com/questions/68166029/rtk-query-query-not-refetching-after-mutation
middleware에 등록하지 않으면 제대로 동작하지 않음.

Solution

store 구성시 middleware에 등록해야 함.

Learned

middleware로 어떤걸 등록하는가 ?? 알아보기
createApi로 만든 Api 객체의 middleware는 무엇인가?

UI 프레임워크 사용시 API 활용 제한 문제

UI 프레임워크 (ex-vuetify) 사용시에는 compoent에 정해진 API만 사용할 수 있다.

Problem

• v-list component에 dragStart event를 걸어줬으나 console로 찍어봐도 아무것도 나오지 않았다.

Cause

• v-list 관련 API에는 dragStart와 관련된 event가 없어서 event를 걸어도 실행되지 않는다.

Solution

• v-list를 감싸는 순수 html wrapper(ex-div)를 만들어준뒤 이 wrapper에 event를 걸면 된다.

Learned

• UI 프레임워크의 단점은 위와 같이 정해진 API 스펙만 사용할 수 있다는 점
• 따라서 커스터마이징 과정에서 불필요하게 코드가 길어질 수 있다.

[some object] defined in resolvers but not in schema error

위와 같은 에러가 났으면 object와 관련된 resolver를 잘 작성해주었는지 확인하자

Problem

postPerson이라는 resolver를 작성해주었는데 "people" defined in resolvers, but not in schema에러가 남

schema

const typeDefs = gql`
  type Mutation {
     ...     
     postPerson(input: PostPersonInput): Person!
  }
`;

resolver

const resolvers = {
   people: (parent, args) => dbWorks.getPeople(args),
   person: (parent, args) => dbWorks.getPeople(args)[0],
   peopleFiltered: (parent, args) => dbWorks.getPeople(args),
   peoplePaginated: (parent, args) => dbWorks.getPeople(args),
   postPerson: (parent, args) => dbWorks.postPerson(args) },
};

Cause

resolver의 유형(Query, Mutation)이 제대로 구분되지 않은 것이 문제였다.

Solution

다음과 같이 resolver의 유형을 적어주어 해결.

const resolvers = {
  Query: {
    people: (parent, args) => dbWorks.getPeople(args),
    person: (parent, args) => dbWorks.getPeople(args)[0],
    peopleFiltered: (parent, args) => dbWorks.getPeople(args),
    peoplePaginated: (parent, args) => dbWorks.getPeople(args),
  },
  Mutation: { postPerson: (parent, args) => dbWorks.postPerson(args) },
};

Learned

resolver와 schema는 1대1 매칭되어야 한다.

An index signature parameter type cannot be a union type. Consider using a mapped object type instead.

한줄 요약

Problem

Cause

Solution

https://soopdop.github.io/2020/12/01/index-signatures-in-typescript/

Learned