에러 발생react-router-dom를 사용하는 코드의 playwright 테스트 중 아래와 같이 useNavigate 관련 에러가 발생했습니다. 단순 해결useNavigate는 react-router-dom 의 훅으로 서칭해보니 MemoryRouter 로 감싸주면 된다고 합니다. const component = await mount( , { hooksConfig } ); 이렇게 mount 시에 단순히 감싸는 식으로 해결할 수도 있겠지만, 이 부분을 공통화 할 수 있습니다. 공통화 시도 1import { MemoryRouter } from 'react-router-dom';import { AuthContext } from '@contexts';export const TE..

vite 프로젝트에서 playwright 를 설정했을 때, typecheck 를 돌리면 spec.tsx 에서 타입 관련 에러가 난다. 이 때는 `@playwright/test` 패키지를 설치해서 tsconfig의 compilerOptions.types 필드에 추가해주면 된다.{ "compilerOptions": { "types": ["node", "vite/client", "jest", "@testing-library/jest-dom", "@playwright/test"], }}

문제branchA 에 revert commit 이 포함되어 있고 main 에는 없을 때, branchA 에서 `git merge main` 을 수행하면 main 브랜치의 상태와 동일하게 revert commit 이 없는 것처럼 무시하는 경우가 있습니다. merge recursive 전략git 에서는 merge 명령어 사용 시 기본 전략으로 recursive 를 사용하는데, 이 전략은 다음과 같이 동작합니다.1. 두 커밋의 공통 조상 커밋을 찾습니다.2. 각 브랜치의 변경 사항을 조합해 새로운 병합 커밋을 만듭니다.3. 2번에서 충돌이 나면 사용자에게 해결을 위임합니다. (recursive 전략) 이슈 상황 자세히 이슈가 생겼던 상황을 그대로 가져와봤습니다.main branch 에서 24.12.0 브랜치를..

에러Error [ERR_REQUIRE_ESM]: require() of ES Module /app/node_modules/packageA/node_modules/packageB/dist/index.cjs.js from /app/node_modules/packageA/dist/cjs/hooks.js not supported.index.cjs.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.Instead either rename index..

아이폰 천지인 키보드에서 "유요" 라는 글자를 입력할 때, "융" -> "유ᄋᆞ" -> "유ᄋᆢ" 이렇게 입력이 되는데 한글만 대응하기 위해 넣어두었던 regex 가 동작하면서 글자를 지워버리는 이슈가 발생했습니다. [기존 Regex]return target.replace(/[^가-힣ㆍᆞᆢㄱ-ㅎㅏ-ㅣa-zA-Z\s]/g, '');한글, 영어가 아닌 문자는 제거하기 위한 regex 입니다. [이슈 원인] 종성 자음과 ㆍᆞᆢ 같은 첨자가 합쳐지면서 새로운 유니코드 문자를 만듭니다. [변경된 Regex]/*** 아이폰 천지인을 대응합니다.* \u1100-\u1112 자음 ㄱ-ㅎ* \u318D\u119E\u11A2\u2022\u2025\u00B7\uFE55 - ㆍᆞᆢ•‥·﹕*/ret..

오늘은 Next JS에서 Client Data fetching 사용 시 마주할 수 있는 Anchoring 이슈에 대해 정리하려 합니다. Next JS docs에서 권장하고 있는 코드 스타일을 적용했을 때 생길 수 있는 이슈이기 때문에, 관련 이슈가 생겼을 때 저는 디버깅에 시간을 꽤나 썼습니다. 먼저 Next JS의 Data fetching에 대한 지식이 전무할 분들을 위해 개념부터 정리하고 이슈에 대한 해결 과정을 차례로 적어보겠습니다. Data fetching Next JS를 이용한 Data fetching에는 다음과 같은 방법을 사용할 수 있습니다. 자세한 내용은 공식 문서를 참조해주세요! getStaticProps / getServerSideProps : Server Side에서 미리 page h..

개발을 진행하면서 안드로이드 OS에서 네이버 앱을 사용할 때 (특정 안드로이드 버전 - 아마도 11 이상 에서만) flex 레이아웃이 깨지는 이슈가 발생하였다. css를 다방면으로 고쳐보면서 해결해보았는데, 원인은 'flex-shrink를 지원하지 않는 것'이었다. (caniuse) 반응형 웹을 구축할 경우 해당 사례를 피하기 위해 css 코드에 flex-shrink 사용을 지양하도록 하자.

문제 상황 next/link를 사용한 GNB의 mouseEnter event가 작동하지 않아서 메인 메뉴에 마우스를 움직여도 subMenu가 바뀌지 않는 이슈가 발생한다. 원인 GNB에서 사용하는 LinkContext의 SuperLink를 next/link로 처리했는데, next 12 version에서 mouseHover 이벤트가 제대로 작동하지 않는 문제가 있다. fix(Link): Do not ignore onMouseEnter prop with absolute href by ericmatthys · Pull Request #32012 · vercel/next.js Fixes #22733 Regardless of whether it's recommended that Link be used with e..