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..

목차1. 왜 JS가 멈춘 것처럼 보일까2. 가장 먼저 확인할 5가지3. 실제 점검 순서와 복구 방법4. 재발 방지를 위한 개발 습관5. 자주 묻는 질문1. 왜 JS가 멈춘 것처럼 보일까JavaScript가 실행되지 않을 때 가장 답답한 점은 화면만 보면 원인이 전혀 보이지 않는다는 것입니다. 버튼도 보이고 입력창도 있는데, 클릭해도 변화가 없으니 코드 전체가 고장 난 느낌이 들죠. 하지만 대다수 문제는 특정 한 지점에서 스크립트가 끊긴 상태입니다. 즉, 전부 실패한 것이 아니라 한 줄의 에러가 이후 실행을 막는 구조인 경우가 흔합니다.그래서 중요한 건 "무엇이 안 되나"보다 "어디서 실행이 멈추나"를 찾는 것입니다. 콘솔, 스크립트 로드, DOM 시점, 선택자, 캐시를 순서대로 확인하면 생각보다 빠르게 ..

목차1. 왜 “투두앱 만들어줘”는 아쉬운 요청일까2. 좋은 요청이 갖춰야 할 4요소3. 실제로 바꿔 쓰는 프롬프트 예시4. 작업 속도를 높이는 운영 팁5. 자주 묻는 질문1. 왜 “투두앱 만들어줘”는 아쉬운 요청일까처음 AI 코딩을 시작하면 가장 많이 쓰는 문장이 “투두앱 만들어줘”입니다. 짧고 편하지만, 실전에서는 이 방식이 오히려 시간을 늘릴 때가 많습니다. 이유는 간단합니다. 이 요청에는 기능 범위, 사용 기술, 데이터 저장 방식, UI 기준, 예외 처리 규칙이 모두 빠져 있기 때문입니다. AI는 빠르게 결과를 내지만, 빠른 결과와 맞는 결과는 다릅니다.예를 들어 어떤 사용자는 로컬스토리지를 원하고, 어떤 사용자는 서버 API 연동을 원합니다. 어떤 사람은 모바일 반응형이 필수고, 어떤 사람은 데스..