Daytona-Sample-React: 텍스트 AI

제 daytona 샘플은 Mindsnap-prosemaster-daytona라는 React 프로젝트입니다. MVC Architecture를 따라 React, Node, AI를 사용하여 개발된 매우 간단하고 초보자 친화적인 애플리케이션입니다

빠르게 변화하는 세상에서 어느 누구도 물건을 구성하는 데 시간을 낭비하고 싶어하지 않으며, 개발자들은 그냥 작업을 진행하고 코드를 작성하기를 원합니다. 당신 같나요? 그럼, 건배! 잘 찾아오셨습니다.

하지만 잠깐, 우리 모두는 개발이 그렇게 되지 않는다는 것을 알고 있습니다. 안타깝게도 가장 단순한 프로젝트의 경우에도 구성 도구, 설치할 패키지, 전달할 포트, 때로는 VPN 설정 등이 필요합니다. Daytona는 개발자를 위한 간단하면서도 획기적인 솔루션을 제공합니다.

궁금해지기 시작하죠?

이 게시물에서는 긴 텍스트를 빠른 요약, 주요 통찰력 및 재미있는 니모닉으로 변환하도록 설계된 매우 초보자 친화적인 응용 프로그램인 MindSnap ProseMaster를 구축하는 과정을 안내해 드리겠습니다.

이 애플리케이션을 어떻게 구축했는지에 대한 간단한 소개부터 시작하겠습니다. 저는 이것이 제가 React와 Node.js를 사용하여 구축한 첫 번째 애플리케이션이라고 생각합니다. 꽤 간단했습니다. 이제 API 호출이 어떻게 이루어지는지 알고 있다고 가정하면 이 작업은 상당히 쉬울 것입니다!

먼저, 이것은 사용자가 텍스트를 입력할 수 있는 하나의 입력 상자가 있는 단일 페이지 애플리케이션입니다. 이제 이 텍스트를 사용하고 프롬프트를 전달하여 gemini API로 보냅니다. Gemini API의 응답이 화면에 다시 표시됩니다.

그렇다면 컨테이너나 그런 것에 대해 아무것도 모르는 개발자인 제가 어떻게 데이토나를 알게 되었나요?

이건 Quira에게 감사해야 할 것 같습니다. Quira의 Quest 023에서는 Daytona가 6000 USD라는 엄청난 상금을 받았습니다. 이 사실을 알게 되자마자 퀘스트에 제출하기 위해 프로젝트를 훑어보기 시작했습니다!

복잡한 프로젝트를 선택하면 작업 공간에 DevContainer를 설정하기가 더 어려워질 수 있으므로 간단한 프로젝트를 선택해야 한다고 생각했던 것이 뚜렷이 기억납니다. 하지만 맙소사, 내 생각이 이보다 더 틀릴 수는 없었습니다.

개발 컨테이너, 작업 공간에 대해 잘 모르시는 독자분들도 계신 것으로 알고 있습니다. 하지만 걱정하지 마세요! 이 블로그에서 모든 내용을 다루었으니 계속 읽어보시면 천천히 모든 내용을 이해하실 수 있을 것입니다.

사실 다음 용어부터 시작하겠습니다.

• Dev 컨테이너: 개발에 필요한 모든 도구와 설정이 포함된 사전 구성된 환경입니다.

• 작업 공간: 작업 중인 모든 파일, 코드, 각 프로젝트를 저장하고 정리할 수 있는 디지털 공간입니다.

• 포트: 우리의 개발 환경과 다른 서비스나 디바이스 사이에 데이터가 흐르는 문이라고 생각해보자.

• PostCreateCommand: 개발 환경 설정 후 자동으로 실행되는 devcontainer.json의 중요한 명령입니다. 설정 작업을 마무리하는 용도로 사용되는 것 같아요.

Daytona를 사용하면서 기술 수준에 관계없이 개발 환경을 설정하고 관리하는 것이 얼마나 쉬운지 깨달았습니다. 제 경험을 통해 배우고 Daytona가 어떻게 다음 프로젝트를 더 원활하고 효율적으로 만들 수 있는지 알아보세요!

제가 어떻게 시작했는지 자세히 살펴보겠습니다
나는 시각적인 학습자에 더 가깝습니다! 즉, 길고 부피가 큰 텍스트를 읽는 것보다 구현에 대한 비디오나 이미지를 보는 것을 좋아합니다. 그래서 평소처럼 정말 간단하고 따라하기 쉬운 지침을 읽지 않았습니다.

