개요과제 할 때마다 프로젝트를 세로 세팅하는게 번거로워서 react 프로젝트를 스캐폴딩해주는 cli를 만들고 있었습니다.노드니까 모듈 시스템을 cjs를 사용해야한다고 생각하고 있었는데, 정말 그런가 의구심이 들어 조사를 하였습니다.결론적으로는 노드에서도 ESM을 사용할 수 있는데 어떤 차이점이 있는지 요약합니다.CommonJS와 ESM의 차이점트리쉐이킹요즘 현대에는 vite 등 번들러들이 기본적으로 트리쉐이킹을 지원하여 사용되지 않는 코드를 없애 번들 크기를 줄여줍니다.하지만 CommonJs는 모듈을 사용하고 있다는 것을 런타임이 되어서야 알 수 있어서 트리쉐이킹을 어렵게합니다.ESM 호환성CommonJs 모듈시스템 프로젝트에서는 외부 ESM 모듈 라이브러리를 사용할 수 없지만, ESM 모듈시스템 프로젝..

Spec Kit , shrimp taskmanager, Task Master AI 차이점을 비교합니다.1. 🎨 Spec Kit: "AI와 함께 '설계도'부터 만들자"언제 사용하나요? 아이디어는 있지만, 이걸 어떻게 구체적인 '기능 명세서'로 만들지 막막할 때 사용합니다.작동 방식:사용자가 /specify 명령어로 "SNS 앱 만들고 싶어"라고 아이디어를 던집니다.AI가 "그럼 사용자 인증, 피드, 팔로우 기능이 필요하겠네요"라며 spec.md라는 명세서 파일을 함께 작성합니다.이 명확한 명세서(설계도)를 기반으로 코딩을 시작합니다.핵심: '감(Vibe)'으로 코딩하는 것을 막고, **AI와 합의된 '명세서'**를 만드는 것이 목적입니다.2. 🦐 Shrimp Task Manager: "AI, 네가 '알..

JavaScript 패키지 관리 아키텍처 심층 분석npm, Yarn, pnpm의 진화와 메커니즘들어가며: 단순한 “패키지 설치 도구”가 아닌, 프로젝트의 인프라개발을 하다 보면 누구나 한 번쯤 npm install을 입력해봤을 것입니다.하지만 단 한 줄의 명령어 뒤에 숨은 복잡한 메커니즘과 아키텍처적 선택에 대해 진지하게 생각해본 적은 많지 않습니다.사실, JavaScript 생태계에서 패키지 매니저의 선택은 단순한 도구 결정이 아닙니다.그건 팀의 개발 문화와 철학을 반영하는 아키텍처적 결정입니다.빌드 속도, 캐시 전략, CI/CD 효율성, 그리고 팀 전체의 생산성까지 이 한 선택에 영향을 받습니다.JavaScript 패키지 매니저의 역사는 말 그대로 ‘문제 해결의 역사’입니다.npm으로 시작해 Yarn..

🚀 Cursor에서 유용하게 사용중인 MCP서론: ‘MCP’란?‘Vibe-Driven Development’라 불리는 최신 AI 코딩 워크플로우는 Cursor 같은 IDE를 통해 현실이 되었습니다.이제 개발자는 AI와 대화하며 코드를 작성하지만, 곧 한계에 부딪힙니다.AI가 외부 세계와 단절되어 있고, 로컬 파일 시스템이나 최신 라이브러리 정보에 접근할 수 없기 때문입니다.이 문제를 해결하기 위해 등장한 것이 바로 MCP(Model Context Protocol)입니다.MCP는 AI 모델(MCP 클라이언트)이 외부 도구 및 데이터 소스(MCP 서버)와 안전하고 표준화된 방식으로 상호작용할 수 있게 하는 프로토콜입니다. 쉽게 말해, AI를 위한 USB-C 포트 또는 범용 API 어댑터라 할 수 있습니다...

