AI랑 같이하는 코딩

1. 주제 소개

JavaScript를 처음 배우면 기능을 빠르게 완성하는 데 집중하게 됩니다. 이때 가장 흔한 패턴이 바로 복사해서 붙여넣기, 즉 복붙입니다. 버튼마다 거의 같은 이벤트 코드를 여러 번 작성하고, 유효성 검사도 입력칸 개수만큼 반복하고, API 호출 후 처리도 페이지마다 비슷하게 붙여넣다 보면 당장은 편해 보여도 금방 코드가 무거워집니다. 특히 수정 요청이 들어왔을 때 문제가 커집니다. 예를 들어 같은 로직이 7곳에 흩어져 있으면 1곳만 고치고 끝날 수 없고, 실수로 1~2곳을 빼먹기 쉽습니다. 결과적으로 버그가 다시 생기고, "분명 고쳤는데 왜 또 안 되지?"라는 상황이 반복됩니다.

이 글은 초보 코드 리뷰 관점에서 복붙 코드를 줄이는 가장 기본적이고 실전적인 기준을 다룹니다. 핵심은 거창한 리팩터링이 아니라, 반복되는 의도를 먼저 묶고, 이름을 붙이고, 한 곳에서 바꾸게 만드는 것입니다. 이 원칙만 지켜도 코드 길이는 짧아지고, 읽기 쉬워지며, 유지보수 시간이 크게 줄어듭니다.

2. 핵심 내용

복붙을 줄이는 첫 단계는 "같은 코드"가 아니라 "같은 목적"을 찾는 것입니다. 문장이 조금 달라도 하는 일이 같다면 공통화 대상입니다. 예를 들어 이메일, 비밀번호, 닉네임 검증 코드는 메시지가 다를 뿐 "값이 비었는지 확인하고 경고를 보여준다"는 목적은 같습니다. 이런 경우 함수 하나로 묶을 수 있습니다. 또 클릭 이벤트 등록, 목록 렌더링, 에러 표시처럼 반복 빈도가 높은 구간은 별도 함수로 빼두면 재사용성이 높아집니다.

둘째, 상수와 설정 객체를 활용해야 합니다. 초보 코드에서 자주 보이는 문제는 문자열과 숫자가 여기저기 하드코딩되어 있다는 점입니다. 같은 셀렉터, 같은 API 경로, 같은 메시지를 복붙해 두면 정책이 바뀔 때 수정 범위가 폭발합니다. 이 값을 상수 또는 객체로 모아두면 변경 지점이 한 곳으로 줄어듭니다. 셋째, 반복문과 배열 메서드를 적극적으로 사용하는 습관이 필요합니다. 같은 동작을 항목별로 처리한다면 `forEach`, `map`, `reduce` 같은 메서드가 중복을 구조적으로 제거해 줍니다.

마지막으로 "한 번에 완벽하게" 고치려 하지 않는 것이 중요합니다. 복붙 코드가 많은 프로젝트일수록 작은 단위로 나눠서 바꾸는 편이 안전합니다. 먼저 중복 2~3개를 함수로 뽑아 테스트하고, 동작이 유지되면 다음 묶음을 정리하세요. 이렇게 하면 기능 회귀를 줄이면서도 점진적으로 코드 품질을 높일 수 있습니다.

3. 적용 방법

실전에서는 아래 순서로 진행하면 부담이 적습니다. 먼저 파일을 보면서 똑같이 반복되는 블록에 표시를 합니다. 다음으로 블록마다 "입력값, 처리, 출력"을 적어 공통 부분을 확인합니다. 이후 함수로 추출하고, 하드코딩 값을 인자로 넘기거나 상수로 분리합니다. 마지막으로 원래 동작과 동일한지 클릭 테스트와 간단한 콘솔 로그로 확인합니다. 이 과정은 규모가 작은 페이지부터 시작하는 것이 좋습니다.

아래는 간단한 Before/After 관점입니다. Before는 버튼마다 `addEventListener` 안에서 거의 같은 유효성 검사와 알림 코드를 반복합니다. After는 `validateRequired`, `bindSubmit` 같은 함수로 분리해 동작을 조합합니다. 이때 파일 길이보다 더 중요한 지표는 "정책 변경 시 수정 위치"입니다. After 구조에서는 메시지 정책이나 검증 기준이 바뀌어도 중앙 함수만 조정하면 되므로 안정적으로 대응할 수 있습니다.

4. 정리

복붙을 줄인다는 것은 코드를 멋있게 꾸미는 작업이 아니라, 실수를 줄이고 팀의 시간을 지키는 작업입니다. 특히 초보 단계에서는 알고리즘 난이도보다 유지보수성이 더 크게 체감됩니다. 같은 코드를 여러 번 붙여넣는 습관에서 벗어나 공통 로직에 이름을 붙이고 함수로 모으는 연습을 해보세요. 작은 성공이 쌓이면 코드 리뷰에서도 "읽기 쉽다", "수정 포인트가 명확하다"는 피드백을 받게 됩니다. 결국 좋은 코드는 처음부터 완벽한 코드가 아니라, 바꾸기 쉬운 코드입니다.

5. 자주 묻는 질문