여기서는 Quira가 만들고 있는 오픈 소스 커뮤니티에 감사를 표하고 싶습니다. 커뮤니티에서 만난 소중한 친구 중 K OM이 도움을 주었습니다. 우리는 그가 시작하는 간단한 3단계를 설명하는 전화를 받기를 바랐습니다.

1. 먼저 프로젝트로 이동하여 '.devcontainer/devcontainer.json'이라는 파일을 설정합니다
2. 개발 컨테이너 생성기를 사용하여 개발 컨테이너 생성
3. 사용자가 인식하고 완료할 수 있도록 Readme를 편집하세요!

정말 간단하죠? 간단히 대답하자면 예입니다. 하지만 이 외에도 더 많은 것이 있습니다. 저는 작업 공간을 테스트하는 것이 데이토나를 배우고 사용하는 데 있어 더 큰 부분이라고 믿고 싶습니다.

나에게 실제로 동기를 부여한 것은 무엇입니까? 그리고 이번 여행에서 가장 아쉬웠던 점은 무엇이었나요?
처음으로 유효한 100개의 제출물은 각각 50 USD를 받게 됩니다! 이것이 당신에게 동기를 부여하는 요소가 아니라면 무엇인지 모르겠습니다.

Daytona에는 다음과 같은 말이 있습니다.

그런데 저는 이게 가장 답답했어요. 응용 프로그램이 내 컴퓨터에서는 작동하지만 리뷰어 컴퓨터에서는 작동하지 않아서 잠시 다음 질문이 생겼습니다. Daytona가 정말 그만한 가치가 있나요?

하하, 지금 생각해보니. 정말 재미있을 것 같아요. 구성을 잘못하고 데이토나가 허위 주장을 하고 있다고 비난하는 사람은 저였습니다.

예, 보상을 위해 왔다는 것을 인정하지만 솔직히 기술을 위해 머물렀습니다. 데이토나가 실제로 무엇을 할 수 있는지 봤기 때문에 그 모든 좌절감을 견뎌냈습니다.

*그러므로 제가 직면한 구체적인 문제는 무엇입니까? *

첫 번째로 떠오른 문제는 AI를 사용해 생성한 컨테이너가 데이토나 작업 공간을 만들려고 할 때 치명적인 오류가 발생한다는 점이었습니다.

이 문제를 해결한 후 다음으로 생각난 것은 내 프로젝트가 vite를 사용하여 생성되었다는 것이었고 이 경우 화면에 아무것도 표시되지 않는다는 것이 밝혀졌습니다. 흰색 빈 페이지로 나타납니다. 이것은 클라이언트 문제였습니다.

나중에 클라이언트 문제를 해결했는데 이제 서버가 응답하지 않았습니다.

클라이언트와 서버가 모두 작동하기 시작했을 때 CORS 문제가 발생했습니다.

마지막으로 서버를 제거하고 API를 직접 호출했는데 작업 공간을 생성하는 동안 오류 메시지가 표시되었지만 여전히 IDE가 열렸습니다. 알고 보니 내 코드에서 변경한 내용과 일치하도록 devcontainer.json을 변경해야 했습니다.

해결책과 이를 어떻게 얻었나요?

솔직히 모든 문제에는 매우 간단한 해결책이 묶여 있었습니다. 아마도 데이토나 팀, 특히 인내심을 가지고 검토하고 필요한 변경 사항을 제안해준 Jafa의 도움이 아니었다면 결코 이러한 사실을 파악하지 못했을 것입니다. 그는 제가 Daytona에 대해 자세히 알아보고 작동 원리와 최고인 이유를 배우도록 도와주었습니다.

필요한 솔루션은 다음과 같습니다.

1. 프로젝트에서 Vite를 사용하는 경우 package.json에서 호스트 플래그로 vite를 지정해야 합니다. 다음과 같아야 합니다.
   

2. 프런트엔드와 백엔드 요구 사항이 모두 있는 경우 서버 포트를 전달 포트로 추가해야 합니다. 다음과 같아야 합니다.
   

