초보 개발자 필독! GPT로 바이브 코딩 바로 시작하고 개발 용어 쉽게 정복하세요!

AI 코딩으로 나만의 당근마켓 만들기! (중학생 눈높이 설명)

와, AI 코딩으로 이렇게 뚝딱뚝딱 당근마켓 같은 사이트를 만들 수 있다니, 나도 깜짝 놀랐어! 이 영상 끝까지 보면 너도 누구나 할 수 있어. ChatGPT 써본 적 있지? 그거 써본 사람이라면 무조건 가능!

이 영상 하나로 바이브 코딩을 다 알려줄 수 있을 것 같아. 진짜 위험을 감수하고 올리는 영상이야.

🚀 시작해 볼까?

1. 준비물:

   • 비주얼 스튜디오 코드 (VS Code): 코딩할 때 쓰는 프로그램이야. 이걸 열어줘.
   • 새 폴더: 코딩한 파일들을 담을 폴더를 하나 만들고 VS Code에서 열어. 나는 '테크노트_당근'이라고 만들었어. (아직 당근마켓에 미련이 있나 봐!)

2. AI 친구 '클로드 코드' 설치:

   • VS Code에서 '확장' (Extensions)으로 들어가.
   • 검색창에 '클로드'라고 치면 '클로드 코드 4 비주얼 스튜디오'가 나올 거야. 이걸 설치해 줘.
   • 설치하면 VS Code 왼쪽에 클로드 코드가 딱 나타날 거야.

🥕 당근마켓 따라 만들기!

1. 화면 캡처:

   • 만들고 싶은 당근마켓 화면을 캡처해. (예: 물품 상세 화면)
   • 캡처한 이미지를 클로드 코드에 붙여넣고 "이대로 만들어 줘!"라고 요청하면 돼.

2. AI가 코딩 시작!

   • 클로드가 짠! 하고 HTML, CSS, JavaScript 코드를 만들어 줄 거야.
   • "어떤 기술로 만들까?" 고민할 필요 없어. AI가 알아서 해줘. (나는 간단하게 HTML, CSS, JS로 만들어봤어.)
   • AI가 만들어준 코드를 보면 '상세 페이지'가 뚝딱 만들어졌을 거야.

3. 결과 확인:

   • VS Code의 '탐색기'에서 만들어진 파일들을 볼 수 있어. index.html 같은 파일이 보일 거야.
   • 이걸 웹 브라우저에서 열어보면 방금 AI가 만든 화면이 짠! 하고 나타날 거야. 원래 사이트랑 거의 똑같지?

💡 더 나아가 볼까? (DB 연결 & 서버 만들기)

1. 물품 등록 화면 & DB 필요:

   • 이제 물건을 등록하고 보여주는 기능도 필요하겠지?
   • AI에게 "물품 등록 화면도 만들어 줘!"라고 요청하면 돼.
   • 이렇게 입력하고 보여주는 기능을 만들려면 데이터베이스(DB)가 필요해. 데이터를 저장하는 곳이지.
   • DB 종류는 여러 가지가 있는데, 나는 간단하게 SQL 라이트라는 걸로 테스트해봤어. (마이SQL 같은 다른 DB도 있어.)

2. 백엔드 서버:

   • DB에 데이터를 저장하고 가져오려면 백엔드 서버라는 게 필요해. 쉽게 말해, AI랑 DB 사이에서 데이터를 주고받는 역할을 하는 거야.
   • 이 백엔드 서버를 만들 때 Node.js 같은 기술을 사용하는데, 이게 좀 어려울 수 있어.
   • 어렵다면? 일단 AI에게 다 만들어달라고 하고, 나중에 궁금한 게 생기면 그때그때 찾아보는 것도 좋은 방법이야! (이런 내용은 '기술루트' 책이나 다른 영상에도 자세히 나와있어.)

3. AI가 서버까지 뚝딱!

   • AI에게 "SQL 라이트랑 연동되는 백엔드 서버 만들어 줘!"라고 요청하면, AI가 알아서 Node.js로 서버를 만들고 DB랑 연결까지 해줘.
   • 프로젝트 구조: AI가 만든 코드를 보면 '프로젝트 구조'라는 게 보일 거야. 이건 파일들이 어떻게 정리되어 있는지 보여주는 거야.
   • API 서버: 데이터를 주고받는 서버를 'API 서버'라고도 불러. AI가 이걸 만들어주는 거지.
   • 동적 페이지: 아까는 그냥 보여주기만 하는 화면이었는데, 이제 DB에서 실제 데이터를 가져와서 보여주는 '동적 페이지'를 만드는 거야.

💻 서버 실행 & 테스트

1. 서버 실행:

   • AI가 만든 코드를 실행하려면 npm start 라는 명령어를 입력해야 해. (이건 Node.js 서버를 켜는 거야.)
   • 이렇게 하면 내 컴퓨터에서 서버가 실행되는 거야!
   • 포트: 서버가 실행될 때 사용하는 번호를 '포트'라고 해. 보통 3000번 같은 번호를 써.
   • 로컬호스트: 내 컴퓨터를 '로컬호스트'라고 불러.

2. 웹 브라우저에서 접속:

   • 웹 브라우저를 열고 로컬호스트:3000 이라고 주소를 입력하면, 내 컴퓨터에서 실행되고 있는 서버에 접속할 수 있어!
   • 짠! 물품 등록 화면이 생겼지?

3. 실제 테스트:

   • 물품 등록 화면에 내용을 입력하고 등록하면, AI가 만든 서버와 DB에 저장돼.
   • 그리고 다시 상세 화면으로 가면 방금 등록한 내용이 짠! 하고 나타날 거야.
   • 가격, 나눔 여부까지 다 반영되는 걸 보면 정말 신기하지?

✨ 마무리

• 이렇게 AI 코딩을 이용하면 원하는 기능을 계속해서 추가할 수 있어.
• 이건 내 컴퓨터에서 실행되는 서버지만, 나중에는 실제 서버에 올려서 다른 사람들도 쓸 수 있게 만들 수도 있어. (이건 별도 영상 참고!)

궁금한 점이 있다면 언제든지 댓글로 물어봐 줘!

오늘 설명이 좋았다면 좋아요를 눌러주면 다음 영상도 계속 올릴게!

기술루트 알렉이었어. 고마워!