메로그

미장 플라스~ 라는 이름으로, 미즈 라고 불리는 개발 환경 올인원 매니저 입니다.기존에는 nvm 대비 가볍고 빠른 성능을 이유로 volta를 사용하고 있었고 지금까지도 아주 좋은 평으로 쓰고 있었습니다.그러나 2024년 12월 5일 이후로 추가 릴리즈는 진행되지 않고 있어서 대체제를 찾던 도중에 훨씬 더 좋은(?!) 매니저를 이번에 찾게 되어서 소개드립니다. 바로 mise-en-place 로 미즈, 미장 플라스 라고 불리고 있습니다.https://mise.jdx.dev/ Home | mise-en-placemise-en-place The front-end to your dev env Pronounced "MEEZ ahn plahs"mise.jdx.dev 홈페이지로 접속해서 보실 수 있고, 기존 volta..

shadcn create 가 출시되면서, 나만의 shadcn ui 를 create 에서 조정해서 프리셋을 만들고 해당 프리셋을 명령어 기반으로 create project 를 진행할 수 있게 되었다.또한, 기존에는 radix ui 를 기반으로 디자인 시스템이 만들어졌는데, radix ui 의 업데이트 관련되서 여러 불만이 있었고 이번에 base ui 를 디자인 시스템으로 선택할 수 있도록 추가되었다. 사용하기다음 shadcn create 로 접속하여 조정한 다음에 형상을 확인하면서 스타일을 조정할 수 있다. 접속하면, 위와 같은 화면이 나오는데 오른쪽에서 ui, style 등을 선택하여 조정할 수 있으며, 조정이 끝난 후에 오른쪽 상단에 Create Project 를 눌러서 프리셋 명령어를 뽑을 수 있다..

해당 내용은 실무에서 경험한 느낌을 기반으로 작성하였기에 참고 바람.AX 도입 시작...생산성 향상을 위한 미션을 받았다...고민 끝에 AX 를 회사내에서 도입하기로 결정하였고 그에 따라 현 상황에 맞춰서 1차, 2차적으로 도입을 진행하는데,1차는 팀 내 mcp, ai tools 를 먼저 도입하였다. 기존에 툴들이 각각 다르게 사용하고 있었고 그를 통합하고 mcp 활용 방법도 제시하여 통일하였다. 2차는 이제 익숙해진 상황에서 가벼운 AX 자동화 즉, cursor 를 활용한 github spec kit + sdd 기반 자동화 개발 프로세스를 구축, 문서는 컨플루언스에 저장하여 관리하였고 실제 프로젝트에 적용하면서 생산성을 90% 가까이 올렸다. 3차에서 이러한 과정을 통해 인프라 필요성을 느꼈고 이제 도..

Plate.js, Yjs, WebRTC를 사용하여 구글 독스 같은 실시간 협업 에디터를 만들어봅니다.프로젝트 소개구글 독스처럼 여러 사용자가 동시에 문서를 편집할 수 있는 실시간 협업 에디터를 만들어봤습니다. 특별한 점은 서버에 부하를 주지 않는 P2P 방식으로 구현했다는 것입니다.주요 특징실시간 동기화: 타이핑하는 순간 다른 사용자에게 반영다중 커서: 누가 어디를 편집하고 있는지 실시간으로 표시P2P 통신: WebRTC를 사용해 서버를 거치지 않고 직접 통신충돌 해결: CRDT(Yjs)로 동시 편집 시 자동 병합리치 에디터: 볼드, 이탤릭, 코드 블록 등 다양한 포맷 지원기술 스택프론트엔드Next.js 16 - React 프레임워크Plate.js - 강력한 리치 텍스트 에디터 프레임워크Yjs - CRD..

들어가며최근 프로젝트에 Spec-Driven Development(SDD) 방식을 도입했습니다. 결과부터 말하자면, 기존에 3-4일이 걸리던 기본 개발이 10분 만에 완료되었습니다. 물론 디테일한 작업은 여전히 필요하지만, 생산성 향상은 기대 이상이었습니다.https://github.com/github/spec-kit?utm_source=chatgpt.com이는 이제 깃허브에 Spec Kit 을 참고해서 도입하였고 Spec Kit 을 사용하지 않고 별도 사용하는 에이전트 툴 기반으로 생성하였습니다.SDD 개발 프로세스전체 개발 프로세스는 다음과 같이 설계했습니다리서치 → 기획 → 설계 → PRD 작성 → SDD 개발 → Frontend/Backend 생성 → 개선 → 테스트 → 배포핵심은 PRD를 Spe..

기존에 Figma dev mode 와 github copliot 을 이용하여 figma mcp 를 사용했는데, Framelink 를 이용해서 무료 버전도 가능하여 도입하게 되었습니다.생각보다 방법도 많이 간단해서 유용하게 사용하면 될 것 같습니다.사용 방법FIGMA_API_KEY 발급하러가기피그마에서 Settings/Sequrity 접속Access Token 발급Cursor 에서 Figma mcp 등록 (아래 링크를 따라하면 됨)https://www.framelink.ai/docs/quickstart Quickstart - Framelink MCP for Figma ReferenceIf you need more support to get your IDE configured, check out the of..