소프트웨어-이야기/소프트스킬 썸네일형 리스트형 prompt injection: 바이브코딩과 신규 보안 취약점 prompt injection프롬프트를 중간에 위장해서, AI 애플리케이션이 잘못된 정보를 유출하거나 의도하지 않은 동작을 하게 하는 사이버 공격을 말한다.https://docs.anthropic.com/en/docs/claude-code/security참고 https://docs.anthropic.com/en/docs/claude-code/security Security - AnthropicHow we approach security Security foundation Your code’s security is paramount. Claude Code is built with security at its core, developed according to Anthropic’s comprehensive .. Claude Code 벼락치기 0. 감잡기https://www.youtube.com/watch?v=AJpK3YTTKZ4https://www.youtube.com/watch?v=gNR3XI5Eb0k 1. 실행해보기 https://docs.anthropic.com/en/docs/claude-code/quickstartcladue를 프로젝트에 적용하는 내내 주의하라는알럿이 뜸요구사항을 프롬프트로 전달하면, 해야할 목록을 정리하고 순차적으로 실행함. MCP + 바이브 코딩 벼락치기 (1) 유튜브를 보며 감을 잡는다. https://www.youtube.com/watch?v=HKtOSh2rH0A(2) 클로드앱의 아티팩트 사례를 살펴보고, 프롬프트를 이해한다. 사용자가 더 나은 이메일을 작성할 수 있는 React 앱을 구축하세요. 사용자가 말하고자 하는 내용을 간략하게 작성한 다음 이메일의 톤(예: 간결, 따뜻함, 격식 등)을 선택할 수 있어야 합니다. Claude API를 사용하여 원시적인 생각을 완성된 이메일로 변환하세요. 앱을 시각적으로 매우 매력적으로 만드세요. 당신은 세계 최고의 프론트엔드 엔지니어이고 시각 디자인 석사 학위도 가지고 있으므로 이 작업을 매우 잘 할 수 있을 것입니다. 색상 팔레트는 파란색, 흰색, 회색을 사용해야 합니다.응답할 이메일을 입력할 수 있는 선택적.. claude desktop + playwright-mcp 체험 후기 예전 프로젝트에서 playwright으로 E2E 테스트 코드를 짰을때 정말 유용했다. 그런데 코드를 작성하기 너무 귀찮았다. LLM 으로 자동으로 짤 수 있는 날을 기다렸는데... 드디어 비슷한 기능이 나왔다! 바로바로 playwright-mcp ! claude desktop에 playwright-mcp를 연결한 후, 실행한 화면을 먼저 살펴보자. 프롬프트로 기대하는 동작을 설명하면, playwright가 자동으로 브라우저에서 기대한 동작을 실행한다. 어떤건지 gif으로 살펴보자!어떻게 하는거지? 1. claude desktop을 설치한다.https://claude.ai/download 2. node를 설치하고, playwright-mcp 라이브러리를 설치하자 npm install -g playwri.. 타임라인 회고 (Timeline Retrospective) 프로젝트 회고를 준비하며, GPT와 쿵짝쿵짝 정리한 시나리오를 정리한 자료입니다. 타임라인 회고는 1개월 이상 지속된 장기 프로젝트 회고로 적합한 방법입니다. 진행 방식은 다음과 같습니다. 준비물스티커, 네임펜, 3가지 색상의 포스트잇 진행방법1. 칠판에 타임라인을 그립니다. (5분)2. 포스트잇에 사건을 적어서 붙입니다. 따뜻한 감정은 빨간 포스트잇에, 차가운 감정은 파란 포스트잇에 작성합니다. (15분)3. 주요 사건들을 그룹핑합니다. (5분)4. 스티커를 5개씩 배부하고, 투표를 합니다. (5분)5. 투표를 받은 상위 사건들로 어떤 일이 있었는지 이야기를 나눕니다. (15분)6. 사건을 바탕으로 다음 5가지를 생각해봅니다. (15분) Achievements Surprises .. [후기] sweep-ai: AI 주니어 개발자 sweep ai은 버그 리포트와 피쳐 리퀘스트를 코드로 만들어주는 AI 기능이다. GeekNews에서 소개를 보고 놀랐다. AI 주니어 개발자라니?! 사이드 프로젝트를 같이하면 좋겠다! 싶었다. 그래서 당장 테스트를 해봤다. 사용방법 https://github.com/apps/sweep-ai Github App에서 나의 github과 Sweep AI 애플리케이션을 연동한다. 2. 설치를 하고 나면, Sweep이 자기 설정 정보가 포함된 PR을 만들어서 올린다. 3. Issues에 작은 일감을 등록한다. 4. sweep ai가 일감을 분석하고, 업무 계획을 세우고, 실행한다. 코드 검색, 분석, 코딩, 리뷰까지 단계를 나눠서, Sweep ai agent가 대신 일을 처리한다. 5. PR 리뷰하기 작업 내용.. [후기] makereal tldraw: 와이어프레임으로 HTML 뽑아내기 소개makereal tldraw은 온라인 화이트보드에 와이어프레임을 그리면, HTML과 Tailwind으로 바꿔주는 기능을 제공한다. ">HTML 삽입미리보기할 수 없는 소스github의 이 영상을 보고 혁신적이라는 생각이 들어서, 테스트를 해봤다.준비물1. openai에 금액 충전하기 makereal tldraw은 chatgpt의 gpt-4-vision-preview 모델 기반으로 동작한다.이 기능을 사용하려면 chatgpt credit이 충전되어있어야한다. 최소 5달러는 있어야한다. 2. chatgpt api key 준비하기3. open api key 등록하기 실험1. 단순한 어드민 화면 만들기 실험2. 디자인이 적용된 UI 화면 만들기디자인이 적용된 UI를 구성하기에는 어렵단 생각이 들었다... 손글씨st으로 예쁘게 노트 기록하기 1. Obsidian을 설치한다. https://obsidian.md/download 2. Obsidian excalidraw plugin을 설치한다. 3. 모든 확장자 파일을 볼 수 있도록 설정한다. 4. 손글씨 폰트를 다운로드 받는다. https://clova.ai/handwriting/list.html# 새로운 나눔손글씨 글꼴 - 네이버 클로바 한글한글 아름답게 캠페인과 함께합니다. clova.ai 5. Obsidial 폴더에 폰트를 추가한다. 6. Excalidraw에 폰트 추가한다. 7. Excalidraw에서 폰트를 선택한다. 7. 결과물 이전 1 2 3 다음
