AI랑 같이하는 코딩

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

목차1. 왜 단계별 요청 구조가 필요한가2. 실전에서 쓰는 5단계 프롬프트 프레임3. 단계별 요청 문장 템플릿4. 실패를 줄이는 운영 원칙5. 자주 묻는 질문1. 왜 단계별 요청 구조가 필요한가AI에게 웹앱을 요청할 때 많은 사람이 처음부터 “로그인, 게시판, 검색, 관리자 페이지까지 다 만들어줘”라고 말합니다. 시작은 빠를 수 있지만 결과는 대개 불안정합니다. 기능이 섞인 상태로 생성되면 어디가 잘못됐는지 찾기 어렵고, 한 부분을 수정하면 다른 부분이 깨지는 일이 반복됩니다. 그래서 필요한 것이 단계별 요청 구조입니다.단계별 요청은 단순히 일을 쪼개는 방식이 아닙니다. 기능별 책임을 분리하고, 각 단계마다 검증 기준을 두어 리스크를 낮추는 방식입니다. 특히 초보자에게는 “무엇을 먼저 확인해야 하는지”가..

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

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

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

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

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

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