과급 Mendix Copilot, Warp, Cursor 같은 도구를 활용한 위젯 개발! 이 강력한 도구들의 조합이 제가 맞춤형 위젯을 만드는 방식을 어떻게 혁신적으로 바꿔놓았는지 보여드리겠습니다. Mendix 위젯과 고성능 코드 구성 요소를 전례 없는 속도와 효율성으로 제공합니다.

위젯 챌린지

으로 Mendix 하이코드 경험이 거의 또는 전혀 없는 개발자가 맞춤형 개발을 진행합니다. Mendix 위젯이나 자바스크립트 액션과 같은 구성 요소는 다소 (혹은 많이) 어렵게 느껴질 수 있습니다. 기존 방식은 터미널 명령어를 사용하고, 여러 개발 환경을 관리하며, 다양한 도구를 오가며 작업하는 것을 포함하며, 최소한 기본적인 자바스크립트/타입스크립트 지식을 이미 알고 있다는 전제하에 진행됩니다.

바이브 코딩 워크플로우의 판도를 바꾸는 혁신

획기적인 워크플로우를 발견했습니다. 마이크로소프트 코파일럿, 비뚤어지다 or 커서 이 덕분에 위젯 개발 프로세스가 완전히 바뀌었고, 작업 속도가 몇 배나 빨라졌습니다!

전통적인 위젯 개발 프로세스

위젯 개발의 전통적인 방식:

• Node, npm 등의 종속성이 누락된 경우 설치하세요.여기에 목록이 있습니다.)
• 터미널 명령어를 사용하여 빈 위젯을 생성하세요.
• VS Code와 같은 에디터에서 이 프로젝트를 열어보세요.
• 위젯 속성을 추가합니다
• 코드 추가
• 파다
• 문제 해결
• 빌드하고 테스트하세요 Mendix 앱, 반복

AI 기반 접근 방식

Copilot, Cursor, Warp와 같은 도구가 에이전트형 AI를 통해 작업 속도를 높이는 방법:

• 터미널 명령어를 사용하여 빈 위젯을 생성합니다(이전과 동일).
• 상담원에게 위젯이 어떤 기능을 하도록 하고 싶은지 알려주세요.
• 해당 도구의 에이전트가 코드를 작성해 줍니다.
• 에이전트는 코드를 빌드하고, 오류가 발생하면 이를 수정하려고 시도합니다.
• 준비가 완료되면 어떤 변경 사항이 적용되었는지 알려줍니다.
• 앱에서 테스트하고 상담원에게 피드백을 제공한 후 이 과정을 반복하세요.

이 영상에서는 제가 Copilot을 사용하여 할 일 목록 위젯을 만들고 이를 통합하는 방법을 보여줍니다. Mendix 응용 프로그램.

여기서 보실 수 있습니다:

1. 빈 위젯 프로젝트 생성
2. AI는 에이전트를 사용하여 프로젝트를 분석하고 이것이 무엇인지 이해합니다. Mendix 위젯 프로젝트
3. 제가 위젯에 원하는 기능을 설명하는 모습입니다.
4. AI 에이전트가 내 요구사항에 맞는 코드를 생성하고 위젯을 구축합니다.
5. 위젯을 앱에 불러오는데 오류가 발생합니다.
6. AI 에이전트에게 오류가 발생했음을 알리는 피드백을 제공합니다.
7. AI가 그 문제를 해결할 것입니다
8. 제가 위젯을 다시 가져와서 페이지에 설정하는 과정입니다.
9. 프로젝트를 실행하고 위젯을 테스트합니다.

영상 마지막 부분에서 할 일 목록이 작동하는 것을 보실 수 있지만, 제가 설정한 데이터 소스와는 실제로 연결되어 있지 않습니다 (또한, 일부 설정은 다소 이상하고 불필요했습니다). 요구 사항을 다듬고, 오류 세부 정보와 피드백을 제공하고, 구현에 대한 질문을 하고, 프롬프트만으로 디버깅하거나 마음에 들지 않는 부분을 수정하는 등 여러 번의 수정 작업을 거친 끝에, 마침내 제가 원하는 대로 작동하게 만들었습니다. 정말입니다. 이 위젯에는 제가 직접 코드를 한 줄도 작성하지 않았습니다. 아래를 참조하세요. 위젯의 전체 코드는 여기에서 확인할 수 있습니다.

우리가 얻을 수 있는 것

