AI랑 같이하는 코딩

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

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

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

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

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개프론트엔드 실무에서 API 연동은 단순히 `fetch`를 호출하는 작업이 아닙니다. 요청이 성공하더라도 데이터 구조가 예상과 다르면 화면이 깨지고, 실패 처리가 느슨하면 사용자 경험이 급격히 나빠집니다. 특히 서비스가 커질수록 같은 API를 여러 화면에서 공유하기 때문에, 처음 연동할 때 기준 없이 구현하면 나중에 유지보수 비용이 크게 늘어납니다. 그래서 중요한 것은 코드 한 줄보다 호출 전·중·후 체크리스트를 갖추는 일입니다.초보 단계에서는 “응답만 오면 된다”는 관점으로 시작하기 쉽습니다. 하지만 실전에서는 인증 토큰 만료, 네트워크 지연, 예외 응답 포맷, 재시도 정책 같은 변수들이 항상 존재합니다. 이 변수들..

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개JavaScript에서 데이터를 다룰 때 가장 자주 만나는 구조가 배열(Array)과 객체(Object)입니다. 둘 다 값을 담지만 기준이 다릅니다. 순서가 중요하면 배열, 이름(키)로 찾고 싶으면 객체라고 기억하면 실무 판단이 빨라집니다.2. 핵심 내용배열(Array): 순서가 있는 목록배열은 인덱스(0, 1, 2...)로 데이터를 관리합니다. 게시글 목록, 댓글 리스트, 장바구니 상품처럼 "여러 항목을 순서대로" 다룰 때 적합합니다.객체(Object): 속성 이름이 있는 묶음객체는 키(key)-값(value) 형태로 데이터를 보관합니다. 사용자 정보처럼 name, email, role처럼 의미 있는 이름으로 접근..

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

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개회원가입, 문의 등록, 결제 정보 입력처럼 폼은 대부분의 서비스에서 전환율을 좌우하는 핵심 구간입니다. 기능은 같아 보여도 입력 검증과 에러 메시지 UX를 어떻게 설계했는지에 따라 완료율이 크게 달라집니다. 사용자가 실수했을 때 “왜 안 되는지”를 즉시 이해할 수 있으면 다시 시도하지만, 이유를 모르면 이탈합니다. 그래서 폼 처리의 본질은 값 저장이 아니라 사용자가 끝까지 완료할 수 있도록 돕는 흐름 설계입니다.초보 개발자가 자주 겪는 문제는 검증 로직을 나중에 붙이는 방식입니다. 화면을 만든 뒤 제출 버튼에서만 한 번에 검사하면 에러가 한꺼번에 쏟아지고 사용자는 어디부터 고쳐야 할지 모르게 됩니다. 반대로 입력 시..

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개웹페이지에서 버튼을 누르면 메뉴가 열리고, 입력창에 글을 쓰면 안내 문구가 바뀌는 이유는 무엇일까요? 그 핵심이 바로 이벤트(Event)입니다. 이벤트는 브라우저 안에서 발생한 신호이고, JavaScript는 그 신호를 받아 동작을 실행합니다.2. 핵심 내용이벤트는 "일이 발생했다"는 알림클릭(click), 입력(input), 제출(submit), 스크롤(scroll), 키보드 입력(keydown)처럼 사용자의 행동이나 브라우저 상태 변화가 이벤트가 됩니다.이벤트 리스너가 신호를 기다린다addEventListener를 사용하면 특정 요소에서 특정 이벤트가 발생했을 때 실행할 함수를 연결할 수 있습니다. 즉, "무슨 ..

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