내가 개발하는 코드가 어떻게 서버와 통신하고 그 결과를 받아오는 지에 대해 전체적인 그림을 그리지 못하고 지금껏 개발해온 것 같아요. "브라우저는 HTTP 프로토콜 기반의 통신을 한다", "TCP 통신은 3way handshake로 신뢰성을 확보한다.", "브라우저는 TCP / IP 기반의 통신을 한다." 이런 말들 중 하나도 제대로 이해하고 있는 게 없더라구요.  그래서 네트워크에 대해 잘 모르는 웹 개발자(저)를 대상으로 클라이언트 - 서버 간의 통신 과정을 쉽게 이해하기 위한 글을 써보았어요 ✨ 목차인터넷 상의 클라이언트 - 서버 통신 과정DNS : 주소를 IP 주소로 변환하기HTTP 요청 : 요청 메시지 전송 과정HTTPSURL 구성추후 "브라우저 설계"와 "Chrome 개발자도구 기능" 등의 ..

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

제가 할 수 있는 이야기가 무엇일까 생각해보았는데, 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..