들어가며REST vs GraphQL이전 직장에서 REST API로 구축된 프로젝트를 GraphQL로 전환하는 과정을 경험했습니다. 이 경험을 통해 오랫동안 웹 API의 표준처럼 여겨져 온 REST의 자원(Resource) 중심 접근 방식과, 최신 애플리케이션의 복잡한 데이터 요구에 맞춰 등장한 GraphQL의 클라이언트 중심 접근 방식이 어떻게 다른지 체감할 수 있었습니다. 좀 더 명확한 차이점을 이해하기 위해 각 기술이 어떻게 탄생했고, 어떤 핵심 원칙을 가지고 있는지, 그리고 실제 어떤 상황에 사용하면 좋은지, 나아가 캐싱이나 보안 방식의 차이점까지 조사했습니다.REST란? — 웹을 위해 만들어진 아키텍처 스타일REST의 탄생등장 배경과 동기REST는 2000년 로이 필딩의 박사 논문에서 처음으로 소..

저희 회사에서는 openapi 스펙으로 api 스펙을 정의하여 백엔드와 프론트엔드간에 api 스펙을 공유하고 있습니다.프론트엔드에서는 openapi generator에서 제공하는 typescript-axios를 사용하여 타입스크립트로 코드젠을하여 api에 대한 타입 정의를 자동적으로 생성하고 있습니다.openapi generator에 대한 간단한 소개와 사용하면서 부딪친 버그들을 소개하겠습니다.openapi generator란openapi-generator는 위에서 설명한 것 처럼 openapi 스펙으로 정의된 문서를 다양한 코드로 코드젠을 해주는 도구입니다.  install설치 방법은 공식문서를 참고 하시는 것이 제일 좋습니다. 예시는 brew를 사용하여 설치하는 방법입니다.brew install op..

어플리케이션에서 로그인을 구현하는 방법은 인증을 서버의 세션에서 할지 토큰을 통해서 할지에 따라서 달라지게 됩니다. 이번 글에서는 JWT를 사용하여 로그인을 구현하는 방법에 대해서 작성합니다. 세션 방식과 토큰 방식의 차이점은 아래 글에서 확인 할 수 있습니다. 쿠키, 세션(cookie, session)과 토큰 (token, JWT)의 차이점 웹 어플리케이션에서 로그인을 구현하는 방법은 크게 쿠키, 세션을 이용하는 방법과 토큰을 이용하는 방법 2가지가 있습니다. 간단히 말하면 쿠키, 세션 방식은 서버에서 세션아이디를 기록하 jcon.tistory.com Access token & Refresh token JWT 토큰을 사용하여 로그인을 구현할 때에는 보통 access token과 refresh token..

husky, commitlint husky는 git의 hook들을 쉽게 관리하게 해주는 툴입니다. husky에 commitlint를 사용하여 git commit시에 prefix를 쉽게 적용하고, commit 메세지에 대한 검사를 진행하기 위해 적용하는 것을 선호합니다. npx husky-init && npm install npm install --save-dev @commitlint/cli @commitlint/config-conventional commitizen npx commitizen init cz-conventional-changelog --save-dev --save-exact npx husky add .husky/commit-msg 'npx --no-install commitlint --ed..

웹 어플리케이션에서 로그인을 구현하는 방법은 크게 쿠키, 세션을 이용하는 방법과 토큰을 이용하는 방법 2가지가 있습니다. 간단히 말하면 쿠키, 세션 방식은 서버에서 세션아이디를 기록하고 브라우저에서 쿠키를 저장하는 방법이고 토큰 방식은 토큰을 발행하여 토큰의 유효성을 검증하는 방법입니다. 쿠키, 세션 (cookie, session) 사용자(클라이언트)가 서버에 자원을 요청 시 서버에서 사용자를 특정할 수 있는 데이터를 기반으로 세션 아이디를 생성하고, 해당 아이디를 키값으로 하여 필요한 값들을 서버의 메모리에 저장하고, HTTP 프로토콜의 header의 setCookie를 통해서 브라우저의 쿠키에 세션 아이디를 기록하도록 합니다. 브라우저는 request 요청을 보낼 시 header에 cookie를 자동..