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

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

Sep 03, 2024 pm 05:04 PM

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

<gum> : Bubble Gum Simulator Infinity- 로얄 키를 얻고 사용하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora : 마녀 트리의 속삭임 - Grappling Hook 잠금 해제 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
Nordhold : Fusion System, 설명
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

JavaScript 엔진 : 구현 비교 JavaScript 엔진 : 구현 비교 Apr 13, 2025 am 12:05 AM

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

Python vs. JavaScript : 학습 곡선 및 사용 편의성 Python vs. JavaScript : 학습 곡선 및 사용 편의성 Apr 16, 2025 am 12:12 AM

Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.

C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지 C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지 Apr 14, 2025 am 12:05 AM

C/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.

JavaScript 및 웹 : 핵심 기능 및 사용 사례 JavaScript 및 웹 : 핵심 기능 및 사용 사례 Apr 18, 2025 am 12:19 AM

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

자바 스크립트 행동 : 실제 예제 및 프로젝트 자바 스크립트 행동 : 실제 예제 및 프로젝트 Apr 19, 2025 am 12:13 AM

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

JavaScript 엔진 이해 : 구현 세부 사항 JavaScript 엔진 이해 : 구현 세부 사항 Apr 17, 2025 am 12:05 AM

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스 Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스 Apr 15, 2025 am 12:16 AM

Python과 JavaScript는 커뮤니티, 라이브러리 및 리소스 측면에서 고유 한 장점과 단점이 있습니다. 1) Python 커뮤니티는 친절하고 초보자에게 적합하지만 프론트 엔드 개발 리소스는 JavaScript만큼 풍부하지 않습니다. 2) Python은 데이터 과학 및 기계 학습 라이브러리에서 강력하며 JavaScript는 프론트 엔드 개발 라이브러리 및 프레임 워크에서 더 좋습니다. 3) 둘 다 풍부한 학습 리소스를 가지고 있지만 Python은 공식 문서로 시작하는 데 적합하지만 JavaScript는 MDNWebDocs에서 더 좋습니다. 선택은 프로젝트 요구와 개인적인 이익을 기반으로해야합니다.

Python vs. JavaScript : 개발 환경 및 도구 Python vs. JavaScript : 개발 환경 및 도구 Apr 26, 2025 am 12:09 AM

개발 환경에서 Python과 JavaScript의 선택이 모두 중요합니다. 1) Python의 개발 환경에는 Pycharm, Jupyternotebook 및 Anaconda가 포함되어 있으며 데이터 과학 및 빠른 프로토 타이핑에 적합합니다. 2) JavaScript의 개발 환경에는 Node.js, VScode 및 Webpack이 포함되어 있으며 프론트 엔드 및 백엔드 개발에 적합합니다. 프로젝트 요구에 따라 올바른 도구를 선택하면 개발 효율성과 프로젝트 성공률이 향상 될 수 있습니다.

See all articles