본문 바로가기

전체 글108

localStorage 저장 코드를 함수로 분리해보기: 초보 코드 리뷰 Before & After 목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개초보 프로젝트에서 localStorage는 매우 자주 사용됩니다. 다크모드 상태 저장, 최근 검색어 보관, 임시 폼 데이터 유지 같은 기능을 빠르게 만들 수 있기 때문입니다. 문제는 이 저장/조회 코드가 파일 곳곳에 흩어지기 시작할 때 발생합니다. 어떤 곳에서는 `JSON.stringify`를 쓰고, 다른 곳에서는 문자열 그대로 넣고, 키 이름도 제각각이면 버그가 생겨도 원인을 찾기 어렵습니다. 특히 파싱 오류나 null 처리 누락은 화면이 조용히 깨지는 원인이 됩니다.이번 글에서는 localStorage 코드를 함수로 분리해 안정성과 가독성을 높이는 방법을 Before & After 관점으로 정리합니다. 핵심은 단.. 2026. 5. 17.
[바이브코딩 HTML 웹앱 20일 챌린지] 19일차 - GitHub Pages로 웹앱 배포하기 19일차에서는 완성한 웹앱을 GitHub Pages로 배포합니다. 이제 로컬에서만 보던 프로젝트를 링크로 공유할 수 있게 되며, "만드는 단계"에서 "보여주는 단계"로 전환되는 중요한 시점입니다.초보자에게 배포는 어렵게 느껴질 수 있지만, 저장소 생성 → 파일 업로드 → Pages 설정 순서만 지키면 안정적으로 완료할 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 GitHub 저장소를 만들고 웹앱 파일을 업로드한 뒤, GitHub Pages를 활성화해 실제 접속 가능한 배포 URL을 얻는 것입니다. 이 링크를 통해 다른 사람도 내 .. 2026. 5. 17.
입력창 값이 제대로 가져와지지 않을 때 점검할 것 목차1. 입력값이 비어 보이는 대표 상황2. 먼저 확인할 핵심 체크리스트3. 단계별 디버깅 순서4. 입력 처리 안정화 습관5. 자주 묻는 질문1. 입력값이 비어 보이는 대표 상황폼 기능을 만들 때 "분명 입력했는데 값이 안 들어온다"는 문제는 정말 자주 발생합니다. 콘솔로 찍으면 빈 문자열이 나오거나, 이전 값이 남아 있거나, 아예 undefined가 나오는 식입니다. 이때 대부분은 입력창 자체 문제가 아니라 이벤트 시점이나 요소 선택 방식에서 실수가 생긴 경우가 많습니다.핵심은 어떤 요소에서, 어떤 시점에, 어떤 속성으로 값을 읽는지를 명확히 분리해 보는 것입니다. 입력창 값을 다룰 때는 value, textContent, innerText를 혼동하기 쉽고, submit 이벤트 기본 동작 때문에 값 확.. 2026. 5. 17.
원하는 디자인이 안 나올 때 프롬프트를 수정하는 방법 목차1. 왜 결과가 마음에 들지 않을까2. 디자인 프롬프트 수정의 핵심 원칙3. 실패한 요청을 개선하는 실전 예시4. 반복 수정 시간을 줄이는 체크리스트5. 자주 묻는 질문1. 왜 결과가 마음에 들지 않을까AI에게 디자인을 요청했는데 결과가 밋밋하거나 의도와 다르게 나오는 이유는 대개 비슷합니다. “깔끔하게 만들어줘”, “예쁘게 바꿔줘”처럼 추상적인 표현만 있고, 구체적인 기준이 없기 때문입니다. AI는 이런 요청을 받으면 평균적인 안전한 결과를 선택하는 경향이 있습니다. 즉, 실패의 원인은 모델 성능 부족이 아니라 요구 조건의 모호함인 경우가 많습니다.특히 웹 디자인에서는 레이아웃, 타이포그래피, 컬러, 컴포넌트 밀도, 여백 리듬 같은 요소가 동시에 작동합니다. 그런데 요청에서 이 축들을 분리하지 않으.. 2026. 5. 17.
이벤트 처리 코드가 지저분해졌을 때 정리하는 법: 초보 코드 리뷰 Before & After 목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개프론트엔드 초보 코드에서 가장 빨리 복잡해지는 부분은 이벤트 처리입니다. 버튼 클릭, 입력 변경, 스크롤, 모달 열기/닫기 같은 동작을 기능별로 급하게 붙이다 보면 `addEventListener`가 파일 곳곳에 흩어지고, 비슷한 콜백 로직이 반복되며, 상태 변경이 여러 군데서 동시에 일어납니다. 화면은 돌아가지만 "왜 이 버튼이 여기서도 반응하지?" 같은 예측 불가능한 버그가 생기기 쉽습니다. 특히 이벤트 바인딩 해제 없이 재렌더링이 반복되면 중복 호출까지 발생합니다.이번 글은 지저분해진 이벤트 코드를 정리하는 기본 기준을 Before & After 관점으로 설명합니다. 핵심은 고급 패턴보다 흐름 통제입니다. 이벤.. 2026. 5. 16.
[바이브코딩 HTML 웹앱 20일 챌린지] 18일차 - 내가 만든 앱에 이름 붙이기 18일차에서는 지금까지 만든 웹앱에 이름과 소개 문구를 붙입니다. 기능 완성만큼 중요한 것이 정체성 정리이고, 앱의 톤과 목적을 한 문장으로 설명하는 작업이 브랜딩의 시작입니다.오늘은 AI와 함께 이름 후보를 뽑고, 헤더 문구와 버튼 텍스트를 다듬어 "내가 만든 앱"이라는 느낌을 더 분명하게 만드는 데 집중합니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 앱 이름 선정과 UI 문구 정리입니다. 예를 들어 앱 타이틀, 서브 설명, 빈 목록 안내 문구, 버튼 라벨을 통일된 톤으로 바꾸면 같은 기능이라도 훨씬 완성도 있게 보입니다.2. AI에게 .. 2026. 5. 16.

티스토리툴바