에러 발생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..

얼마 전 친한 동료 분이 블로그에서 저의 회고 글을 봤다고 말씀해주신 게 계기가 되어 오랜만에 회고를 작성해 봅니다. 그러다 보니 제목이 필요해서 자연스럽게 “3년차 개발자의 회고록” 이라고 써버렸는데, 언제 3년차가 되어 버린 건가 싶어요. 어쨌든 스스로 부담 주지 않고 가볍게 저에 대해서, 그리고 앞으로 어떻게 하고싶은지에 대해서 써보려고 합니다. 반성의 시간나의 자만에 대하여사족이지만 올해 연초에 토정비결을 봤었는데 첫 문장이 “분수에 맞게 살라” 였어요. 지금껏 제 실력보다 운이 좋아서 많은 일들이 잘 풀려왔는데, 그로 인해 제가 대단한 개발자인양 착각하고 있었던 것 같습니다. 일을 할 때 저의 말투나 질문 습관, 그 안에 숨어있는 생각들이 점점 자만으로 물들어가는 걸 느끼던 차였어요. 그만하라고..

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

제가 할 수 있는 이야기가 무엇일까 생각해보았는데, 2023년 가을 “오늘의가든” 이라는 프로덕트를 런칭 해 본 경험을 기반으로 앱 개발을 해보면서 느낀 웹 개발과의 차이점을 주로 다루고 대부분의 서비스가 모바일 퍼스트가 된 현시점에서 앱을 웹뷰 / 네이티브 / 하이브리드로 구성하는 방법과 각자의 장단점을 살펴보려고 합니다. https://yozm.wishket.com/magazine/detail/1969/ 이 블로그에서 글을 보고 마지막 도표의 글에 혹해서 글을 써야겠다고 생각하게 되었습니다. "2023년 2월 기준 전 세계 웹 사이트 트래픽의 60.06% 가 모바일 디바이스를 통해 유입되었습니다." 앱 개발은 웹 개발과 뭐가 다를까? 크게 “배포”와 “메모리 관리” 그리고 “UI 계층구조” 세가지 측..

Next.js에서 대응이 되어 있지 않은 `/` path로 진입했을 때 default `/home` page로 redirect 하는 스펙을 구현해야 한다. Redirect 시 사용하는 상태코드 Next.js에서의 redirect 를 구현하기 전 redirect 시에 서버에서 반환하는 상태코드를 먼저 살펴보자. 300번 대의 상태코드는 모두 Redirection 을 의미하며, 300 ~ 308 까지 있다. 301 (Moved Permanently) : 클라이언트의 요청 메소드를 GET 으로 바꾸며, redirect 처리가 캐싱된다. 302 (Found - Moved Temporarily) : 클라이언트의 요청 메소드를 GET 으로 바꾸며, redirect 처리가 일시적이고 캐싱되지 않는다. 304 (Not..