본문 바로가기
Code/혼공단 - 혼자 공부하는 바이브 코딩

혼자 공부하는 바이브 코딩 with 클로드 코드 - 1주차 미션

by Beyonder 2026. 1. 12.

 

 

 

혼자 공부하는 바이브 코딩 with 클로드 코드 | 조태호 | 한빛미디어 - 예스24

하버드의과대학교수, 국회의원, 실리콘밸리 벤처캐피탈 창립파트너 등 국내외 전문가 강력 추천!코딩 몰라도, 아이디어만 있으면 앱을 만드는 시대를 위한 실습형 AI 코딩 입문서저자 직강 유튜

www.yes24.com

 

★1주 차 미션★ (1/5 ~ 1/11)

주차별 진도에 따라 주어진 숙제와 한 주간 공부한 내용을 정리하여 블로그에 올려주세요.
(블로그 게시물은 참여자 모두가 함께 볼 수 있도록 전체 공개해주시기 바랍니다)

  • 🚶기본 미션: 필수 사항
  • 🏃추가 미션: 선택 사항(※매주 기본 숙제만 해도 됩니다.)

 

1주 차 진도: Ch 01

함께 제공되는 동영상 강의 실습 예제 자료를 활용하여 공부해 주시고,
질문이 있을 땐 Q&A 채널을 이용해 주세요.

  • 🚶기본 미션(필수)
    • PROJECT 1. 나의 첫 웹페이지 만들고 캡처하기
    • p.33, p54-55 확인 문제 풀고 인증하기
  • 🏃추가 미션(선택)
    • 클로드 아티팩트에서 [커스터마이즈] 2회 이상하고 캡처하기

🚶기본 미션(필수)

  • PROJECT 1. 나의 첫 웹페이지 만들고 캡처하기
Prompt:
오늘의 날씨, 주요 경제 뉴스, 미세먼지 정보를 보여주는 나의 홈페이지를 만들고 싶어. 다크모드로 깔끔한 스타일로 해주고, 시계와 IT관련 신간 도서 정보도 보여줘.
 
좋아요! 멋진 개인 대시보드 홈페이지네요. 제가 이해한 내용을 정리해볼게요:

📋 홈페이지 계획

주요 기능

  1. 실시간 시계 - 현재 시간 표시
  2. 날씨 정보 - 서울 지역의 현재 날씨
  3. 미세먼지 정보 - 대기질 데이터
  4. 경제 뉴스 - 주요 경제 관련 뉴스
  5. IT 신간 도서 - 최신 IT 도서 정보

디자인 스타일

  • 다크모드 테마
  • 깔끔하고 모던한 카드 레이아웃
  • 정보별로 구분된 섹션
  • 읽기 편한 타이포그래피

기술 구성

  • React 컴포넌트로 구성
  • 실시간 데이터 업데이트
  • 반응형 그리드 레이아웃
  • API를 통한 실시간 정보 수집

 

 

  • p.33, p54-55 확인 문제 풀고 인증하기


🏃추가 미션(선택)

  • 클로드 아티팩트에서 [커스터마이즈] 2회 이상하고 캡처하기
Prompt:
구글 스타일로 디자인을 수정해주고 실제 날씨, 메세먼지, 경제뉴스, IT 신간 정보 등을 보여줘

 

Prompt:
오늘의 할일 목록을 추가해 줘.