3. 그리고 직면할 수 있는 모든 문제에 대한 최종 해결책은 질문입니다. 데이토나의 슬랙(Slack)에 가서 문제에 대해 이야기하십시오. 나는 당신이 찾고 있는 도움을 얻게 될 것이라고 확신합니다. Slack 링크

제 제안, 데이토나를 사용하는 이유는 무엇인가요?
데이토나는 왜 안 되는지 묻고 싶습니다. 사용이 매우 간단하고 관리도 쉽습니다. 더 이상 복잡한 개발 환경 설정을 겪을 필요가 없습니다

데이토나와 함께라면 어떤 설정에도 신경 쓰지 않고 정말 중요한 것에 집중할 수 있습니다.

Daytona를 개발자에게 매력적인 옵션으로 만드는 최고의 기능 중 일부는 다음과 같습니다.

• 단일 명령:
  단 하나의 명령으로 전체 개발 환경을 시작하세요. 수동으로 설정할 필요가 없습니다. 모든 것이 즉시 준비되어 있습니다.

• 어디서나 실행:
  노트북, 원격 서버, 클라우드 등 어디에서든 개발 환경이 작동합니다. 완전히 유연하므로 어떤 기계에서나 작업할 수 있습니다.

• IDE 지원:
  VS Code 및 JetBrains와 같은 널리 사용되는 도구와 원활하게 통합됩니다. 게다가 웹 IDE가 내장되어 있어 아무런 설정 없이 코딩을 시작할 수 있습니다.

• 보안:
  보안 VPN을 통해 개발 환경에 자동으로 연결됩니다. 이를 통해 데이터를 안전하게 보호하고 원격으로도 안전하게 작업할 수 있습니다.

이러한 기능은 시간을 절약하고 유연성을 높이며 개발 프로세스를 원활하고 안전하게 유지합니다. 안녕하세요, 개발자가 무엇을 더 요구할 수 있습니까? 모든 수준의 개발자에게 적합합니다.

솔직한 피드백!
글쎄, 그것이 완벽하다고 주장하는 것은 조금 너무 무리일 수 있습니다. 업계 최고 중 하나라고 생각하지만 실제로 사용자 경험을 더 좋게 만들 수 있는 특정 변경 사항이 있습니다.

• 사전 구축된 프레임워크별 템플릿 예, 샘플이 아니라 템플릿을 의미합니다. 그들 사이의 차이점은 무엇입니까? Daytona가 개발자가 해당 샘플을 참조하고 Daytona 작업 공간을 회전시킬 수 있도록 샘플을 수집하고 있다는 것을 알고 있습니다.

그러나 daytona가 사전 구성된 devcontainer.json 파일을 포함하여 일부 인기 기술 스택에 대해 즉시 사용 가능한 템플릿을 제공하는 경우. 일부 템플릿을 지원하는 대화형 설정 마법사와 같습니다.

• 원클릭 환경공유 데이토나에서는 즉시 개발 환경을 공유할 수 있는 기능을 추가할 수 있을 것 같습니다. 개발자는 협업을 위해 팀원에게 링크를 보낼 수 있습니다.

내장된 Web IDE를 통해 액세스할 수 있는 환경에 대한 보안 링크를 생성하는 daytona 공유와 같은 것입니다. 여기에서는 Google 문서처럼 실시간 공동작업도 가능합니다.

• AI 기반 문제 해결 도구일 수도 있습니다 제가 이렇게 생각한 이유는 많은 프로젝트가 잘못 구성된 포트, 종속성 불일치 등과 같은 매우 단순한 문제로 인해 막혔기 때문입니다.

다시 말씀드리지만, 어떻게 하면 더 나아질 수 있을지에 대한 제 생각은 다음과 같습니다!

테이크아웃:
간단한 말; 표지로 책을 판단하지 마세요. Daytona는 제가 설명한 것보다 훨씬 더 뛰어나며 시도해 보지 않으면 결코 알 수 없습니다. 그래서 당신은 무엇을 기다리고 있습니까? 지금 체험해 보세요!

그리고 마지막으로 여러분을 배웅하기 전에 이 문제를 생각해낸 Quira 및 Daytona 팀 전체에 깊은 감사를 전하고 싶습니다. 감사합니다!

내 프로젝트에 대한 Github 링크
데이토나 Github 링크
데이토나 퀘스트 링크

위 내용은 Daytona-Sample-React: 텍스트 AI의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!