ChatGPT로 웹 앱을 구축하는 방법

당신과 같은 독자는 MUO를 지원하는 데 도움이 됩니다. 귀하가 당사 사이트의 링크를 사용하여 구매하면 당사는 제휴 수수료를 받을 수 있습니다. 자세히 알아보기

ChatGPT를 둘러싼 과대 광고의 가장 큰 주장 중 하나는 효과적인 프로그래밍 도구가 될 수 있다는 것입니다. 아이디어는 다음과 같습니다. 원하는 것을 자연어로 설명합니다. 챗봇은 그렇게 하는 코드를 생성합니다. 하지만 실제로 ChatGPT가 이 작업을 얼마나 잘 수행합니까?

오늘의 메이크업 비디오 콘텐츠를 계속하려면 스크롤하세요.

테스트에 적용하는 것보다 알아내는 더 좋은 방법은 무엇입니까? 우리는 ChatGPT에게 처음부터 간단한 웹 앱을 구축하도록 요청했습니다. 테스트 결과와 ChatGPT를 사용하여 처음부터 웹사이트를 구축하는 데 사용할 수 있는 단계는 다음과 같습니다.

Windows 탐색기 Windows 10을 다시 시작하는 방법

1단계: 웹 앱용 청사진 생성

다른 도구를 사용하여 웹 앱을 구축할 때와 마찬가지로 ChatGPT가 쇼를 실행하도록 하기 전에 앱의 모양과 빌드에 필요한 단계에 대한 청사진을 배치해야 합니다.

첫 번째 작업으로 ChatGPT에 간단한 채팅 앱의 청사진을 개발하도록 요청했습니다. 이를 위해 우리는 웹 앱의 요구 사항을 설명한 다음 챗봇에게 앱 개발 계획을 자세히 요청했습니다.

위의 프롬프트를 사용한 후 얻은 결과는 다음과 같습니다.

위와 같은 순서도를 생성하려면 ChatGPT 계정에서 'Show Me' 플러그인을 활성화해야 합니다. 당신은 할 수 있습니다 ChatGPT 플러그인 설치 및 사용 프리미엄 구독이 필요하지만 몇 단계만 거치면 됩니다.

바이오스 윈도우 10 진입 방법

플러그인이 없으면 텍스트 기반 청사진 또는 ASCII 아트 순서도를 얻을 수 있습니다. 그래도 괜찮습니다. 플러그인이 없어도 ChatGPT는 아래 예와 같이 앱의 명확한 청사진을 제공해야 합니다.

2단계: Blueprint를 더 작은 모듈로 분할

이제 큰 그림이 그려졌으므로 개별적으로 개발한 다음 통합하여 완전한 웹 앱을 형성할 수 있는 더 작은 구성 요소로 앱을 분할하는 데 도움을 ChatGPT에 요청했습니다. ChatGPT는 이를 세 가지 구성 요소로 나눌 것을 제안했습니다.

등록 모듈
로그인 모듈
채팅 모듈

우리는 다른 아이디어가 있었지만 여기서 목표는 ChatGPT가 결정하도록 하는 것입니다.

1. 등록 구성 요소 구축

우리는 바로 등록 구성 요소를 구축하기 시작했습니다. 우리는 ChatGPT에게 적절한 알고리즘을 도출하도록 요청했습니다. 여기서 우리는 등록을 위해 사용자의 사용자 이름, 이메일 및 아바타만 필요하다고 지정하여 개입했습니다. 프롬프트는 다음과 같습니다.

결과는 다음과 같습니다.

다음으로 ChatGPT에 등록 구성 요소를 빌드하도록 요청했습니다.

등록 프로세스의 일부로 비밀번호 필드를 포함하지 않았지만 ChatGPT는 생성된 HTML 코드에 비밀번호 필드를 포함하여 올바른 호출을 했습니다. 우리는 코드를 수정하지 않고 복사했으며 브라우저에서 보이는 모습은 다음과 같습니다.

iTunes가 iPhone을 백업하는 위치 변경

다음으로 ChatGPT에 PHP 등록 스크립트를 생성하라는 메시지를 표시했습니다. 처음에는 '양식 제출을 처리하기 위한 서버 측 논리에 대한 PHP 코드를 작성하십시오.'라는 메시지가 표시되었습니다. 생성된 스크립트는 잘 작동했지만 많은 취약점이 있었습니다.

암호 해싱, 오류 처리, SQL 주입이 발생하기 쉬웠습니다. ChatGPT는 최소한의 작업만 수행했습니다. 이 문제를 해결하는 것은 비교적 쉬웠습니다. 우리는 단순히 ChatGPT에 '방금 생성한 코드의 모든 잘못된 부분을 식별한 다음 식별된 지점을 사용하여 코드를 최적화'하도록 요청했습니다. 이것으로 PHP 등록 스크립트를 사용할 준비가 되었습니다.