몇 년 전에 레거시 프론트엔드 코드를 새롭게 작성하는 프로젝트에서 비슷한 내용으로 팀원들과 함께 장단점을 논의한 적이 있었는데요. 결론부터 말씀드리자면 저희 같은 경우 __test__ 디렉토리에 몰

몇 년 전에 레거시 프론트엔드 코드를 새롭게 작성하는 프로젝트에서 비슷한 내용으로 팀원들과 함께 장단점을 논의한 적이 있었는데요. 결론부터 말씀드리자면 저희 같은 경우 __test__ 디렉토리에 몰아뒀던 테스트 파일을 컴포넌트 파일와 같은 디렉토리에 넣기로 결정했었습니다. 다음과 같은 이유로 프로젝트를 진행하면서 개발자들이 그 결정에 대해서 만족했던 것으로 기억하고 있습니다. 첫째로 컴포넌트 파일과 테스트 파일이 같은 디렉토리에 두었더니 전반적인 유지보수가 쉬워졌습니다. 왜냐하면 대게 컴포넌트를 수정할 때 테스트 파일도 함께 수정하게 되고 Storybook을 사용하게 되면 스토리 파일도 수정해야되고, index.tsx와 같은 파일도 함께 수정해야되는데 이 관련된 파일이 모두 한 곳에서 관리할 수 있으니까요. 두번째로 개발자 경험이 좋아지는 효과가 있었습니다. __test__ 디렉토리를 사용할 때는 컴포넌트 파일과 테스트 파일이 너무 멀리 떨어져있어서 개발자들이 코드 탐색기에서 정신없이 위 아래로 스크롤링을 해야했습니다. 그런데 테스트 파일이 컴포넌트 파일 바로 옆에 있으니 그런 불편함이 자연스럽게 사라졌습니다. 뿐만 아니라 GitHub에서 코드 리뷰할 때도 컴포넌트 파일을 바로 전이나 다음에 테스트 파일이 나와서 매우 편해졌습니다. 셋째로 테스트 코드 내에 임포트(import) 구문이 깔끔해졌습니다. __test__ 디렉토리에 테스트 파일을 모아두었을 때는 `../../../src/cmponents/XxxComponet`와 같은 복잡한 상대 경로 때문에 테스트 파일에서 컴포넌트 불러오는 코드가 매우 지저분해지고 정확히 어떤 디렉토리인지 한 눈에 파악하기가 어려웠습니다. 하지만 테스트 파일을 컴포넌트 옆에 두었더니 `./`와 같은 간단한 상대 경로 때문에 테스트 코드가 깔끔해졌습니다. 마지막으로 이 것은 의도치 않았던 부분인데... 뜻밖에 코드 커버리지의 상승 효과가 있었습니다. 테스트 파일을 컴포넌트랑 같은 디렉토리에 뒀더니 테스트가 작성되지 않은 컴포넌트가 훨씬 눈에 잘 띄어서 팀 내 모범적인 개발자들은 자진해서 부족한 테스트를 작성하기 시작했습니다. 그 이후로 저는 개인 프로젝트에서도 프론트앤드 백앤드 가리지 않고 가급적 테스트 코드는 테스트하려는 코드와 최대한 가까이 두려고 하고 있습니다. 답변이 도움이 되었으면 좋겠습니다.