전체 글39 Figma에서 MCP와 커서 활용하기 Cursor + Figma MCP 도입 이유퍼블리싱 속도 향상초기 레이아웃 등 반복적인 마크업/스타일링 작업을 AI가 처리개발자는 로직/상태 관리/반응형 조정 등 핵심 구현에 집중 가능전체 개발 사이클 단축사용 방법https://www.reese-log.com/cursor-figma-model-context-protocol Cursor와 Figma로 경험하는 Model Context Protocol(MCP) www.reese-log.com환경 세팅Cursor 설치 및 MCP 플러그인 활성화{ "mcpServers": { "sse-server": { "url": "http://localhost:3333/sse" } }}Cursor Settings > mcp.json디자인 → 코드 변.. 2025. 9. 18. 프론트엔드 디버깅 테스트 가이드 1. launch.json 파일이란?위치: 프로젝트 루트의 .vscode 폴더 안역할: 디버깅을 위한 설정을 저장하는 파일장점:파일이 없으면 디버깅 할 때마다 수동으로 브라우저/서버를 설정해줘야 함launch.json을 사용하면 F5 한 번으로 바로 디버깅 시작 가능 2. launch.json 예시 { "version": "0.2.0", // 0.2.0 이 현재 표준 "configurations": [ { "name": "Debug", // Node.js 서버 디버깅용 "type": "node", "request": "launch", "program": "${workspaceFolder}/node_modules/next/dist/bin/next", ".. 2025. 9. 18. Next.js로 내 소개 웹사이트 만들기 프론트엔드 개발을 해오면서 실무에서는 아직 Next.js를 사용해볼 기회가 없었지만, 최근 들어 점점 더 많은 프로젝트에서 Next.js를 도입하는 것을 보며 직접 공부해보기로 마음먹었습니다.이번 글에서는 Next.js를 처음 시작하면서 학습한 내용과 셋업 과정, 그리고 실제로 정리한 깃허브 레포지토리를 공유합니다.📌 Next.js란?Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 파일 기반 라우팅, API 라우트 등 다양한 기능을 제공하여 React 개발을 더욱 구조적이고 효율적으로 할 수 있도록 도와줍니다.📁 프로젝트 구조 및 환경 설정아래는 제가 설정한 파일/폴더 구조 형태입니다. 프로젝트는 아래 깃허브에 정리되어 있습니다.🔗 깃허브 .. 2025. 6. 3. 프론트엔드 디자인 패턴 보호되어 있는 글 입니다. 2025. 5. 25. 요즘 쓰는 최고의 개발 도구: Cursor 최근에 개발 생산성을 높이기 위해 Cursor라는 AI 코드 편집기를 사용해보고 있는데 정말 만족스럽다.기존의 VS Code 기반에 OpenAI의 GPT 모델이 결합되어 있어서 친숙한 사용성과 강력한 AI 기능을 동시에 제공한다. 특히 마음에 드는 기능은 다음과 같다:코드 자동 완성 및 리팩토링 지원단순한 자동 완성 수준을 넘어서, 문맥에 맞는 함수 작성, 주석 기반 코드 생성, 기존 코드의 구조 개선까지 손쉽게 도와준다."Ask Cursor" 기능코드 블럭을 드래그해서 자연어로 질문하면, 어떤 코드인지 설명해주거나, 성능 개선 방법, 버그 수정 방법까지 제안해준다. 마치 코드리뷰어와 함께 일하는 느낌.통합형 Git & Terminal커맨드 라인도 에디터 안에서 바로 사용할 수 있고, Git 인터페이스도.. 2025. 5. 22. SPA에서 SEO 적용을 위해 시도했던 것들 회사 프로젝트에서 SPA(react)구조의 한계 속에서도 SEO(Search Engine Optimization)를 적용해보기 위해 여러 가지 방법을 시도해보았습니다. 아래는 그 과정에서 테스트해본 내용과 결과입니다. react-helmet-async 도입SEO를 위해 가장 먼저 시도한 건 react-helmet-async 라이브러리였습니다.해당 라이브러리를 통해 페이지별로 meta 태그를 동적으로 변경할 수는 있었지만 SPA 특성상 실제 HTML 파일이 하나의 index.html로 구성되어 있기 때문에 브라우저나 봇 크롤러는 여전히 동일한 문서만 바라보게 됩니다.즉, URL을 공유하거나 크롤링될 때, 실제 화면에는 동적으로 바뀐 meta 태그가 반영되었더라도 크롤러 입장에서는 적용된 내용을 읽을 수 없.. 2025. 5. 21. 이전 1 2 3 4 ··· 7 다음
