리팩터링12 초보자의 투두앱 코드를 한 단계 개선해보기: 코드 리뷰 Before & After 목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개투두앱은 초보자가 JavaScript를 익힐 때 가장 많이 만드는 프로젝트입니다. 입력값 추가, 목록 렌더링, 완료 체크, 삭제, 저장까지 기본 기능이 골고루 들어 있어 연습에 좋기 때문입니다. 하지만 실제 코드를 보면 기능은 동작하는데 구조가 빠르게 복잡해지는 경우가 많습니다. 예를 들어 전역 변수에 상태를 몰아두고, 이벤트 핸들러 안에서 직접 DOM을 계속 수정하며, localStorage 접근도 여기저기 섞여 있으면 작은 기능 추가도 어렵습니다. 결국 "고치면 다른 기능이 깨지는" 경험을 자주 하게 됩니다.이번 글은 초보자의 투두앱 코드를 한 단계 개선하는 기준을 Before & After 관점으로 소개합니다... 2026. 5. 20. 바이브코딩을 위한 프롬프트 템플릿 5가지 목차1. 템플릿이 필요한 이유2. 바이브코딩용 핵심 템플릿 5가지3. 템플릿별 활용 시나리오4. 내 작업 흐름에 맞게 커스터마이징하는 법5. 자주 묻는 질문1. 템플릿이 필요한 이유바이브코딩의 장점은 빠른 실행이지만, 단점은 결과 편차가 크다는 점입니다. 같은 기능을 요청해도 어떤 날은 잘 나오고 어떤 날은 엉뚱하게 나오는 이유는 프롬프트가 매번 달라지기 때문입니다. 즉, 실력 문제가 아니라 입력의 일관성 문제입니다. 이때 가장 효과적인 해결책이 프롬프트 템플릿입니다.템플릿은 창의성을 제한하는 도구가 아니라, 반복 실수를 줄이는 안전장치입니다. 목표, 제약, 출력 형식을 고정해 두면 AI가 추측할 영역이 줄어들고 결과가 안정됩니다. 특히 입문자일수록 “무엇을 써야 할지 모르는 공백”이 큰데, 템플릿은 ա.. 2026. 5. 20. AI가 만든 코드를 그대로 쓰기 전에 점검할 것들: 초보 코드 리뷰 Before & After 목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개요즘은 AI에게 코드 생성 요청을 하면 빠르게 결과가 나옵니다. 초보 개발자에게는 특히 큰 도움이 됩니다. 막힌 부분을 바로 뚫어주고, 새로운 문법 예시도 쉽게 확인할 수 있기 때문입니다. 하지만 여기서 가장 흔한 실수가 있습니다. "동작하니까 바로 사용"하는 습관입니다. AI가 만든 코드는 출발점으로 훌륭하지만, 프로젝트 문맥과 보안 요구사항, 팀 규칙까지 자동으로 완벽하게 맞춰주지는 못합니다. 그래서 검토 없이 붙여 넣으면 나중에 더 큰 비용을 치르게 됩니다.이번 글은 AI 생성 코드를 실무에 안전하게 적용하기 위한 점검 기준을 Before & After 관점으로 정리합니다. 핵심은 AI를 의심하자는 뜻이 아니라.. 2026. 5. 19. 조건문이 너무 길어졌을 때 읽기 좋게 바꾸는 법: 초보 코드 리뷰 Before & After 목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개초보 코드 리뷰를 하다 보면 가장 자주 만나는 장면이 긴 조건문입니다. `if` 안에 `if`가 들어가고, `else if`가 계속 이어지며, 논리연산자까지 섞이면 코드가 동작하더라도 읽기가 매우 어려워집니다. 특히 로그인, 결제, 권한 체크 같은 분기 많은 기능에서 이런 문제가 자주 나타납니다. 문제는 단순히 코드가 길다는 것이 아니라, 어떤 케이스가 먼저 처리되고 어떤 케이스가 누락됐는지 파악하기 어렵다는 점입니다. 이 상태에서는 수정할 때마다 예상치 못한 회귀 버그가 생기기 쉽습니다.이번 글에서는 길어진 조건문을 읽기 좋게 바꾸는 기본 기준을 Before & After 관점으로 정리합니다. 핵심은 분기 자체를 .. 2026. 5. 18. localStorage 저장 코드를 함수로 분리해보기: 초보 코드 리뷰 Before & After 목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개초보 프로젝트에서 localStorage는 매우 자주 사용됩니다. 다크모드 상태 저장, 최근 검색어 보관, 임시 폼 데이터 유지 같은 기능을 빠르게 만들 수 있기 때문입니다. 문제는 이 저장/조회 코드가 파일 곳곳에 흩어지기 시작할 때 발생합니다. 어떤 곳에서는 `JSON.stringify`를 쓰고, 다른 곳에서는 문자열 그대로 넣고, 키 이름도 제각각이면 버그가 생겨도 원인을 찾기 어렵습니다. 특히 파싱 오류나 null 처리 누락은 화면이 조용히 깨지는 원인이 됩니다.이번 글에서는 localStorage 코드를 함수로 분리해 안정성과 가독성을 높이는 방법을 Before & After 관점으로 정리합니다. 핵심은 단.. 2026. 5. 17. 이벤트 처리 코드가 지저분해졌을 때 정리하는 법: 초보 코드 리뷰 Before & After 목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개프론트엔드 초보 코드에서 가장 빨리 복잡해지는 부분은 이벤트 처리입니다. 버튼 클릭, 입력 변경, 스크롤, 모달 열기/닫기 같은 동작을 기능별로 급하게 붙이다 보면 `addEventListener`가 파일 곳곳에 흩어지고, 비슷한 콜백 로직이 반복되며, 상태 변경이 여러 군데서 동시에 일어납니다. 화면은 돌아가지만 "왜 이 버튼이 여기서도 반응하지?" 같은 예측 불가능한 버그가 생기기 쉽습니다. 특히 이벤트 바인딩 해제 없이 재렌더링이 반복되면 중복 호출까지 발생합니다.이번 글은 지저분해진 이벤트 코드를 정리하는 기본 기준을 Before & After 관점으로 설명합니다. 핵심은 고급 패턴보다 흐름 통제입니다. 이벤.. 2026. 5. 16. 이전 1 2 다음
