javascript21 [바이브코딩 HTML 웹앱 20일 챌린지] 15일차 - 할 일을 검색하고 상태별로 걸러보기 15일차에서는 할 일 검색과 상태 필터 기능을 추가합니다. 항목이 많아질수록 원하는 할 일을 찾기 어려워지기 때문에, 키워드 검색 + 완료/미완료 필터는 사용성을 크게 높여줍니다.오늘 구현의 핵심은 목록 전체를 다시 만들지 않고, 조건에 맞는 항목만 보여주거나 숨기는 방식으로 가볍게 처리하는 것입니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘은 두 가지를 만듭니다. 첫째, 입력한 키워드가 포함된 할 일만 보여주는 검색 기능. 둘째, 전체/완료/미완료 조건으로 목록을 나눠 보는 상태 필터입니다.2. AI에게 요청할 프롬프트검색 기준과 필터 종류를 함.. 2026. 5. 13. HTML, CSS, JavaScript를 한 번에 요청하면 안 되는 이유 목차1. 한 번에 요청하면 생기는 문제2. 분리 요청이 품질을 높이는 이유3. 실전 분할 요청 순서4. 협업과 유지보수 관점에서의 장점5. 자주 묻는 질문1. 한 번에 요청하면 생기는 문제“HTML, CSS, JavaScript까지 한 번에 다 만들어줘”라는 요청은 얼핏 효율적으로 보입니다. 하지만 실제로는 결과 품질이 흔들릴 가능성이 큽니다. 이유는 각 영역의 관심사가 다르기 때문입니다. HTML은 구조와 의미, CSS는 시각 표현과 반응형, JavaScript는 상태와 동작을 다룹니다. 세 가지를 한 번에 요청하면 AI가 우선순위를 정하는 과정에서 어느 한 축이 희생되기 쉽습니다.대표적으로 마크업 구조가 부실해지거나, 스타일은 그럴듯하지만 스크립트가 예외 상황을 처리하지 못하는 경우가 생깁니다. 또 .. 2026. 5. 13. 이름이 애매한 변수명 더 이해하기 쉽게 바꾸기: 초보 코드 리뷰 Before & After 목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개코드가 길지 않은데도 이해하기 어려운 경우가 있습니다. 원인을 따라가 보면 대부분 변수명에서 막힙니다. `a`, `data`, `temp`, `value2`, `resultFinal` 같은 이름은 작성자 머릿속에서는 의미가 있지만, 며칠 뒤 본인이나 팀원이 보면 문맥을 다시 해석해야 합니다. 즉 코드가 동작하더라도 읽는 비용이 크게 증가합니다. 초보 단계에서는 기능 완성에 집중하다 보니 변수명을 대충 정하기 쉽지만, 실제 유지보수에서는 이 작은 습관이 가장 큰 시간을 잡아먹습니다.이번 글에서는 "이름이 애매한 변수명"을 어떻게 읽기 좋은 형태로 바꿀지 Before & After 관점으로 다룹니다. 중요한 기준은 어렵.. 2026. 5. 12. [바이브코딩 HTML 웹앱 20일 챌린지] 14일차 - 눈이 편한 다크모드 추가하기 14일차에서는 밝은 화면과 어두운 화면을 전환하는 다크모드를 추가합니다. 기능 자체는 단순하지만 사용성이 크게 좋아지고, 사용자 환경에 맞는 UI 제어를 익히는 좋은 단계입니다.오늘은 버튼 하나로 테마를 바꾸고, 선택한 테마를 localStorage에 저장해 다시 접속해도 같은 모드가 유지되도록 구현합니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 테마 전환 토글입니다. 버튼을 클릭하면 `body`에 `dark-mode` 클래스를 붙이거나 제거하고, CSS에서 이 클래스 기준으로 배경색/글자색/카드색을 바꿔서 전체 톤을 전환합니다.2. AI.. 2026. 5. 12. 복붙이 많은 JavaScript 코드 줄이기: 초보 코드 리뷰 Before & After 목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개JavaScript를 처음 배우면 기능을 빠르게 완성하는 데 집중하게 됩니다. 이때 가장 흔한 패턴이 바로 복사해서 붙여넣기, 즉 복붙입니다. 버튼마다 거의 같은 이벤트 코드를 여러 번 작성하고, 유효성 검사도 입력칸 개수만큼 반복하고, API 호출 후 처리도 페이지마다 비슷하게 붙여넣다 보면 당장은 편해 보여도 금방 코드가 무거워집니다. 특히 수정 요청이 들어왔을 때 문제가 커집니다. 예를 들어 같은 로직이 7곳에 흩어져 있으면 1곳만 고치고 끝날 수 없고, 실수로 1~2곳을 빼먹기 쉽습니다. 결과적으로 버그가 다시 생기고, "분명 고쳤는데 왜 또 안 되지?"라는 상황이 반복됩니다.이 글은 초보 코드 리뷰 관점에서.. 2026. 5. 11. [바이브코딩 HTML 웹앱 20일 챌린지] 13일차 - 오늘 얼마나 해냈는지 진행률로 보여주기 13일차에서는 오늘 해낸 양을 숫자와 막대로 보여주는 진행률 기능을 만듭니다. 지금까지 쌓은 할 일/습관 데이터를 바탕으로 완료 비율을 시각화하면 사용자는 하루 성취를 더 직관적으로 확인할 수 있습니다.이 기능은 단순 계산처럼 보여도 사용자 동기 유지에 매우 효과적입니다. 초보자도 완료 개수와 전체 개수만 정확히 계산하면 쉽게 구현할 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 완료한 할 일과 체크한 습관을 기준으로 진행률을 계산해 보여주는 것입니다. 예를 들어 완료 5개 / 전체 8개라면 62%를 출력하고, 진행률 바 너비도 6.. 2026. 5. 11. 이전 1 2 3 4 다음
