본문 바로가기

전체 글108

디버깅은 에러 찾기가 아니라 '원인 좁히기'다 목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개디버깅을 "에러 메시지 찾기" 정도로 생각하면 자주 막히게 됩니다. 실제 디버깅의 핵심은 정답을 한 번에 맞히는 것이 아니라 원인 범위를 점점 좁혀가는 과정입니다. 디버깅은 추측이 아니라 가설과 검증의 반복입니다.2. 핵심 내용증상과 원인을 분리해서 본다화면이 안 보이는 것은 증상이고, 잘못된 상태값/렌더 조건/비동기 타이밍 문제는 원인입니다. 증상만 보고 바로 수정하면 임시방편이 되기 쉽습니다.재현 가능한 최소 조건을 만든다문제가 언제 발생하는지 입력값, 클릭 순서, 환경을 고정해 "재현 시나리오"를 만드는 것이 우선입니다. 재현이 되면 원인 추적 속도가 급격히 빨라집니다.로그와 브레이크포인트로 범위를 좁힌다con.. 2026. 5. 10.
[바이브코딩 HTML 웹앱 20일 챌린지] 12일차 - 매일 반복할 습관 체크리스트 만들기 12일차에서는 매일 반복하는 습관을 체크할 수 있는 목록을 만듭니다. 할 일은 그날그날 바뀌지만, 습관은 반복된다는 점이 다르기 때문에 고정 항목 + 체크 상태 저장 흐름을 따로 구현하는 것이 핵심입니다.오늘 기능이 들어가면 하루 관리 웹앱이 단기 작업 관리에서 생활 루틴 관리까지 확장됩니다. 초보자도 체크박스 이벤트와 localStorage 저장 패턴을 재사용해 안정적으로 구현할 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘은 물 마시기, 스트레칭, 책 읽기 같은 습관 항목을 고정 리스트로 표시하고, 항목별 체크 상태를 저장/복원하는 기.. 2026. 5. 10.
협업 Git 흐름: 브랜치, 커밋, PR을 실무처럼 운영하는 법 목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개개인 프로젝트에서는 Git을 백업 도구처럼 쓰더라도 큰 문제가 없을 수 있지만, 협업 환경에서는 Git 흐름 자체가 생산성을 결정합니다. 같은 기능을 개발해도 브랜치 전략과 커밋 품질, PR 작성 방식이 정리되어 있으면 리뷰 속도가 빨라지고 배포 사고가 줄어듭니다. 반대로 기준 없이 작업하면 충돌 해결에 시간이 소모되고, 변경 의도를 파악하느라 팀 전체가 지칩니다. 그래서 Git 실무의 핵심은 명령어 암기가 아니라 팀이 이해하기 쉬운 변경 기록을 만드는 습관입니다.특히 주니어 개발자가 자주 겪는 어려움은 “코드는 다 했는데 PR이 어렵다”는 지점입니다. 이는 실력이 부족해서가 아니라 흐름이 정리되지 않았기 때문인 경.. 2026. 5. 10.
API를 쉽게 말하면? 웹앱이 데이터를 주고받는 방식 목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개웹앱에서 날씨, 지도, 결제, 로그인 같은 기능이 동작하는 이유는 대부분 API 덕분입니다. API는 어렵게 보면 복잡하지만, 핵심은 단순합니다. API는 서로 다른 프로그램이 약속된 방식으로 데이터를 주고받는 창구입니다.2. 핵심 내용요청(Request)과 응답(Response)클라이언트(브라우저/앱)는 필요한 데이터를 API 서버에 "요청"하고, 서버는 결과를 "응답"으로 돌려줍니다. 이 흐름이 웹 데이터 통신의 기본입니다.HTTP 메서드로 의도를 전달GET은 조회, POST는 생성, PUT/PATCH는 수정, DELETE는 삭제에 주로 사용합니다. 메서드는 "무엇을 하고 싶은지"를 서버에 명확히 알리는 신호입니.. 2026. 5. 10.
[바이브코딩 HTML 웹앱 20일 챌린지] 11일차 - 집중 시간을 알려주는 타이머 만들기 11일차에서는 집중 타이머를 추가해 생산성 기능을 강화합니다. 할 일과 메모를 정리하는 것에서 한 걸음 더 나아가, 집중 시간을 직접 측정하고 관리하는 흐름을 웹앱에 붙이는 단계입니다.오늘은 25분 타이머 기준으로 시작, 정지, 초기화 버튼을 구현합니다. 초보자에게도 적합한 `setInterval` 패턴을 익히면 이후 카운트다운/알림 기능 확장도 쉬워집니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘의 핵심 기능은 카운트다운 타이머입니다. 25:00에서 시작해 1초마다 시간이 줄어들고, 00:00이 되면 자동으로 멈추게 만듭니다. 버튼은 `시작`, .. 2026. 5. 9.
리팩터링 타이밍: “지금 고칠까, 나중에 고칠까” 판단법 목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개개발을 하다 보면 거의 매일 같은 고민을 하게 됩니다. “코드는 돌아가는데 구조가 아쉽다. 지금 고칠까, 그냥 기능부터 끝낼까?” 이 판단을 잘못하면 두 가지 문제가 생깁니다. 무조건 지금 고치면 일정이 밀리고, 무조건 미루면 기술 부채가 쌓여 이후 작업이 느려집니다. 그래서 리팩터링은 감으로 결정하는 일이 아니라, 비용과 리스크를 비교해 타이밍을 고르는 의사결정으로 접근해야 합니다.특히 실무에서는 완벽한 코드보다 안정적인 전달이 중요하기 때문에, “좋아 보이는 개선”과 “당장 필요한 개선”을 구분하는 기준이 필요합니다. 이 기준이 없으면 팀원마다 판단이 달라 리뷰가 길어지고, 결국 중요한 이슈보다 취향 논쟁에 시간.. 2026. 5. 9.

티스토리툴바