코알못이 챗지피티로 웹앱 만들기 도전 ep1.
⠀
1. 코딩을 전혀 모르는 나는 챗지피티가 만들어주는 코드 자체를 어떻게 실행시키는지 부터가 관건이었다. 메모장에 붙여넣기 하면 되는건지 웹상의 어딘가에 올려야 하는지 전혀 감을 잡을 수 없었음.
2. 일단 이걸 해결하기 위해 아주 최소한의 코딩 환경 공부가 필요하다 느껴서 이미 구독중인 클래스101에서 조코딩의 <코딩 기초와 웹 프로그래밍>을 날림으로 완강. 유튜브도 하시는데 너무 재밌고 쉽게 설명을 해줘서 아주 유익했다.
3. 그래서 코드를 Visual Studio Code라는 걸 다운 받아서 실행시킬 수 있다는 걸 발견. 이것 말고도 Replit이라는 웹에서 실행하는 방법도 있음. 이것 관련해서는 유튜브나 강의를 통해 코드를 어떻게 실행시키는지 까지는 익혀둘 필요가 있음. 기본중의 기본일테니.
4. 그리고 내가 만들고 싶은 웹 화면을 만들기 위해서는 프론트엔드와 백엔드를 이해하는게 필요한단 걸 알게 됨.
5. 프론트엔드는 쉽게 말해 우리가 눈으로 보는 디자인된 UI등의 화면이라 이해하면 쉽고, 뒤쪽에서 실제로 명령을 수행하는 눈에 보이지 않는 부분이 백엔드라는 걸 알게 됨. 그리고 각각을 개발하는 언어가 좀 다르고 (같이 쓰는 것도 있던거 같은데) 나중에는 이걸 연결해 줘야 한다는 걸 알았다.
6. 먼저 이 부분을 이해하기 위해서 가장 간단하다고 생각하는 사칙연산을 하는 계산기를 하나 만들어 달라고 함. 챗지피티가 프론트엔드는 React(?) 라는 걸로 주고, 백엔드는 파이썬으로 결과를 줘서 이걸 앞서 말한 Replit에서 실행했다.
7. 한가지 팁은 챗지피티가 말하는게 분명히 이해 안되는 부분이 있는데 내가 실행하는 환경을 설명하고 그 단계를 구체적으로 알려달라고 하면 더 쉽게 알려주니 그렇게 하나씩 해결해 나가면 됨.
8. 백엔드에서 실행한 서버 URL을 프론트엔드 코드에 반영을 해주면서 결국 아주 간단한 UI의 계산기 처음으로 성공!! 약간 감잡음. 제가 잘못 알고 있는 부분들은 알려주시면 완전 감사 코린이라 많이 배워야합니다.
Replit에서 코드 실행했을 때의 모습
계산기 UI 모습. 숫자도 직접 넣어야 하고 허접하긴 하지만 동작은 제대로 된다. 이걸로 약간 감잡음!
코알못이 챗지피티로 웹앱 만들기 도전 ep1.
⠀
1. 코딩을 전혀 모르는 나는 챗지피티가 만들어주는 코드 자체를 어떻게 실행시키는지 부터가 관건이었다. 메모장에 붙여넣기 하면 되는건지 웹상의 어딘가에 올려야 하는지 전혀 감을 잡을 수 없었음.
2. 일단 이걸 해결하기 위해 아주 최소한의 코딩 환경 공부가 필요하다 느껴서 이미 구독중인 클래스101에서 조코딩의 <코딩 기초와 웹 프로그래밍>을 날림으로 완강. 유튜브도 하시는데 너무 재밌고 쉽게 설명을 해줘서 아주 유익했다.
3. 그래서 코드를 Visual Studio Code라는 걸 다운 받아서 실행시킬 수 있다는 걸 발견. 이것 말고도 Replit이라는 웹에서 실행하는 방법도 있음. 이것 관련해서는 유튜브나 강의를 통해 코드를 어떻게 실행시키는지 까지는 익혀둘 필요가 있음. 기본중의 기본일테니.
4. 그리고 내가 만들고 싶은 웹 화면을 만들기 위해서는 프론트엔드와 백엔드를 이해하는게 필요한단 걸 알게 됨.
5. 프론트엔드는 쉽게 말해 우리가 눈으로 보는 디자인된 UI등의 화면이라 이해하면 쉽고, 뒤쪽에서 실제로 명령을 수행하는 눈에 보이지 않는 부분이 백엔드라는 걸 알게 됨. 그리고 각각을 개발하는 언어가 좀 다르고 (같이 쓰는 것도 있던거 같은데) 나중에는 이걸 연결해 줘야 한다는 걸 알았다.
6. 먼저 이 부분을 이해하기 위해서 가장 간단하다고 생각하는 사칙연산을 하는 계산기를 하나 만들어 달라고 함. 챗지피티가 프론트엔드는 React(?) 라는 걸로 주고, 백엔드는 파이썬으로 결과를 줘서 이걸 앞서 말한 Replit에서 실행했다.
7. 한가지 팁은 챗지피티가 말하는게 분명히 이해 안되는 부분이 있는데 내가 실행하는 환경을 설명하고 그 단계를 구체적으로 알려달라고 하면 더 쉽게 알려주니 그렇게 하나씩 해결해 나가면 됨.
8. 백엔드에서 실행한 서버 URL을 프론트엔드 코드에 반영을 해주면서 결국 아주 간단한 UI의 계산기 처음으로 성공!! 약간 감잡음. 제가 잘못 알고 있는 부분들은 알려주시면 완전 감사 코린이라 많이 배워야합니다.
Replit에서 코드 실행했을 때의 모습
계산기 UI 모습. 숫자도 직접 넣어야 하고 허접하긴 하지만 동작은 제대로 된다. 이걸로 약간 감잡음!