• AI 에이전트를 활용한 초고속 개발.
• 별도의 학습 과정이 필요 없습니다. 명확한 지침과 피드백만 있으면 됩니다.
• 다양한 AI 모델 선택 가능 (구독 유형에 따라 다름). 무료 버전에도 옵션이 있습니다!
• 프로젝트 컨텍스트를 사용하여 빌드하면 에이전트가 새 변경 사항을 적용하기 전에 기존 코드를 읽을 수 있습니다.
• 이 프로세스는 새로운 위젯에만 국한되지 않고 기존 위젯을 리팩토링하고 수정하는 데에도 사용할 수 있습니다.
• 위젯이나 JS 액션에만 국한되지 않고, 자바 개발, 스타일링 등에도 사용할 수 있습니다.
• 자동 주석, README 파일, 설명 문서 등
• 지식 격차 해소 – 하이코드 접근 방식에 익숙하지 않은 개발자를 지원합니다.
• 다양한 위젯에서 일관된 코드 품질을 보장합니다.
• 학습 기회 – AI가 생성한 코드 패턴을 학습하면 기술이 향상됩니다.
• 신속한 프로토타이핑 – 다양한 위젯 접근 방식을 손쉽게 실험해 볼 수 있습니다.
• 기존의 고급 코드 개발자들은 이러한 도구를 활용하여 작업 속도를 몇 배로 향상시킬 수 있습니다.

이러한 도전 과제들을 조심하세요

물론 모든 게 화려한 것만은 아닙니다. 주의해야 할 점은 다음과 같습니다.

• AI가 환각 증세를 보입니다(예전만큼 심하진 않지만). 명확한 피드백을 제공하면 효과가 있습니다.
• 무한 반복에 갇힐 수 있습니다. 무한 반복을 파악하여 상담원에게 알려주세요. 무한 반복의 원인이 되는 요소를 파악하면 해결해 드릴 수 있습니다.
• 일부 오류는 오해의 소지가 있으며 근본적인 원인이 아닐 수 있습니다. AI는 이러한 사실을 알지 못할 수도 있습니다.
• 코드 덩어리(혹은 스파게티처럼 엉킨 코드)는 흔히 프로젝트에 이미 존재하는 코드나 한때 사용되었지만 더 이상 사용되지 않는 함수를 잊어버리기 쉽습니다. AI 역시 마찬가지로, 불필요한 정리 작업을 생략하거나 오히려 코드를 복잡하게 만들 수 있습니다. 하지만 에이전트에게 스스로 코드를 검토하여 더 간단한 방법이 있는지 확인하도록 지시할 수 있습니다.
• 에이전트의 선택에 대해 질문할 수 있습니다! 코드/기능/수정 사항/논리가 너무 복잡하거나 이상해 보이면 에이전트에게 자체 검토를 요청하고 단순화하도록 하세요.
• 버전 관리를 사용하세요! GitHub를 사용하거나, 에이전트에게 Git 저장소를 만들고 테스트를 거친 안정적인 버전이 나올 때마다 커밋하도록 지시하세요. 이렇게 하면 문제가 발생했을 때(그리고 그런 일은 종종 발생합니다) 변경 사항을 되돌릴 수 있습니다.
• 가능하다면 전문가에게 검토를 받아보세요 (강력 추천합니다).
• 성능 고려 사항 – AI가 항상 최적화된 코드를 생성하는 것은 아닙니다. 의문을 제기하세요! 생성된 코드에 대한 주석 생성, 코드 설명 및 실행 흐름에 대한 설명을 요청하십시오.
• 보안 경계 태세 – 생성된 코드에 보안 취약점이 있는지 항상 검토하십시오.
• 특정 LLM 버전에 따라 결과가 달라질 수 있습니다.

몇 가지 최종 생각

저는 사용자 정의 위젯, Java 및 JavaScript 구성 요소를 개발해 왔습니다. Mendix 수년간 앱 개발을 해왔지만, 이번 경험은 저에게 완전히 새로운 경험이었습니다. 숙련된 개발자로서, 에이전트가 코드를 몇 분 만에 생성하는 모습을 보니 제가 직접 했다면 몇 시간, 심지어 며칠이 걸렸을 작업이라는 것을 알 수 있었습니다. 접근 방식이나 논리가 제가 원하는 것과 다르거나 너무 복잡해지는 부분에서는 특정 문제에 대한 구체적인 피드백을 제공하고 수정 후 다음 단계로 넘어갈 수 있었습니다. 앞으로도 계속 이 기능을 사용할 것 같습니다!

그렇다면… 이것이 개발자를 대체할까요? 저는 그렇게 생각하지 않습니다.

이는 개발자를 대체하는 것이 아니라 혁신을 가져오는 것입니다. AI 도구는 반복적인 코딩 작업과 구현 세부 사항을 처리하는 숙련된 협력자가 되어, 인간 개발자는 아키텍처 설계, 비즈니스 로직, 그리고 혁신에 집중할 수 있게 됩니다. 저는 가장 성공적인 개발자는 AI와 효과적으로 협력하는 방법을 배우고, 적절한 지침을 제공하며, 언제 수동으로 제어해야 하는지 아는 사람이라고 생각합니다. 개발자들은 이제 위젯 기능 구현에 시간을 허비하는 대신, 진정으로 중요한 것, 즉 학습, 혁신, 그리고 가치 창출에 전문성을 집중할 수 있게 되었습니다! Mendix 특히 개발자의 경우, 이는 핵심 기능만 향상시킬 뿐입니다. Mendix 강점: 빠른 성장세.