> 웹 프론트엔드 > JS 튜토리얼 > Cursor + Claude Sonnet에 대한 나의 첫 경험

Cursor + Claude Sonnet에 대한 나의 첫 경험

WBOY
풀어 주다: 2024-09-03 17:04:01
원래의
1258명이 탐색했습니다.

Cursor를 IDE로 사용하고 Claude 3.5 Sonnet을 사용하여 소프트웨어를 개발한 첫 경험

Minha primeira experiência com Cursor + Claude Sonnet

지금쯤 여러분은 Cursor와 관련된 내용을 들어보셨거나 적어도 본 적이 있으실 것입니다. 그렇지 않은 경우 자체 문서에 따른 간략한 설명은 다음과 같습니다.

커서는 VS Code의 포크입니다. 이를 통해 우리는 친숙한 텍스트 편집 경험을 제공하면서 AI로 코딩하는 가장 좋은 방법을 만드는 데 집중할 수 있습니다.

요약하면 Cursor는 소프트웨어 개발을 위한 AI 활용과 직결되는 통합 기능과 기능을 갖춘 IDE입니다.

그런데 제 경험을 살펴보겠습니다 :)

여기에 Game of Life 저장소 링크를 남겨둡니다

내 배경

제 경험을 더 잘 이해하실 수 있도록 결과 및 최종 고려사항과 관련이 있을 수 있는 몇 가지 정보를 여기에 남겨두겠습니다.

  • 저는 소프트웨어 개발자, 더 구체적으로는 5년 경력의 프론트엔드입니다
  • 저는 컴퓨터 공학 학위를 취득했습니다
  • Github Copilot 외에 AI가 포함된 IDE 수준의 확장 프로그램을 사용해 본 적이 없습니다
  • 네, 저는 일상생활에서 ChatGPT를 사용합니다.

모든 경험과 마찬가지로 규칙을 정의해야 합니다.

AI가 생성한 코드 제안을 수락하는 것이

필수입니다 영어를 의사소통 언어로 사용
버그에 대한 해결책을 찾거나 생성된 내용의 품질을 향상시키기 위해 코드를 변경할 수 없습니다
목표
지적된 모든 것을 테스트하기 위해 목표는 Angular 17을 사용하여 Jhon Cornway의 "Game of Life"의 대화형 버전을 구현하는 것입니다(예, 이 버전은 이 기사의 내용과 관련이 있습니다)

인생의 게임

인생 게임은 몇 가지 정의된 규칙이 있는 세포형 오토마톤입니다.

    살아있는 세포에는 2~3명의 이웃이 살아있습니다.
  • 살아있는 이웃이 2명 미만인 살아있는 세포가 죽습니다.
  • 3명 이상의 이웃이 살고 있는 살아있는 세포가 사망합니다.
  • 정확히 3개의 이웃이 살아 있는 죽은 세포가 살아납니다.

Minha primeira experiência com Cursor + Claude Sonnet

프롬프트

앞서 언급했듯이 전체 상호 작용에 사용된 언어는 영어였으며 다음과 같이 명령이 직접적이고 명확하게 주어졌습니다.

화면 전체 너비와 높이를 모두 갖춘 그리드로 "인생의 게임"을 구현합니다.

그리드를 무작위로 선택하는 버튼과 시작될 또 다른 버튼을 추가하세요
시뮬레이션. 스타일은 Angular Material을 사용해주세요

중요: 테스트가 끝난 후 이 기사를 쓰기로 결정했고 명령과 결과에 대한 기록이 손실되었기 때문에 작성한 내용을 100% 담을 수 없으며 이는 각각의 결과가 없는 이유를 설명합니다. 명령. 하지만 저는 이 프로젝트의 다음 단계와 발전에 대해 후속 조치를 취할 것입니다.

코드 생성마다 전부 수락하고 실행하고 레이아웃 조정, 여백, 버그 등 수정을 요청했습니다.

코드 품질

코드가 완벽하다고는 할 수 없지만, 항상 읽기 쉽고 이해하기 쉬운 코드가 생성되었기 때문에 생성된 부분에 필요한 경우 개입하고 수정/개선할 수 있었다고 쉽게 말할 수 있습니다.

버그/문제

우리 프로그래머와 마찬가지로 AI도 버그를 생성하는데, 제가 처음 접한 것도 다르지 않았습니다. 레이아웃에서 요소의 위치 지정(예: 버튼의 통계 및 가시성)에 많은 문제가 있었고 그리드 색상과 기본 색상에 몇 가지 문제가 있었습니다. 패턴 감지 시스템이 작동하지 않습니다(그러나 다음 단계로 나열됩니다).

문제가 있음에도 불구하고 생성된 코드는 안정적이었고 요청한 내용을 해결하여 여기저기 약간의 조정이 필요했습니다. 인생게임의 규칙이 모두 문제나 조정의 필요 없이 구현되었다는 점은 주목할 만합니다.

시간

아직 단축키에 익숙해지고 프롬프트를 수행하는 몇 가지 방법을 테스트하고 있다는 점을 고려하면 전체 프로젝트에 소요된 시간은 1시간 30분도 안 되는 것 같습니다. 매우 복잡한 프로젝트는 아니지만 동일한 방식으로 구현하려면 최소한 2배의 시간(낙관적 태도)이 필요합니다.

긍정적인 점

  • 빠른 코드 생성
  • 각 명령에 컨텍스트를 추가할 수 있는 유연성 덕분에 버그 수정, 기능 생성, 미처 알지 못했던 문제 찾기가 훨씬 쉬워졌습니다
  • 작동하는 코드 :)
  • VSCode 기반의 IDE이므로 일상생활에서 사용하는 모든 것을 간단히 가져올 수 있습니다

부정적인 점

  • 아직 해결하기 어려운 문제(주로 레이아웃 관련)
  • 코드는 기능적이지만 일부 구현에서는 약간 아쉬운 점이 있습니다

결론

저는 제작된 모든 것의 품질에 매우 놀랐고 매우 만족합니다. 테스트 생성, 간단한 버그 수정, MVP 생성 및 개념은 간단하므로 코드 품질이 마음에 들도록 조정이 필요합니다.

다음 단계

이제 첫 번째 프로토타입이 제작되었으므로 다음 단계는 이 프로젝트를 위한 새로운 기능을 만드는 것입니다(저는 정말로 패턴 감지를 수정하고 논리 게이트와 같은 사전 구현된 패턴을 추가하고 싶습니다). 또한, 내가 마스터하지 못한 기술을 사용하여 애플리케이션을 만들고(그러나 Three.js처럼 배우고 싶습니다) 코드를 받아들일 뿐만 아니라 생성된 것의 품질을 조정하고 개선하여 실제 잠재력을 이해합니다.

아, 저도 v0가 어떻게 작동하는지 보고 싶어요(매우 흥미롭네요).

다시 Github 저장소 링크: Game of Life.

여기까지 읽어주셨다면 정말 감사드립니다 :)
여기에 향후 게시물에 대한 리뷰나 제안을 남겨주세요

위 내용은 Cursor + Claude Sonnet에 대한 나의 첫 경험의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