공부 기록장

전통적인 테스트 도구들은 브라우저 외부에서 원격으로 명령을 전송하는 방식이었다면, Cypress는 브라우저 내부에서 직접 실행됩니다. Cypress를 실행하면 실제 브라우저 창이 열리고, 테스트가 실행되는 모든 과정을 실시간으로 시각적으로 확인할 수 있습니다.타임 트래블 기능도 지원합니다. 테스트의 각 단계를 클릭하면 그 시점의 상태로 되돌아가서 DOM의 상태, 네트워크 요청, 콘솔 로그 등을 자세히 살펴볼 수 있습니다. 설치 과정1. 프로젝트 루트 디렉토리에서 다음 명령어를 실행합니다.npm install cypress --save-dev 2. package.json에 스크립트를 추가합니다.{ "scripts": { "cy:open": "cypress open", "cy:run": "cyp..

프론트엔드 개발에서 테스트 코드는 선택사항이 아닌 필수 요소가 되었습니다. 특히 React와 같은 컴포넌트 기반 라이브러리에서는 각 컴포넌트의 독립성과 재사용성을 보장하기 위해 체계적인 테스트 전략이 중요합니다. 이번 글에서는 React 테스트 코드 작성의 목적부터 실제 적용 방법까지 차근차근 살펴보겠습니다.테스트 코드를 작성하는 이유정확성과 신뢰성 확보테스트 코드의 가장 기본적인 목적은 작성한 코드가 올바르게 동작하는지 확인하는 것입니다. React 컴포넌트는 다양한 props와 state 조합에 따라 다르게 렌더링되며, 사용자의 인터랙션에 따라 동적으로 변화합니다. 테스트 코드를 통해 이러한 모든 시나리오에서 컴포넌트가 예상대로 동작하는지 검증할 수 있습니다. 안전한 리팩토링 환경 제공프로젝트가 성장..

2025년 5월 7일, Figma Config 2025 컨퍼런스에서 클릭 한 번으로 웹 퍼블리싱이 가능한 "Figma Sites"가 공개되었습니다. AI 시대에 발맞춘 이 혁신적인 기능은 많은 개발자와 디자이너들의 관심을 끌었지만, 아쉽게도 유료 사용자만 베타 기능에 접근할 수 있었습니다.이 소식을 접한 후, 저는 대안을 찾아보았고 최근 주목받고 있는 MCP(Model Context Protocol)라는 기술이 눈에 들어왔습니다. 이 프로토콜을 활용하면 AI가 Figma 디자인 파일을 직접 분석해 코드로 변환할 수 있다고 합니다. 과연 이 기술이 실제로 얼마나 효과적일지 궁금했고, 특히 웹과 모바일 환경에서 각각 어떤 결과가 나올지 비교해보고 싶었습니다. Figma MCPMCP(Model Context ..