데브머리큐

MSW(Mock Service Worker) MSW는 서비스 워커(Service Worker)를 사용하여 실제 요청(Requests)을 중간에서 가로채 API를 Mocking 해주는 라이브러리이다. 기존의 라이브러리들과는 다르게 네트워크 단에서 실제로 요청을 주고받으며 테스트를 진행할 수 있는 장점이 있으며, REST API 및 GraphQL 모두 지원하고 있다. 프런트엔드 개발에서 Mock API는 떼려야 뗄 수 없는 부분인 것 같다. 개발을 위한 목업 데이터 만들고 관련 로직과 컴포넌트를 만든다. API 개발을 기다리며 타입을 작성하고, 여러 가지 테스트를 진행한다. 여러 이슈들은 대부분이 잘못된 API를 호출하거나 에러 처리를 잘못하였을 때 발생하기 때문에 Mock API를 사용하여 디버깅을 해보는..

Nuxt를 사용하면서 발생한 에러. 에러가 불친절해서 Nuxt github에 feature issue를 올렸다. 답변이 굉장히 빨랐는데, 관련 이슈를 훑어보니 비슷하게 생각하는 사람들이 몇몇 있었던 모양이다. Warn needs to be much more specific when there's no root element in · Issue #6476 · nuxt/framework Describe the feature these are vue components in my pages directory // pages/index.vue Home page 1... github.com Nuxt에서도 이를 인지하고 있는 것인지 관련 PR이 올라와있다. feat(nuxt): add warning in dev m..

css :hover를 사용해서 간단히 구현할 수 있다고 생각했던 기능이 있습니다. pacakges: React, styled-component 아래의 gif 같이 마우스를 올렸을 때, 마우스가 올라간 컴포넌트만 배경의 색이 바뀌어야 했는데요. css의 :hover를 사용하니 원하는 대로 동작하지 않았습니다. css만 사용해서 원하는 hover 동작을 만드려고 하니 부모 컴포넌트만 배경색이 바뀐다거나, 자식 컴포넌트의 색깔만 바뀌었습니다. 혹은 모든 컴포넌트에 적용이 되었습니다. 자식 컴포넌트에 마우스를 올리면 부모에도 css로 적용한 :hover가 적용이 되었습니다. 이렇게요. css 부모 선택자를 활용해보거나, nth-child를 활용해보려 했지만 원하는 동작을 구현할 수 없었습니다. 더불어, 이후에 ..