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

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

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..

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

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..

작년, 실무에서 docker를 접하고 docker-copmose.yml 파일을 처음 사용해 보았다. 당시엔 당연하듯 docker-compose up 명령어를 통해 컨테이너를 생성했다. 하지만 어느 날엔가부터 docker compose명령어가 바뀌었다는 경고 메시지를 보게 되었다.확인해 보니 Docker 업데이트가 아닌 Docker compose 버전이 V1 ⇒ V2로 업데이트된 사항이었다. 뭐 그리 큰 이슈가 없을 거라 생각하고 새로운 프로젝트도 그렇게 잘 진행하였다. 문제는 추후에 일어나게 되는데… 작년에 마무리한 프로젝트를 고도화해보는 과정에서 docker 이미지 버전도 업데이트하는 과정이 있었다. 그런데 도통 서버가 열리지 않는 것이다. 이상하다 생각하고 디버깅해보니 .env파일을 아예 인식하지 못..

작년에 React deep dive 스터디를 했었다. 당시 context API를 Props drilling을 해결하기 위한 의존성 주입 도구로 활용할 수 있다는 걸 배웠다. 하지만 실무에서 props drilling이 깊어질수록 복잡해졌고 무작정 전역상태로 넘겨버리는 방식을 택하게 되었다. 그러다 최근 토스 FF 레포지토리에서 논의되는 것들을 보며 다시금 Context API의 본질을 고민하게 되었고 이렇게 글을 쓰게 되었다. Props DrillingReact는 부모 ⇒ 자식 컴포넌트로 이루어진 트리 구조를 가지고 있다.부모가 가진 데이터를 자식에서 사용하려면 props를 통해 전달해야 한다. 위와 같은 구조에서 A ⇒ D 까지 데이터를 전달하려면 중간에 있는 모든 컴포..

개인적으로 스스로 알고리즘에 좀 약하다고 생각이 많이 들고 있던 참이었는데 코드트리를 접하게 되었다.이때까지 써본 건 백준, 프로그래머스에서 레벨 순으로 그냥 찍먹 정도 해본 것 같다.부끄럽지만 제대로 알고리즘 공부를 한 적은 없다. 꾸준히 해야 되는 걸 알고 있기에 루틴 잡기가 어려웠다 코드트리에서 제공하는 테스트가 있는데 기초를 아예 처음부터 다져보고 싶어서 Level 1부터 그냥 냅다~ 시작했다.한 달 동안 이용해 본 코드트리의 장점들을 적어보고, 개선되었으면 좋겠는 방향도 말해보겠다. 기본개념에 대해 알려주고 방향 제시를 해주어 알고리즘 기초를 다지려는 사람에게 확실히 좋을 것 같다. 다른 것보다 문제의 기초를 확실히 잘 다져주는 게 느껴졌다. 타 플랫폼의 경우 이미 알고 있다는 전제하에 시작을 ..

2023년 6월 27일 JWT에 대한 글을 쓴 과거 Velog 포스팅을 보았다. 실무 경험도 없고, 이론적으로 이해가 되지도 않았던 때이지만 어떻게든 적어보며 익숙해질 때가 있지 않을까 하며 적은 당시가 생각났다. 다시 JWT에 대해 적어보면 얼마나 달라졌는지 비교할 수 있을 것 같았다. JWT를 접한 사람, 접하지 못한 사람 전부 누구나 이해할 수 있도록 쉽게 적어보려 한다.JWT JSON Web Token웹에서 사용되는 JSON 형식의 토큰 기반 인증 방식이다. 클라이언트와 서버 간 JSON 데이터를 안전하게 공유하기 위한 개방형 표준(RFC 7519). 간결하고 URL에 안전하게 사용할 수 있다는 장점이 있다. Session-Based Authoentication VS Token-Based Auth..

Javascript로 진정한 객체지향이 가능할까? 사실 어느 정도 도발이지만 스스로 이 간극을 탐구해보고 싶었다. 그리고 개인적인 욕심으로는 어렵기보다 쉽게 설명하고 싶다. Javascript와 객체지향 프로그래밍의 간극을 좁혀보고 진정한 객체지향이란 무엇인지 쉽고 편안하게 탐구하고자 한다! 객체지향 프로그래밍(Object-Oriented Programming)이란? 객체지향 프로그래밍은 프로그래밍의 패러다임 중 하나이다. 프로그램을 명령어의 목록으로 보는 시각에서 벗어나, 여러 개의 독립된 단위. 즉, "객체"들의 모임으로 파악하고자 하는 것이다. 이는 Wiki에서 정의한 객체지향 프로그래밍의 개념이다. 여기서 '프로그램을 명령어의 목록으로 보는 시각'은 절차적 프로그래밍(Procedural progr..