개발자 99% 커뮤니티에서 수다 떨어요!
🗞 뉴스레터 #277 (2025.01.24)
#따끈따끈한_개발_NEWS📢
🧐 Tiger Abrodi가 작성한 React Query 전문가가 되는 방법에 대한 가이드
🔍 새로운 맥용 PostgreSQL 클라이언트 Searchlight가 출시되었음! 데이터베이스 관리와 쿼리 실행을 위한 간소화된 인터페이스를 제공하며, 자동완성과 구문 강조 기능도 갖추고 있다.
🎲 2025년 프론트엔드 개발자가 알아야 할 6가지 CSS 스니펫. 요즘 웹 개발에서 자주 쓰이는 유용한 CSS 패턴들이 담겨 있다.
🎮 PDF 파일에서 실행되는 Doom 게임. 진짜 되나? 싶어서 해봤는데 잘 된다 ㅋㅋ 도대체 이런 건 어떻게 만드는 걸까...
🌳 "ChatGPT를 한 번 사용할 때마다 물 500ml가 쓰인다"라는 등 기후변화를 촉진시킨다는 주장이 있었는데 이러한 주장이 실제로는 매우 과장된 것이라고 한다. 실제로는 동영상 10초 시청, 이메일 2통을 전송하는 정도에 해당하는 수준이라고 함.
🔼 CursorAI로 프로젝트를 만들어 보자 😎
#CursorAI_제대로_활용하기
CursorAI 제대로 뽕 뽑고 있나요? Microsoft의 엔지니어 Zohaib Rauf는 CursorAI와 LLM을 활용해 그동안 미뤄두었던 많은 사이드 프로젝트를 제작할 수 있었다고 하는데요. 그의 CursorAI를 활용해 사이드 프로젝트를 빠르게 완성하는 팁을 총 3단계로 정리해 봤어요.
(1) 스펙 구상하기
먼저 GPT를 활용해 만들고자 하는 애플리케이션의 스펙을 구체화해요. 어느 정도 충분한 세부사항이 모였다고 판단되면 "다른 개발자나 AI가 이 앱을 만들 수 있을 정도로 상세한 기술 명세서를 작성해 줘"라고 요청해 보세요. 이렇게 최종 스펙을 정리하고, 그것을 계속 참조할 수 있도록 SPEC.md 파일을 생성해 따로 보관(중요!) 하세요.
👇 프롬프트 예시
"다른 사람이나 AI가 이 문서를 보고 웹사이트를 만들 수 있도록 markdown 형식의 명세서를 만들어줘. 프로젝트 세부사항, UX/UI, 각 기능에 필요한 것들을 반드시 포함해야 해. 기술은 TypeScript, React, TailwindCSS 위주로 사용할 거야."
🔼 SPEC.md파일을 먼저 작성할 것!
(2) 초기 코드 생성하기
Vite 등을 사용해 프로젝트를 시작하고, 아까 만들어두었던 SPEC.md 파일을 프로젝트 폴더 안에 넣으세요. 그다음 Cursor IDE의 Composer > Select Agent로 이동해 SPEC.md를 컨텍스트로 추가하고 구현을 요청하세요. 이렇게 하면 단 몇 분 만에 핵심 기능을 갖춘 기본 뼈대를 완성할 수 있어요.
(3) 작은 단위로 쪼개기
이제 세부 기능을 제작해야겠죠? 이때 하는 흔한 실수는 한꺼번에 많은 걸 요청하는 거예요. 여러 작업을 동시에 요청하면 오류의 발생률도 높고, 다시 고치는데 시간이 더 오래 걸리기 때문에 기능을 최대한 작은 단위로 나누고, 하나씩 차근차근 구현하는 것을 추천합니다. 또한 기존 코드나 문서의 링크를 컨텍스트로 제공할 수 있으니, 이걸 적극 활용해서 환각(hallucination) 현상을 방지하는 게 좋아요.
🔼 .cursorrules 적극 활용하기
🍯 그 외 자잘한 꿀팁
필요에 따라 LLM을 혼합해 사용해 보세요. Zohaib는 기능의 첫 초안을 만들 때는 o1을, 세부적인 반복 작업에는 Claude-3.5-sonnet을 활용한다고 해요.
v0.dev 같은 툴을 사용하면 UX를 구현하기가 훨씬 쉬워요.
SPEC.md나 웹사이트 문서와 같이 프로젝트와 관련된 마크다운 파일을 컨텍스트로 추가할 수 있도록 꼭 저장해두세요.
프로젝트 디렉토리에 .cursorrules 파일을 만들어 프로젝트를 원하는 방향으로 유도하세요. 특정 기술 위주로 개발을 요청할 수 있고, 원하지 않는 기술을 제외시킬 수도 있습니다.
코드를 전체적으로 이해하고 있는 상태에서 작업하세요. AI가 어떤 코드를 작성했는지 몰라 디버깅하기 어려운 상황이 펼쳐질 수도 있으니까요.
👉 CursorAI를 잘 사용하고 싶은 분들은 니꼬쌤의 커서로 생산성 2배 뽑는 꿀팁도 확인해 보세요. 😉
👉 원문은 여기서 확인할 수 있어요.
