2026/05/09 3

[바이브코딩 HTML 웹앱 20일 챌린지] 11일차 - 집중 시간을 알려주는 타이머 만들기

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

리팩터링 타이밍: “지금 고칠까, 나중에 고칠까” 판단법

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개개발을 하다 보면 거의 매일 같은 고민을 하게 됩니다. “코드는 돌아가는데 구조가 아쉽다. 지금 고칠까, 그냥 기능부터 끝낼까?” 이 판단을 잘못하면 두 가지 문제가 생깁니다. 무조건 지금 고치면 일정이 밀리고, 무조건 미루면 기술 부채가 쌓여 이후 작업이 느려집니다. 그래서 리팩터링은 감으로 결정하는 일이 아니라, 비용과 리스크를 비교해 타이밍을 고르는 의사결정으로 접근해야 합니다.특히 실무에서는 완벽한 코드보다 안정적인 전달이 중요하기 때문에, “좋아 보이는 개선”과 “당장 필요한 개선”을 구분하는 기준이 필요합니다. 이 기준이 없으면 팀원마다 판단이 달라 리뷰가 길어지고, 결국 중요한 이슈보다 취향 논쟁에 시간..

if문과 조건문, ‘컴퓨터의 선택’ 이해하기

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개프로그램은 항상 위에서 아래로만 실행되는 것처럼 보이지만, 실제로는 조건에 따라 다른 길을 선택합니다. 그 선택을 만드는 문법이 if문입니다. 조건문은 컴퓨터에게 "이럴 때는 A, 아니면 B"를 알려주는 규칙이라고 생각하면 이해가 쉽습니다.2. 핵심 내용if: 조건이 참일 때 실행if는 괄호 안 조건이 true일 때만 코드 블록을 실행합니다. 로그인 여부 확인, 재고 여부 판단, 입력값 유효성 검사 같은 기본 로직에 자주 쓰입니다.else: 조건이 거짓일 때 실행else는 if 조건이 false일 때 대체 동작을 수행합니다. 예를 들어 권한이 없으면 경고 메시지를 보여주는 방식입니다.else if: 여러 갈래 선택조..