AI랑 같이하는 코딩

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

18일차에서는 지금까지 만든 웹앱에 이름과 소개 문구를 붙입니다. 기능 완성만큼 중요한 것이 정체성 정리이고, 앱의 톤과 목적을 한 문장으로 설명하는 작업이 브랜딩의 시작입니다.오늘은 AI와 함께 이름 후보를 뽑고, 헤더 문구와 버튼 텍스트를 다듬어 "내가 만든 앱"이라는 느낌을 더 분명하게 만드는 데 집중합니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 앱 이름 선정과 UI 문구 정리입니다. 예를 들어 앱 타이틀, 서브 설명, 빈 목록 안내 문구, 버튼 라벨을 통일된 톤으로 바꾸면 같은 기능이라도 훨씬 완성도 있게 보입니다.2. AI에게 ..

목차1. 체크박스는 눌리는데 왜 상태가 안 바뀔까2. 가장 자주 생기는 원인 5가지3. 단계별 점검과 수정 방법4. 상태 동기화를 안정화하는 습관5. 자주 묻는 질문1. 체크박스는 눌리는데 왜 상태가 안 바뀔까할 일 목록을 만들 때 가장 흔한 문제 중 하나가 "체크박스는 클릭되는데 완료 상태가 반영되지 않는" 상황입니다. 화면에서 체크가 들어간 것처럼 보여도, 실제 데이터 배열은 그대로인 경우가 많고, 반대로 데이터는 바뀌었는데 화면이 다시 렌더링되지 않아 변화가 없는 것처럼 보일 때도 있습니다.결국 이 문제는 체크박스 자체보다 이벤트 처리, 데이터 업데이트, 화면 렌더링 세 단계 중 어디가 끊겼는지 찾는 작업입니다. 이 흐름을 순서대로 점검하면 대부분 빠르게 해결됩니다. 감으로 고치기보다 단계별로 검증..

목차1. 왜 에러 메시지 한 줄만으로는 부족한가2. AI에게 꼭 전달해야 할 정보 6가지3. 복붙해서 쓰는 에러 질문 템플릿4. 해결 속도를 올리는 디버깅 습관5. 자주 묻는 질문1. 왜 에러 메시지 한 줄만으로는 부족한가AI에게 디버깅을 요청할 때 많은 사람이 에러 문장 한 줄만 보냅니다. 예를 들어 “Cannot read properties of undefined” 같은 메시지입니다. 문제는 이 문장만으로는 원인이 너무 많다는 점입니다. 같은 에러라도 변수 초기화 누락, 비동기 타이밍 이슈, API 응답 구조 변경 등 서로 다른 원인에서 발생할 수 있습니다. 그래서 AI는 정답 하나를 내기보다 가능한 시나리오를 길게 나열하게 됩니다.결국 핵심은 에러 문장 자체보다 에러가 발생한 맥락입니다. 어떤 환경..

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개프론트엔드 초보 코드에서 가장 빠르게 늘어나는 것이 CSS 중복입니다. 버튼마다 비슷한 스타일을 따로 쓰고, 카드마다 거의 같은 여백과 그림자를 반복하고, 색상값을 여기저기 직접 입력하다 보면 파일이 길어지고 관리가 어려워집니다. 처음엔 눈앞의 화면만 맞추면 되기 때문에 문제를 느끼기 어렵지만, 디자인이 조금만 바뀌어도 수정 범위가 급격히 커집니다. 예를 들어 브랜드 컬러를 바꾸는 요청이 들어왔을 때 하드코딩된 색상값이 20군데 이상이면 수정 누락 가능성이 매우 높습니다.이번 글에서는 CSS 중복을 줄이는 가장 단순하고 효과적인 기준을 Before & After 관점으로 정리합니다. 핵심은 복잡한 아키텍처가 아니라 ..

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

목차1. 저장했는데 왜 사라질까2. 먼저 확인할 핵심 원인3. 단계별 해결 방법4. 안정적으로 유지하는 패턴5. 자주 묻는 질문1. 저장했는데 왜 사라질까localStorage는 브라우저에 데이터를 저장하므로, 원칙적으로 새로고침해도 값이 유지되어야 합니다. 그런데 실제 개발에서는 "분명 저장했는데 리로드하면 초기화"되는 일이 자주 발생합니다. 이때 localStorage가 고장 난 것이 아니라, 저장과 불러오기 흐름 중 하나가 깨진 경우가 대부분입니다.특히 초보 단계에서 흔한 실수는 저장 직후 화면에는 반영되지만, 페이지 시작 시 다시 읽어오는 코드가 없거나 잘못된 키를 쓰는 경우입니다. 또 다른 원인은 개발 중 초기화 코드가 매번 실행되어 저장값을 덮어쓰는 상황입니다. 핵심은 저장(set)과 복원(g..

목차1. 왜 “코드 설명해줘”만으로는 부족할까2. 초보자 질문의 핵심 구조 4가지3. 이해가 빨라지는 질문 템플릿4. 실전에서 자주 하는 실수와 개선법5. 자주 묻는 질문1. 왜 “코드 설명해줘”만으로는 부족할까초보자가 AI에게 코드를 물어볼 때 가장 흔한 문장은 “이 코드 설명해줘”입니다. 물론 이 질문도 나쁘지 않지만, 결과가 너무 넓고 추상적으로 나올 가능성이 큽니다. AI는 코드 전체를 훑으며 일반론을 말하기 쉽고, 사용자가 진짜 막힌 지점을 정확히 짚어주지 못할 때가 많습니다. 결국 설명을 읽어도 “그래서 나는 지금 뭘 고치면 되지?”라는 답답함이 남게 됩니다.핵심은 질문의 범위를 줄이는 것입니다. 코드의 모든 줄을 한 번에 이해하려고 하기보다, 현재 막힌 포인트를 잘라서 물어보면 답변 품질이 ..

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개HTML은 화면을 "보이게" 만드는 언어이지만, 실무에서는 "읽히게" 만드는 능력이 더 중요합니다. 초보 단계에서 자주 나오는 문제는 div를 계속 중첩해 구조가 깊어지고, 클래스 이름이 뒤섞이며, 영역 구분이 없어 수정할 때 길을 잃는 상황입니다. 화면은 정상 출력되는데 코드만 보면 어디가 헤더인지, 어디가 본문인지, 어떤 블록이 반복되는 카드인지 한눈에 파악하기 어려운 상태가 됩니다. 이 경우 디자인 변경이나 기능 추가 시 작은 수정도 큰 스트레스로 이어집니다.이번 글은 HTML 구조를 보기 좋게 정리하는 기본 기준을 Before & After 관점으로 설명합니다. 핵심은 복잡한 기술이 아니라 구조적 습관입니다...

16일차에서는 모바일 화면에서도 보기 좋은 반응형 레이아웃을 적용합니다. 데스크톱에서는 괜찮던 구성도 작은 화면에서는 답답해질 수 있어서, 화면 크기에 맞춰 구조를 바꾸는 CSS 전략이 필요합니다.오늘은 `media query`를 중심으로 카드 배치, 여백, 버튼 크기, 입력창 너비를 조정해 스마트폰에서도 자연스럽게 사용할 수 있는 웹앱으로 개선합니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 모바일 가독성과 조작성을 높이는 것입니다. 카드가 가로로 길게 배치되어 있다면 세로 스택으로 바꾸고, 작은 화면에서 텍스트와 버튼이 겹치지 않도록 간..