AI랑 같이하는 코딩

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

20일차에서는 지금까지 만든 웹앱을 전체 점검하고, 다음 확장 방향을 정리합니다. 기능을 하나씩 쌓아온 흐름을 돌아보며 무엇이 완성됐고 무엇을 개선할지를 명확히 하는 마무리 단계입니다.이번 회차의 핵심은 새로운 기능 추가보다 회고와 우선순위 설정입니다. 완성본을 점검하고 다음 프로젝트로 자연스럽게 이어질 수 있는 기준을 만드는 데 집중합니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 이전 단계 돌아보기1. 오늘 만들 기능 소개오늘 목표는 20일 동안 구현한 기능을 체크리스트로 검토하는 것입니다. 할 일, 메모, 기분 기록, 타이머, 습관 체크, 진행률, 다크모드, 검색/필터, 반응형, 배포까지 핵..

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

목차1. 왜 그대로 붙이면 문제가 생길까2. 프로젝트 맞춤 요청의 핵심 정보3. 실전 변환 프롬프트 작성법4. 안정적으로 반영하는 적용 순서5. 자주 묻는 질문1. 왜 그대로 붙이면 문제가 생길까AI가 만들어준 코드는 출발점으로 훌륭하지만, 내 프로젝트에 바로 붙이면 충돌이 생기기 쉽습니다. 이유는 간단합니다. AI가 생성한 코드는 보통 일반적인 구조를 기준으로 하고, 실제 프로젝트는 팀 규칙, 폴더 구조, 상태 관리 방식, 공통 컴포넌트 정책이 이미 정해져 있기 때문입니다. 겉보기에는 동작해도 장기적으로 유지보수 비용이 커질 수 있습니다.예를 들어 동일한 기능이라도 우리 팀은 `fetch` 대신 전역 API 클라이언트를 쓰고, 에러 처리는 공통 핸들러를 거쳐야 할 수 있습니다. 그런데 이런 규칙을 전달..