next.js를 공부하던 중에, Link태그 내에 a태그를 사용하고 href 속성을 넣지 않으니, 접근성 린터에서 a태그인데 href속성이 없다고 에러를 띄웠다. 그래서 문득 생각이 들었는데, "Link 태그 내부에 a 태그를 쓰지 않아도 정상적으로 동작하는데 반드시 넣어야할까?" 그래서 그 이유를 찾아보기 시작했다. 역시 나보다 먼저 이런 고민을 하신분도 계신다. https://uchanlee.dev/nextjs/Why-using-a-tag-in-nextjs-Link/ 이 글에 따르면 https://github.com/vercel/next.js/blob/canary/packages/next/client/link.tsx 여기에 226라인에 보면, Link태그의 children이 string이면 a태그를 ..

The `document` global was defined when React was initialized, but is not defined anymore. This can happen in a test environment if a component schedules an update from an asynchronous callback, but the test has already finished running. To solve this, you can either unmount the component at the end of your test (and ensure that any asynchronous operations get canceled in `componentWillUnmount`),..

jest.spyOn(window.localStorage.__proto__, "getItem"); jest.spyOn(window.localStorage.__proto__, "setItem"); jest.spyOn(window.localStorage.__proto__, "removeItem"); localStorage를 mocking하여 테스트하는 방법은 위와 같다. 일반적으로 localStorage와 sessionStorage는 Storage 객체를 상속받는데, 그 상속받는 메서드를 모킹해줘야한다. 참고로 localStorage와 sessionStorage의 __proto__를 찍어보면 다음과 같다!

iframe 간의 통신을 사용하는것에 MessageChannel API를 사용하고 있는데, jest에서 모킹을하려하니까 안되었다. window.MessageChannel not defined... 이런 경우는 jest코드 상단에 아래와 같은 코드를 삽입하면 해결할 수 있다. window.MessageChannel = require("worker_threads").MessageChannel; worker_threads는 nodejs에서 기본제공해준다. 마찬가지로 MessagePort같은것을 mocking할 때에도 사용할 수 있다.

- jest를 선택한 이유 통합테스트는 단위테스트와 e2e테스트의 중간의 테스트 기법임. 그렇기에 통합테스트를 한다는 것은, 단위테스트와 e2e테스트의 장점을 동시에 가져갈 수 있으므로 가성비가 좋은 테스트라고 할 수 있기에 jest를 이용해서 사용. - jest에서 cypress로 바꿔보려고 결심한 이유 페이지 단위로 나누어 핵심 기능들을 테스트했고, 해당 테스트를 위해서는 매번 use~~로 시작하는 api를 비동기 요청하고 있는 커스텀훅들을 모킹해주어야 했고, 로직이 크게 변경되면 테스트 코드를 여러군데 많이 손보아야 했음. 이렇다보니 테스트코드가 정말 버그를 잡는 용도로서의 기능보다, 테스트 코드가 작성되있는 프로젝트야~ 라는 느낌의 테스트코드만 작성하게됨. 테스트가 유의미하다고 느껴지지 않을 정도..

프로젝트가 복잡해질수록, import 경로가 복잡해지는 경우가 있다. import "../../../../../../component/App"; 이렇게 되면, 제 3자가 봤을때 폴더의 구조를 파악하기도 힘들 뿐더러, ../ 문에 오타가 있을시에 수동으로 찾아나가는 수 밖에 없다. 그래서 필요한 것이 path aliasing이다. path aliasing은 특정 경로에 이름을 부여하여 그것을 path로 사용할 수 있다. 예를들어서, "@"를 "/src" 으로 지정해줄 수 있고, 갯수나 유형은 마음대로 가능하다. 그럼 이렇게 만들 수 있을 것이다. import "@/component/App"; 이제한번 "@"를 "/src"로 path alias 해보는 실습을 해보자. 1. webpack 설정 webpack...

https://www.jsdelivr.com/ jsDelivr - A free, fast, and reliable CDN for Open Source Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use. www.jsdelivr.com 원래 일반적으로 그냥 github나 gist에 배포해서 src에 js 주소를 넣어주면 되지 않나 싶었는데, 그렇게 하니까 CORS에러가 뜬다. 찾아보니 github repo나 npm 패키지를 cdn으로 배포해주는 무..

https://github.com/microsoft/TypeScript/wiki/Performance GitHub - microsoft/TypeScript: TypeScript is a superset of JavaScript that compiles to clean JavaScript output. TypeScript is a superset of JavaScript that compiles to clean JavaScript output. - GitHub - microsoft/TypeScript: TypeScript is a superset of JavaScript that compiles to clean JavaScript output. github.com 번역 https://yceffort.kr/..