https://youtu.be/edWbHp_k_9Y?si=TeKCnZaFEhmjq0tk4년전 영상이지만 프론트엔드에서 클린코드를 작성하는 방법에 대해서 예제와 함께 친절하고 상세하게 설명하고 있습니다.영상의 내용 중 지속적으로 생각하고 적용해야 하는 것을 정리합니다.1. 함수의 단일 책임이 개념은 가장 널리 알려져 있지만, 기능 추가를 하게 되었을 때 핸들러에는 적용을 잘 안시켰던 것 같습니다.핸들러 또한 단일 책임을 가지도록 분리하여 필요한 곳에 필요한 함수만 사용될 수 있도록 합니다.2. 응집도를 높이는 것과 추상화 레벨코드의 가독성과 유지보수를 높이기 위해서는 응집도를 높여햐 합니다.응집도를 높인다는 뜻은 컴포넌트 안에 상태, 핸들러, jsx가 서로 떨어져 있는 것을 하나의 컴포넌트 또는 커스텀훅으..

최근 구글에서 에이전트 중심 IDE인 Antigravity를 출시했습니다. 마침 cursor 에이전트가 limit이 걸려있던 참이라 바로 설치해보았습니다. AI는 MCP가 있어야 성능을 최대로 끌어낼 수 있다고 생각하기 때문에 처음으로 한 일은 MCP를 설정하는 것 이었습니다.Antigravity는 신기하게도 내부에 MCP Store가 있어서 Smithery처럼 원클릭으로 간편하게 설치가 가능했습니다. 하지만 아직 베타버전이라 그런지 종류는 많이 없어서 제가 사용하고 있는 MCP 대부분은 직접 설정을 해주어야 했습니다. 그 과정에서 겪은 두가지 오류와 해결과정을 정리합니다.문제 1: Error: exec: "npx": executable file not found in $PATH.MCP 설정 파일에 직접..

공식문서: https://antigravity.google/docs/mcp💡 MCP란 무엇이며 왜 필요한가요?MCP는 Antigravity Editor와 개발 환경 사이의 다리(Bridge) 역할을 합니다.일반적으로 데이터베이스 스키마, 로그 파일 등의 컨텍스트를 AI에게 제공하려면 내용을 복사하여 붙여넣어야 했습니다. 하지만 MCP를 사용하면 Antigravity가 연결된 MCP 서버에서 이 정보를 필요할 때 직접 가져와서 AI 제안의 정확도와 관련성을 획기적으로 높여줍니다.✨ MCP의 핵심 기능MCP 통합을 통해 안티그래비티(Antigravity Editor)는 두 가지 주요 기능을 수행하게 됩니다.1. 컨텍스트 리소스 (Context Resources)AI가 연결된 MCP 서버의 데이터를 읽어 코..

출처: https://www.youtube.com/watch?v=eQ604ruizNI 하루에 개발 관련 컨텐츠 하나씩 정리해보는 챌린지를 하고 있습니다.오늘 본 내용은 "최고의 개발자들에게는 이런 '성공 공식'이 있다" 입니다. 최고 개발자들이 가지고 있던 성공 공식은 "개발에 대한 열정과 흥미" 였습니다. 단순히 개발을 좋아하라는 것이 아닌, 내가 어떤 개발을 좋아하는지 찾는 것 또한 중요합니다.게임, 안드로이드, ios, 프론트엔드, 백엔드 등등 어떤 개발 분야에 흥미를 느끼는지 스스로 알아야합니다. 영상에서는 흥미를 찾는 가장 쉬운 방법은 "직접 만들어 보는 것"이라고 소개하고 있습니다.비록 지금은 웹개발을 하고 있더라도, 내가 정말 흥미가 있는지 확신이 안선다면 게임 개발 등 다른 분야의 개발을 ..

taskmaster 설정 방법공식 문서 튜토리얼: https://github.com/eyaltoledano/claude-task-master/blob/main/docs/tutorial.md설치 및 설정설치:# 글로벌 설치npm install -g task-master-ai# 프로젝트 내부 설치npm install task-master-ai초기화:npx task-master init설정:.env 파일 또는 .cursor/mcp.json 파일에 사용할 모델의 api key를 입력계획 생성요구 사항 생성 후 ai를 통해 .taskmaster/templates/example_prd.txt을 참고 하여 .taskmaster/docs/prd.txt 파일을 생성해달라고 요청생성된 계획 확인 후task-master p..

🛡️ CSRF (Cross-Site Request Forgery) 쉽게 이해하기CSRF는 해커가 '나인 척' 가장해서 웹사이트에 이상한 요청을 보내는 공격 방법입니다.쉽게 말해, 내가 로그인되어 있다는 점을 악용해 내가 원하지 않은 행동(비밀번호 변경, 결제, 글 작성 등)을 나도 모르게 하게 만드는 것입니다.🎡 1. 쉬운 비유: 놀이공원 자유이용권 사건이 상황을 '놀이공원'에 비유하면 아주 쉽게 이해할 수 있습니다.① 로그인 (자유이용권 발급)여러분이 놀이공원에서 손목에 '자유이용권 밴드'를 찼습니다.이 밴드만 보여주면 매점에서 밥을 외상으로 먹을 수 있습니다.(인터넷 상황): 웹사이트에 로그인해서 '쿠키/세션'을 받은 상태② 함정 (사기꾼의 등장)벤치에서 쉬고 있는데, 낯선 사람이 다가와 "이 상..

https://velog.io/@surim014/ai-coding-tools-not-paying-off-your-code-architecture-might-be-to-blame?utm_source=substack&utm_medium=email [번역] AI 코딩 도구가 효과가 없나요? 당신의 코드 아키텍처가 문제일 수 있습니다원문: https://jellyfish.co/blog/ai-coding-tools-not-paying-off-your-code-architecture-might-be-to-blame/velog.io 개발 관련 아티클을 읽으면서 정리해보려고 합니다.오늘은 "AI 코딩 도구가 효과가 없나요? 당신의 코드 아키텍처가 문제일 수 있습니다"라는 글을 읽었습니다. 내용을 요약해서 말해보자면 '..

개요과제 할 때마다 프로젝트를 세로 세팅하는게 번거로워서 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, 네가 '알..