AI랑 같이하는 코딩

목차1. 왜 AI 코드가 바로 안 돌아갈까2. 수정 요청 전에 준비할 정보3. 효과적인 재요청 문장 템플릿4. 디버깅 속도를 높이는 협업 습관5. 자주 묻는 질문1. 왜 AI 코드가 바로 안 돌아갈까AI가 제공한 코드는 "일반적인 환경"을 기준으로 생성되는 경우가 많습니다. 그런데 실제 프로젝트는 파일 구조, 라이브러리 버전, 데이터 형식, 빌드 환경이 다르기 때문에 그대로 붙여넣으면 동작하지 않을 수 있습니다. 이건 이상한 일이 아니라 자연스러운 현상입니다.중요한 건 "코드가 틀렸다"고 단정하기보다, 현재 환경과 맞지 않는 지점을 빠르게 찾아 다시 요청하는 것입니다. 요청 품질이 올라가면 답변 정확도도 크게 올라갑니다. 즉, AI 활용의 핵심은 한 번에 정답을 받는 것이 아니라 증상과 맥락을 정확히 전..

목차1. 보이는데 클릭이 안 되는 현상 이해2. 가장 흔한 원인 체크리스트3. 빠르게 해결하는 점검 순서4. 클릭 이슈 재발 방지 팁5. 자주 묻는 질문1. 보이는데 클릭이 안 되는 현상 이해버튼이나 링크가 화면에 분명히 보이는데 클릭이 안 되면, 많은 분이 JavaScript 이벤트 문제부터 의심합니다. 물론 이벤트 바인딩 문제일 수도 있지만, 실제로는 CSS 레이어 충돌이나 disabled 상태처럼 UI 구조 문제인 경우가 매우 흔합니다. 즉 "보인다"와 "클릭 가능하다"는 완전히 다른 조건입니다.클릭 가능하려면 요소 위를 다른 레이어가 막고 있지 않아야 하고, 포인터 이벤트가 허용되어야 하며, 요소가 비활성 상태가 아니어야 합니다. 그래서 이 문제는 레이아웃, 속성 상태, 이벤트 연결을 동시에 확인..

목차1. 입력값이 비어 보이는 대표 상황2. 먼저 확인할 핵심 체크리스트3. 단계별 디버깅 순서4. 입력 처리 안정화 습관5. 자주 묻는 질문1. 입력값이 비어 보이는 대표 상황폼 기능을 만들 때 "분명 입력했는데 값이 안 들어온다"는 문제는 정말 자주 발생합니다. 콘솔로 찍으면 빈 문자열이 나오거나, 이전 값이 남아 있거나, 아예 undefined가 나오는 식입니다. 이때 대부분은 입력창 자체 문제가 아니라 이벤트 시점이나 요소 선택 방식에서 실수가 생긴 경우가 많습니다.핵심은 어떤 요소에서, 어떤 시점에, 어떤 속성으로 값을 읽는지를 명확히 분리해 보는 것입니다. 입력창 값을 다룰 때는 value, textContent, innerText를 혼동하기 쉽고, submit 이벤트 기본 동작 때문에 값 확..

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

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

목차1. CSS가 안 먹는 이유부터 이해하기2. 가장 먼저 확인할 체크포인트3. 문제를 빠르게 찾는 점검 순서4. 재발 방지를 위한 스타일링 습관5. 자주 묻는 질문1. CSS가 안 먹는 이유부터 이해하기분명히 CSS를 작성했는데 화면에서 아무 변화가 없으면, 처음에는 코드 전체가 잘못된 것처럼 느껴집니다. 하지만 실제로는 대부분 단순한 연결 문제입니다. 대표적으로 파일 경로가 틀렸거나, 선택자가 대상 요소와 일치하지 않거나, 더 강한 우선순위 스타일에 덮여서 적용이 보이지 않는 경우가 많습니다.핵심은 "CSS를 썼다"가 아니라 "브라우저가 그 CSS를 읽고, 해당 요소에, 이길 수 있는 우선순위로 적용했는가"를 확인하는 것입니다. 이 세 단계 중 하나라도 빠지면 작성한 스타일은 존재해도 화면에는 나타나..

목차1. null 에러가 뜻하는 것2. 가장 흔한 발생 원인3. 단계별 해결 방법4. 예방을 위한 코딩 습관5. 자주 묻는 질문1. null 에러가 뜻하는 것Cannot read properties of null 에러는 JavaScript에서 가장 자주 만나는 오류 중 하나입니다. 뜻은 단순합니다. 존재하지 않는 값(null)에서 무언가를 읽으려 했다는 의미입니다. 예를 들어 null.textContent, null.value, null.addEventListener 같은 코드가 실행되면 바로 이 에러가 발생합니다.중요한 포인트는 "문법이 틀렸다"보다 "대상이 아직 없거나 잘못 찾았다"에 가깝다는 점입니다. 즉, 코드 구조 전체를 뜯어고칠 필요 없이 요소를 찾는 시점과 선택자를 점검하면 대부분 해결됩니다..

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

목차1. 버튼 클릭이 먹통처럼 보이는 이유2. 가장 먼저 보는 체크리스트3. 실전 점검 순서와 수정 예시4. 다시 같은 문제를 막는 습관5. 자주 묻는 질문1. 버튼 클릭이 먹통처럼 보이는 이유버튼을 눌렀는데 화면이 조용하면 많은 분이 "코드가 전부 망가졌나?"부터 떠올립니다. 하지만 실제로는 작은 연결 문제인 경우가 더 많습니다. 특히 초보 단계에서는 버튼 자체가 고장 난 것이 아니라, 버튼과 JavaScript 함수가 서로 만나지 못한 상태가 대부분입니다.예를 들어 클릭 이벤트를 등록했는데 스크립트 파일 경로가 틀렸거나, HTML에서 사용한 id 이름과 JavaScript에서 찾는 id가 다르면 아무 일도 일어나지 않습니다. 또 콘솔에 에러가 떠도 화면에서는 조용해 보이기 때문에 문제를 늦게 발견하기..