AI랑 같이하는 코딩

14일차에서는 밝은 화면과 어두운 화면을 전환하는 다크모드를 추가합니다. 기능 자체는 단순하지만 사용성이 크게 좋아지고, 사용자 환경에 맞는 UI 제어를 익히는 좋은 단계입니다.오늘은 버튼 하나로 테마를 바꾸고, 선택한 테마를 localStorage에 저장해 다시 접속해도 같은 모드가 유지되도록 구현합니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 테마 전환 토글입니다. 버튼을 클릭하면 `body`에 `dark-mode` 클래스를 붙이거나 제거하고, CSS에서 이 클래스 기준으로 배경색/글자색/카드색을 바꿔서 전체 톤을 전환합니다.2. AI..

13일차에서는 오늘 해낸 양을 숫자와 막대로 보여주는 진행률 기능을 만듭니다. 지금까지 쌓은 할 일/습관 데이터를 바탕으로 완료 비율을 시각화하면 사용자는 하루 성취를 더 직관적으로 확인할 수 있습니다.이 기능은 단순 계산처럼 보여도 사용자 동기 유지에 매우 효과적입니다. 초보자도 완료 개수와 전체 개수만 정확히 계산하면 쉽게 구현할 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 완료한 할 일과 체크한 습관을 기준으로 진행률을 계산해 보여주는 것입니다. 예를 들어 완료 5개 / 전체 8개라면 62%를 출력하고, 진행률 바 너비도 6..

12일차에서는 매일 반복하는 습관을 체크할 수 있는 목록을 만듭니다. 할 일은 그날그날 바뀌지만, 습관은 반복된다는 점이 다르기 때문에 고정 항목 + 체크 상태 저장 흐름을 따로 구현하는 것이 핵심입니다.오늘 기능이 들어가면 하루 관리 웹앱이 단기 작업 관리에서 생활 루틴 관리까지 확장됩니다. 초보자도 체크박스 이벤트와 localStorage 저장 패턴을 재사용해 안정적으로 구현할 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘은 물 마시기, 스트레칭, 책 읽기 같은 습관 항목을 고정 리스트로 표시하고, 항목별 체크 상태를 저장/복원하는 기..

11일차에서는 집중 타이머를 추가해 생산성 기능을 강화합니다. 할 일과 메모를 정리하는 것에서 한 걸음 더 나아가, 집중 시간을 직접 측정하고 관리하는 흐름을 웹앱에 붙이는 단계입니다.오늘은 25분 타이머 기준으로 시작, 정지, 초기화 버튼을 구현합니다. 초보자에게도 적합한 `setInterval` 패턴을 익히면 이후 카운트다운/알림 기능 확장도 쉬워집니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘의 핵심 기능은 카운트다운 타이머입니다. 25:00에서 시작해 1초마다 시간이 줄어들고, 00:00이 되면 자동으로 멈추게 만듭니다. 버튼은 `시작`, ..

10일차에서는 오늘의 기분을 버튼으로 기록하는 기능을 만듭니다. 지금까지 할 일과 메모를 쌓았다면, 오늘은 감정 상태까지 한 화면에서 관리해 하루 대시보드의 개인화 수준을 높이는 단계입니다.복잡한 분석 기능 없이도 "기분 선택 → 화면 표시 → 저장" 흐름만 구현하면 실사용성이 크게 올라갑니다. 초보자에게도 부담이 적고, localStorage 재활용 연습까지 함께 할 수 있는 좋은 확장 과제입니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 기능은 사용자가 기분 버튼을 누르면 선택 상태가 표시되고, 그 값이 저장되는 구조입니다. 예를 들어 😀 ?..

9일차에서는 하루 관리 웹앱에 메모장 기능을 추가합니다. 지금까지 할 일 목록을 중심으로 만들었다면, 오늘은 짧은 생각이나 기록을 남길 수 있는 공간을 붙여 개인 대시보드로서의 활용도를 높이는 단계입니다.핵심은 복잡한 에디터가 아니라 "빠르게 쓰고 저장하는 메모"입니다. 초보자 기준에서는 textarea, 저장 버튼, localStorage 연동만 제대로 구현해도 실사용 가능한 기능이 됩니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 메모 입력 영역과 저장 흐름을 만드는 것입니다. 사용자가 textarea에 텍스트를 입력하고 저장 버튼을 누..

8일차에서는 새로고침해도 할 일이 사라지지 않도록 `localStorage` 저장 기능을 붙입니다. 지금까지는 페이지를 다시 열면 목록이 초기화됐지만, 오늘부터는 입력한 데이터가 브라우저에 남아 다시 불러와지는 흐름을 구현합니다.이 단계는 웹앱이 "진짜 도구"로 넘어가는 중요한 전환점입니다. 초보자도 저장/불러오기 구조를 한 번 익혀두면 메모, 기분 기록, 다크모드까지 같은 패턴으로 확장할 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘의 목표는 할 일 목록 상태를 저장하고 복원하는 것입니다. 할 일을 추가/완료/삭제할 때마다 현재 목록을 ..

7일차에서는 할 일 항목에 완료 체크와 삭제 기능을 붙입니다. 6일차에 "추가"까지 됐다면, 오늘은 목록을 실제로 관리할 수 있게 만드는 단계입니다. 완료 상태 전환 + 개별 삭제가 들어가면 웹앱 사용감이 한 단계 올라갑니다.이 단계의 핵심은 "클릭한 항목만 정확히 제어"하는 흐름입니다. 초보자도 이벤트 타겟 개념을 한 번 익혀두면 이후 필터, 진행률, 저장 기능으로 확장할 때 훨씬 유리합니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 기능은 두 가지입니다. 첫째, 체크박스를 눌러 완료 상태를 표시하고 완료 항목 스타일(예: 취소선, 색상 변경)을..

6일차에서는 드디어 버튼 클릭으로 할 일이 실제로 추가되게 만듭니다. 5일차에 준비한 입력창, 버튼, 목록 UI에 JavaScript를 연결해서 사용자 입력이 화면에 반영되는 첫 동작을 구현하는 날입니다.이 단계부터 "정적인 페이지"가 아니라 "반응하는 웹앱"으로 넘어갑니다. 초보자 기준에서는 모든 문법을 완벽히 이해하려고 하기보다, 클릭 이벤트가 어떤 순서로 실행되는지 흐름을 잡는 데 집중하면 훨씬 빠르게 성장할 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘의 목표는 입력창에 작성한 할 일을 버튼 클릭 한 번으로 목록에 추가하는 것입니다..

5일차에서는 사용자가 할 일을 입력할 수 있는 공간을 만듭니다. 지금까지는 보기 좋은 구조와 스타일을 준비했다면, 오늘은 실제 상호작용을 위한 UI를 올리는 단계입니다. 입력창, 추가 버튼, 목록 영역을 먼저 완성해두면 내일 JavaScript 동작을 붙이기 훨씬 쉬워집니다.이 단계의 핵심은 아직 "작동"이 아니라 "준비된 화면"입니다. 초보자 기준에서는 기능 구현 전에 화면 요소를 분리해두는 습관이 중요하고, 바이브코딩에서도 AI에게 요청 범위를 줄여 정확한 코드를 받는 데 큰 도움이 됩니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 만들 기능은..