화요일! 과제 제출이 열렸고, 룰루랄라 PR 작성 후 지원 플랫폼에서도 제출을 마쳤다. 그리고 예제 테스트를 실행했더니 아니 글쎄 예기치 못한 오류로 인해 테스트가 실패했다고 뜨는 게 아닌가! 매우 위협적인 빨간 글씨로!
가끔 서버 상황에 따라 이런 경우가 있기도 해서, 여러 번 새로고침을 해 가며 다시 제출해보았지만 문제는 그대로였다. 시간이 지난 후에도 문제가 계속되고, 디스코드 서버의 다른 지원자들이 서버 문제를 호소하지도 않는 걸 보니 내가 코드를 개판으로 짠 게 원인이군!이라는 생각이 들었다.
원인 파악하기
- 상황 : node로 직접 앱을 실행해봐도, npm test로 테스트를 실행해봐도 문제가 없는데, 지원 플랫폼에서만 실패한다.
eslint & prettier 때문인가?
- 컨벤션 적용을 위해 eslint와 prettier를 설치해두었지만, 미션 제한 사항에 package.json 파일을 수정하지 말 것이라 명시되어있어서 커밋은 하지 않은 상태였다.
- 프리코스 과제 제출 문서에서는 해당 오류가 빌드 실패시 발생한다고 설명되어 있어서, 빌드에서 문제가 발생한다면 의존성이 원인이 아닐까 싶었다.
- 그래서 package.json과 prettier, eslint 설정 파일들을 모조리 커밋해보았지만 해결되지 않았다!
try catch로 에러를 안 잡아내서 그러나?
- 이건 원인이 아닐 거라고 생각했다. 지난 주차 야구 게임에서도 동일하게 try catch 구조 없이, validate함수가 에러를 throw하게만 처리했는데 문제가 없었기 때문이다.
- 하지만 validateUtils라는 단순 객체의 메서드를 사용하는 기존 방식에서 InputValidator라는 별도의 클래스를 활용한 구현으로 수정했기 때문에 뭔가 달라질 수도 있겠다 싶었다.
- 그리고 '우테코' '예기치 못한 오류'로 서칭을 해 봤더니, try catch에 대해 언급하는 포스트가 있어서 한 번 해봐야 겠다고 생각했다.
- 그래서 InputView의 read 메서드에 try catch를 적용해서, 에러를 캐치하면 다시 throw하도록 수정했지만 해결되지 않았다!
(늘 그렇듯) 원인은 생각보다 간단해
- 결론부터 말하자면 파일명 대소문자 문제였다 😅
- 처음에 구현할 때, inputView와 outputView는 단순 객체로 설계했다. 그 후 의존성 주입에 대해 고민하면서 둘 다 class로 바꿨다.
- 그러면서 파일명도 InputView.js, OutputView.js로 수정했다. (git mv 명령어 사용)
- 그러나 App 등의 모듈에서는 view를 불러올 때 import 경로에서 inputView.js 와 outputView.js를 호출하고 있었다! 없는 파일을 불러오려고 하니 오류가 난 것이다!
- view를 불러오는 경로를 실제 파일명(대문자)에 맞게 수정해주고 다시 커밋&푸시하니, 테스트가 통과되는 걸 확인할 수 있었다!!!
🤔 잠깐, 그러면 로컬에선 왜 되는데?
- 윈도우와 일부 macOS 파일 시스템은 대소문자를 구분하지 않지만, 대부분의 Linux 시스템(많은 웹 서버와 CI/CD 시스템 포함)은 대소문자를 구분한다.
- 로컬 시스템에서는 파일을 불러올 때 대소문자를 구분하지 않는 것으로 추정된다. 아래처럼 아무렇게나 찌끄려놔도 잘만 불러온다. (테스트도 통과되고, 앱도 잘 구동되는 걸 확인함)
- 예상으로는, 우테코 프리코스 과제 제출 플랫폼 서버에서는 대소문자를 구분하기 때문에 outputView.js 파일을 찾지 못해서 빌드에 실패한 것 같다. (아닐 수도 있음!) 뜯어볼 수가 없으니 정확히 알 수는 없는 문제지만😅
교훈
얼타지 말자!!
그리고 멘탈 관리 잘 하는 것도 중요하겠다. 지금이야 남은 시간이 여유로우니 코후비면서 찾아보다가 빠르게 해결했지만, 최종 테스트에서 비슷한 경우가 생기면 허둥지둥하다가 시간을 엄청 낭비해버릴 수도 있겠다는 생각이 들었다.
프론트엔드 개발자