nami.Socket()

Latest Post

React Router 와 TanStack Router 비교해보기

이직을 하고 적응 + 새로운 루틴을 만드느라 글을 오랜만에 쓴다.. (반성)이전엔 Vite로 적용되는 React 기본 폴더 구조를 썼고 React Router의 코드 기반 라우팅을 사용해 봤던 경험이 많았다. 그러다 최근에 Next를 프로젝트에서 파일 시스템 구조에 맞춰서 자동으로 라우팅을 연결해 주는 File-based Routing을 사용해 본 경험으로 인해 편리함을 맛보아서 그런지 React에서도 비슷하게 사용하고 싶었다. 그러다 TanStack Router를 알게 되었다.TanStack Router를 적용해보면서 기존에 써봤던 React router와의 차이를 비교해보려 한다.단기간 사용으로 느낀 점을 다루다 보니 실제 TanStack의 잠재성보다 얄팍할 수 있다는 점,, 말씀드린다.React R..

React 2025.10.26 0

Docker Developer Community Day 밋업 참여 후기

백엔드 개발자 분의 권유로 처음으로 참여하게 된 Docker Developer Community Day Korea.Docker와 AI 에이전트: 자동화의 미래라는 주제로 Docker Korea에서 주최하였고 단군소프트라는 곳에서 진행했다. 이번 커뮤니티 데이의 주제는 "Docker와 AI 에이전트: 자동화의 미래"입니다. 컨테이너 활용 능력을 향상하고, 워크플로우를 최적화하고, AI 및 컨테이너 기술의 발전을 탐구하고자 하는 개발자들을 위해 마련되었습니다. Docker의 MCP Catalog, Developer Toolkit이 AI 에이전트 배포 및 자동화에 어떻게 혁신을 가져오는지 알아보실 수 있습니다. 또한, 지능형 자동화 시스템의 미래에 대해 전문가들로부터 배우고, 업계 동료들과 네트워킹하실 수 있..

2025 2025.06.05 6

NestJS Proxy 마이그레이션 삽질기: body가 사라졌어요

Express에서 Nest로 마이그레이션 중, 예상치 못한 오류가 생겼다.프록시 부분을 제일 마지막에 진행하게 되어서 마이그레이션 테스트 중, 웹에서 400 Bad Request가 뜨는 것. ping을 날려보면 서버는 잘 켜져 있다. data form이 잘못 전달된건가 하고 프론트에서 Axios 세팅을 수정해보던 중… “Express에선 잘 되더니, Nest로 마이그레이션하니까 안 되는 거야? 프론트는 그대로인데 왜?”정확한 에러 상황 파악하기 NestJs 기반의 서버 앞단에 Gateway(proxy server)가 있고 프론트에서 /login 경로로 POST 요청을 Gateway로 보낸 후, Gateway가 http-proxy-middleware를 통해 이 요청을 NestJS서버의 /login endp..

Problem Drilling 2025.05.19 0

수동 Docker 배포, 이젠 STOP — GitHub Actions로 자동화하기

이번에 기존 Express기반 프로젝트를 NestJS로 마이그레이션하면서, Monorepo 구조로 서비스를 재정비하고 있었다. 서비스가 여러 컨테이너로 나뉘어 있다 보니, 매번 수동으로 docker build -> tag -> push 과정을 반복해야 했다. 그러다 이 폴더, 저 폴더 오가며 수동 배포하는 시간이 너무나 비효율적으로 느껴졌다. 사실 이전에 자동화하고 싶기도 했지만 러닝커브가 있을 거란 생각에 망설인 점도 있었다. 그러던 중, Github Actions를 활용해 해당 과정을 자동화한 케이스를 발견했고, 직접 테스트해본 결과 예상보다 훨씬 간단하게 적용할 수 있었다. 결과적으로 이전에 비해 훨씬 편해졌다.. 비슷한 고민을 하고 있는 개발자들에게 도움이 되길 바라는 마음으로 글을 작성하게 되었..

Development Environment 2025.03.30 0

pnpm은 왜 Lifecycle module을 v10에서 차단했을까?

pnpm를 v10으로 업데이트한 뒤 bcrypt 모듈을 찾을 수 없다는 에러가 발생했다. 문제의 원인을 파악하는 과정에서 v10부터 Lifecycle module을 빌드시 포함하지 않는다는 것을 알게 되었다. 나는 앞으로 pnpm v10을 써야만 한다. 따라서 pnpm v10을 안정적으로 사용하기 위해 알아보고자 한다. 1️⃣ 에러가 난 이유의 핵심, v10 변경사항2️⃣ Lifecycle module에 대한 정의3️⃣ 바뀐 이유는?4️⃣ Lifecycle module이 포함되게 하려면 어떻게 해야할까? 해결 방법!pnpm v10 변경사항 [Bug]~new pnpm v10 version has conflicts with bcrypt 5.1.1 · Issue #9042 · pnpm/pnpmVerify la..

Development Environment 2025.03.15 0

Best

React Router 와 TanStack Router 비교해보기

React 2025.10.26 0

React Fiber... 어렵지만 친해지고 싶은 고마운 친구

리액트 스터디 중 "가상DOM과 리액트 파이버" 주제가 나왔다. 발표를 맡게된 리액트 렌더링 부분을 준비하고, 발표 당일 스터디원들과 얘기하며 조금씩 윤곽이 잡히기 시작했다. 하지만 여전히 어려운 건 매한가지... 그러다가 좋은 글을 발견했는데 포스팅 일자가 리액트 15,16 기준이라 렌더가 동기식으로 진행된다고 되어있어서 🤔 제대로 스터디 내용을 복기할 겸, 그리고 파이버와 좀 친해질 겸 포스팅 주제로 선정하게 되었다. 조금 의문이었던 것은 재조정 과정은 똑같고, 여전히 유효할 것 같은데 리뉴얼된 React 사이트에는 파이버와 관련된 내용이 전부 생략되어있다. 왜일까????? 그래서 더 어렵게 느껴졌던 것 같다. 더이상 관련이 없는 내용인지? 레거시한 부분인 건지에 대한 고민. 리액트 파이버 아키텍처 ..

React 2023.12.18 14

Vite config파일 수정해서 배포 디렉토리 상대 경로로 변경하기

Vite로 TypeScript + React 프로젝트 세팅을 하던 중 pnpm run dev 를 사용하여 로컬 서버를 실행했을 땐 잘되었는데 빌드를 하고 배포 파일(dist)에 저장된 정적파일은 404 오류가 떴다. 백엔드 분께서 배포 파일을 확인해달라고 하셔서 확인해보았는데 dist폴더 내 assets폴더(dist/assets) 안에 있는 파일들을 읽어내지 못했고 경로 설정의 문제가 있음을 확인했다! 절대경로로 되어있는 파일들을 상대경로로 바꿔주어야 했다. 그런데 dist 파일의 경우 수동적으로 상대경로를 설정해주어도 빌드를 실행하면 어차피 똑같이 절대경로로 된다. 그렇기에 빌드시 적용되는 Default Path로 `/`로 되어있는 것 같은데 이것을 `./` 이렇게 바꿔주고 싶어서 Vite config..

Problem Drilling 2023.10.29 0

Recommended Posts

Latest Post

Best

티스토리툴바