[ Troubleshooting🛠️ ] eslint 규칙 변경으로 인한 빌드 에러

1.  문제 발생❓

 작업 브랜치 feat/remove-candid-section 에서 기능 개발을 마친 후, 테스트 브랜치인 stage에 가서 제 브랜치를 pull 받고, Vercel에 테스트 배포를 진행하였습니다. 그런데 예상치 못한 빌드 에러가 발생했습니다.

 

 

 

2.  원인 추론 🔎

처음에는 타입 오류인 줄 알고 코드를 살펴보았는데, 오류 메세지를 자세히 보니 전부 주석에 관련된 것이었습니다:

빌드 에러

Error: Expected space or tab after '//' in comment. spaced-comment

 

 

1. 브랜치를 분기한 시점 🌱

• feat/remove-candid-section 브랜치를 main에서 ESLint 변경이 적용되기 전에 분기함.
• 이 시점에서는 .eslintrc에 space-comment 룰이 없었음.

2. 그 후 다른 팀원분이 spaced-comment 룰을 main에 머지함

• 다른 팀원이 chore/spaced-comment 브랜치에서 ESLint 규칙을 변경하고, 이걸 main에 머지함.
• 즉, 메인 브랜치의 상태가 업데이트 됨.

3. 이후에 git fetch origin을 통해 원격 브랜치들 최신 상태를 받아옴

• git fetch origin은 내 로컬 브랜치에 직접 반영은 안 하고 원격 브랜치 커밋만 가져오는 명령어
• 즉, origin/main 이나 origin/stage가 최신 상태로 업데이트된 것 뿐이고, feat/remove-candid-section은 그래도임.

4. 그 후 stage 브랜치로 checkout 하고, 거기서 git pull origin stage 해줌.

• 이제 그럼 stage 브랜치는 이미 "spaced-comment" 룰이 반영되어있는 상태.
• 반영되어 있는 상태에서 git pull origin feat/remove-candid-section 방식으로 내 작업을 테스트 브랜치에 반영함.

5. Vercel 테스트 배포시 빌드 오류 ❌

• stage 브랜치는 이미 ESLint 룰이 적용된 상태이지만, 그 자체로는 오류가 없었음
• 그런데 제 브랜치는 규칙이 바뀌기 전 코드라, 주석에 공백없이 "//이런식"으로 써도 아무 문제가 없었고, 그 둘을 합쳤을 때, 린트가 돌아가면서 갑자기 오류가 발생한 것 같음.
• 즉, 코드 문제가 아니라, 규칙이 새로생겨서 충돌이 발생한 것

6. git log 확인 ✅

git log .eslintrc

 

commit 1ecdcd6abc82169c753905814dcbe10fa40b441d
Author: name <email@email>
Date:   Tue Apr 8 12:14:49 2025 +0900

    chore: 공백 없이 주석 작성 시 eslint error

 

• 이런식으로 나와서, 룰이 추가된 커밋을 정확히 추적했습니다.
• 이 커밋 덕분에 ESLint 규칙이 중간에 수정되었음을 알 수 있었습니다.

 

 

 

3.  해결 과정 📋

이 문제를 해결하려면 새로 생긴 ESLint 규칙에 맞춰 코드를 수정해야합니다. 명령어를 통해 프로젝트 전체에 규칙으로 정할 수 있습니다.

yarn eslint --fix .

 

이 명령어로 줙 공백 문제를 한 번에 해결한 뒤 다시 테스트 배포했더니, 정상적으로 빌드가 되었습니다.🌳🌳🌳

 

 

 

 

4.  결론 ❤‍🔥

• EsLint 같은 린트 설정이 팀 프로젝트에 어떤 영향을 줄 수 잇는데 실감한 경험
• Git 브랜치 간 병합 흐름과 fetch, pull, merge 차이를 정확히 이해하는 것이중요
• eslint --fix .는 정말 강력한 도구!
• 설정 변경은 팀원들과 공유하는 습관이 중요함