동료분이 공유주신 XL8 배휘동님의 세미나 공유용 PPT 를 보고, 상태 관리 관련해서 내가 어느 정도 알고 있는지 모르는 건 없는지 보고 싶은마음에 ChatGPT 를 이용해서 공부를 해봤다. 우선 아래는 4개의 이미지를 붙여넣고 예시 코드를 달라고 해서 정리한 내용. 정리한 내용useState 수련생useState 사용해 상태 업데이트props 전달 위주로 구성간단한 이벤트 처리function Counter() { const [count, setCount] = useState(0); return ( setCount(count + 1)}> Count: {count} );} 의사결정 포인트"이건 상태로 관리해야 해?""그냥 변수여도 되는 거 아닌가?"자주 겪는 문제불필요한 상태..

ALB, Ingress, Node.js, Kubernetes 구조 쉽게 이해하기최근 입사하신 동료분의 질문에 섞여있는 "ALB", "Ingress", "ECR", "Kubernetes" 같은 단어들을 제대로 이해하지 못하고 있음을 깨닫고 정리해봅니다. 우리 웹 서비스가 사용자에게 도달하는 흐름을 이해하면 이 단어들의 의미가 자연스럽게 연결됩니다.이 글은 프론트엔드 코드가 어떻게 배포되고 사용자 브라우저에 전달되는지 전체 흐름을 쉽게 정리한 내용입니다.전체 흐름 요약프론트엔드 코드는 Docker로 빌드되어 AWS의 Kubernetes에 배포되고, 사용자는 ALB → Ingress → Node.js 서버를 거쳐 서비스를 전달받습니다. 사용자 → 서버까지 요청 흐름사용자가 웹사이트에 접속하면, 요청은 다음과..

최근 동료분이 "SSR 페이지에서 미리 데이터를 받아오는 경우 useQuery 의 isLoading 이 true 인 경우가 있어요?" 라는 질문을 던졌는데, 이 질문에 대한 대답을 생각하다가 여러 의문이 생겨 글로 정리해본다. 용어 정리- 서버사이드 : 웹서버의 서버 쪽 코드 실행- 클라이언트사이드 : 웹서버의 클라이언트 쪽 코드 실행- SSR : ServerSideRendering- CSR : ClientSideRendering- 서버 : api 를 제공하는 실제 서비스 서버 예시 코드: SSR + useQuery나는 아래와 같은 코드를 주로 사용하고 있었다.// Next.js 의 페이지 컴포넌트export const getServerSideProps = async () => { const data ..

내가 개발하는 코드가 어떻게 서버와 통신하고 그 결과를 받아오는 지에 대해 전체적인 그림을 그리지 못하고 지금껏 개발해온 것 같아요. "브라우저는 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..