AI랑 같이하는 코딩

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개투두앱은 초보자가 JavaScript를 익힐 때 가장 많이 만드는 프로젝트입니다. 입력값 추가, 목록 렌더링, 완료 체크, 삭제, 저장까지 기본 기능이 골고루 들어 있어 연습에 좋기 때문입니다. 하지만 실제 코드를 보면 기능은 동작하는데 구조가 빠르게 복잡해지는 경우가 많습니다. 예를 들어 전역 변수에 상태를 몰아두고, 이벤트 핸들러 안에서 직접 DOM을 계속 수정하며, localStorage 접근도 여기저기 섞여 있으면 작은 기능 추가도 어렵습니다. 결국 "고치면 다른 기능이 깨지는" 경험을 자주 하게 됩니다.이번 글은 초보자의 투두앱 코드를 한 단계 개선하는 기준을 Before & After 관점으로 소개합니다...

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개초보 코드 리뷰를 하다 보면 가장 자주 만나는 장면이 긴 조건문입니다. `if` 안에 `if`가 들어가고, `else if`가 계속 이어지며, 논리연산자까지 섞이면 코드가 동작하더라도 읽기가 매우 어려워집니다. 특히 로그인, 결제, 권한 체크 같은 분기 많은 기능에서 이런 문제가 자주 나타납니다. 문제는 단순히 코드가 길다는 것이 아니라, 어떤 케이스가 먼저 처리되고 어떤 케이스가 누락됐는지 파악하기 어렵다는 점입니다. 이 상태에서는 수정할 때마다 예상치 못한 회귀 버그가 생기기 쉽습니다.이번 글에서는 길어진 조건문을 읽기 좋게 바꾸는 기본 기준을 Before & After 관점으로 정리합니다. 핵심은 분기 자체를 ..

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개초보 프로젝트에서 localStorage는 매우 자주 사용됩니다. 다크모드 상태 저장, 최근 검색어 보관, 임시 폼 데이터 유지 같은 기능을 빠르게 만들 수 있기 때문입니다. 문제는 이 저장/조회 코드가 파일 곳곳에 흩어지기 시작할 때 발생합니다. 어떤 곳에서는 `JSON.stringify`를 쓰고, 다른 곳에서는 문자열 그대로 넣고, 키 이름도 제각각이면 버그가 생겨도 원인을 찾기 어렵습니다. 특히 파싱 오류나 null 처리 누락은 화면이 조용히 깨지는 원인이 됩니다.이번 글에서는 localStorage 코드를 함수로 분리해 안정성과 가독성을 높이는 방법을 Before & After 관점으로 정리합니다. 핵심은 단..

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개프론트엔드 초보 코드에서 가장 빨리 복잡해지는 부분은 이벤트 처리입니다. 버튼 클릭, 입력 변경, 스크롤, 모달 열기/닫기 같은 동작을 기능별로 급하게 붙이다 보면 `addEventListener`가 파일 곳곳에 흩어지고, 비슷한 콜백 로직이 반복되며, 상태 변경이 여러 군데서 동시에 일어납니다. 화면은 돌아가지만 "왜 이 버튼이 여기서도 반응하지?" 같은 예측 불가능한 버그가 생기기 쉽습니다. 특히 이벤트 바인딩 해제 없이 재렌더링이 반복되면 중복 호출까지 발생합니다.이번 글은 지저분해진 이벤트 코드를 정리하는 기본 기준을 Before & After 관점으로 설명합니다. 핵심은 고급 패턴보다 흐름 통제입니다. 이벤..

