이제 막 웹개발을 시작한 입문자도 해볼수 있도록 ChatGPT의 도움을 받아 쉽게 간단한 Todo App 웹페이지를 만들어서 출시까지 해보는 방법을 정리해보았습니다.
그럼 ChatGPT의 도움을 받아 CodePen에서 HTML, CSS 및 기본 JavaScript를 사용하여 간단한 TODO 웹 페이지를 만드는 과정과 Netlify에 배포까지 하는 방법을 살펴보겠습니다.
참고로 코드 작성과 배포를 위해 별도의 도구를 설치 할 필요가 없고 Netlify와 Codepen을 사용합니다.
그럼 시작해 보겠습니다.
1. ChatGPT에게 간단한 TodoApp 만들어 달라고 하기
먼저 ChatGPT가 HTML, CSS 및 기본 JavaScript를 잘 작성 해줄 수 있도록 아래와 같이 프롬프트를 요청합니다.
ChatGPT프롬프트
act as a experienced frontend developer
그리고 ChatGPT에게 아래와 같이 Next.js로 TodoApp을 만들어달라고 요청 합니다.
ChatGPT프롬프트
I’m trying to build a simple TODO webpage, give me step by step instruction with code example with the following requirements.
- using html, css, basic javascript
- design & css: modern style design, responsive
- using codepen
- running on Netlify
그럼 아래와 같은 결과가 나옵니다.
2. ChatGPT결과로 코드를 작성 해봅니다.
codepen 사이트 에서 chatgpt결과를 코드로 작성 해봅니다.
- html 을 작성합니다.
- css를 작성합니다.
- javascript를 작성 합니다.
3. CodePen 저장 및 내보내기
HTML, CSS 및 JavaScript 섹션을 완료했으면 "저장" 버튼을 클릭하여 펜을 저장합니다. 그런 다음 오른쪽 하단 모서리에 있는 "내보내기"를 클릭하고 ".zip 내보내기"를 선택하여 프로젝트를 zip 파일로 다운로드합니다.
4. Netlify에 배포
zip 파일로 다운로드 하였으면 배포 할 준비가 되었습니다. Netlify으로 이동하여 계정에 가입하거나 로그인합니다.
압축을 푼 폴더의 dist 폴더를 "사이트" 페이지로 끌어다 놓으면 Netlify가 your-subdomain.netlify.app과 같이 임의로 생성된 하위 도메인으로 새 사이트를 생성합니다. 업로드가 완료되면 페이지 상단에 사이트가 활성화되었음을 알리는 알림이 표시됩니다. 라이브 TODO 앱을 보려면 생성된 링크를 클릭하면 됩니다.
그럼 아래와 같이 멋진 TodoApp 웹사이트가 만들어집니다.
자세한 개발 과정에 대한 내용 및 다른 적용 사례는 코딩추월차선 블로그 에서 확인 하실수 있습니다.
아래의 링크를 통해 간단한 Todo App을 확인 할 수 있습니다.