17일차에서는 기능이 늘어나며 복잡해진 코드를 파일별로 정리합니다. 지금까지 빠르게 기능을 붙였다면, 오늘은 유지보수하기 쉬운 구조로 다듬는 날입니다. 파일 분리와 역할 분리를 해두면 이후 수정 속도와 안정성이 크게 좋아집니다.특히 초보자에게 리팩토링은 "어려운 최적화"가 아니라 코드를 읽기 쉬운 상태로 정돈하는 습관이라는 점이 중요합니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 HTML, CSS, JavaScript 파일을 역할 중심으로 정리하고, 중복 코드와 길어진 이벤트 로직을 함수 단위로 분리하는 것입니다. 기능 추가는 잠시 멈추고..

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개초보 개발자의 코드에서 자주 보이는 패턴 중 하나가 "한 함수에 모든 작업을 다 넣는 구조"입니다. 예를 들어 `submitOrder()` 함수 하나에서 입력 검증, 할인 계산, API 호출, 에러 처리, 화면 갱신, 알림 표시까지 전부 처리하는 경우가 많습니다. 처음에는 흐름이 한눈에 보인다고 느낄 수 있지만, 함수가 길어질수록 수정 포인트를 찾기 어려워지고 작은 변경도 전체 동작에 영향을 주게 됩니다. 결국 디버깅 시간은 늘어나고, 버그는 더 자주 생깁니다.이번 글은 너무 긴 함수를 작게 나누는 기준을 현실적으로 정리합니다. 핵심은 코드 미학이 아니라 유지보수 가능성입니다. 한 함수는 한 가지 책임만 갖게 만들고..

15일차에서는 할 일 검색과 상태 필터 기능을 추가합니다. 항목이 많아질수록 원하는 할 일을 찾기 어려워지기 때문에, 키워드 검색 + 완료/미완료 필터는 사용성을 크게 높여줍니다.오늘 구현의 핵심은 목록 전체를 다시 만들지 않고, 조건에 맞는 항목만 보여주거나 숨기는 방식으로 가볍게 처리하는 것입니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘은 두 가지를 만듭니다. 첫째, 입력한 키워드가 포함된 할 일만 보여주는 검색 기능. 둘째, 전체/완료/미완료 조건으로 목록을 나눠 보는 상태 필터입니다.2. AI에게 요청할 프롬프트검색 기준과 필터 종류를 함..

목차1. 한 번에 요청하면 생기는 문제2. 분리 요청이 품질을 높이는 이유3. 실전 분할 요청 순서4. 협업과 유지보수 관점에서의 장점5. 자주 묻는 질문1. 한 번에 요청하면 생기는 문제“HTML, CSS, JavaScript까지 한 번에 다 만들어줘”라는 요청은 얼핏 효율적으로 보입니다. 하지만 실제로는 결과 품질이 흔들릴 가능성이 큽니다. 이유는 각 영역의 관심사가 다르기 때문입니다. HTML은 구조와 의미, CSS는 시각 표현과 반응형, JavaScript는 상태와 동작을 다룹니다. 세 가지를 한 번에 요청하면 AI가 우선순위를 정하는 과정에서 어느 한 축이 희생되기 쉽습니다.대표적으로 마크업 구조가 부실해지거나, 스타일은 그럴듯하지만 스크립트가 예외 상황을 처리하지 못하는 경우가 생깁니다. 또 ..

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개코드가 길지 않은데도 이해하기 어려운 경우가 있습니다. 원인을 따라가 보면 대부분 변수명에서 막힙니다. `a`, `data`, `temp`, `value2`, `resultFinal` 같은 이름은 작성자 머릿속에서는 의미가 있지만, 며칠 뒤 본인이나 팀원이 보면 문맥을 다시 해석해야 합니다. 즉 코드가 동작하더라도 읽는 비용이 크게 증가합니다. 초보 단계에서는 기능 완성에 집중하다 보니 변수명을 대충 정하기 쉽지만, 실제 유지보수에서는 이 작은 습관이 가장 큰 시간을 잡아먹습니다.이번 글에서는 "이름이 애매한 변수명"을 어떻게 읽기 좋은 형태로 바꿀지 Before & After 관점으로 다룹니다. 중요한 기준은 어렵..

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