이번에 프리온보딩 챌린지를 진행하며 1주차에 관심사의 분리에 대한 세션을 진행하였다.
항상 프로젝트를 진행하며 많은시간을 폴더의 구조 고민에 할애하지만 막상 크게 마음에 드는 구조를 적용한적은 없었다.
이번 기회에 앞으로도 계속 사용할 수 있도록 적절한 구조를 정하자고 마음 먹었다.
가장 좋은 방법을 찾자?
구조를 잡기 위해 여러 오픈소스, 그리고 같이 챌린지에 참여한분들의 git ,구글링등등을 모두 뒤져보고 느낀것은 구조의 정답은 없다는 것이다.
코드가 작성된 시기에 따라 유행한 구조는 있는것 같지만, 그 사이에서도 어느정도 차이가 존재하였다.
이것저것 찾아보다 내린 결론은 여러 리소스를 참고하되, 내가 편한 구조를 잡는 것이었다.
우선 directory가 많아지고, depth가 깊어지고 등등의 문제를 고민하기보다 내가 알아보기 쉬운 구조를 잡고 그 이후 수정을 거쳤다.
최종적으로 잡은 구조는
아래 이미가 현재 사용중인 구조이다.
사실 해당 구조에도 확신은 없지만, 어떤것이 어디에 있는지 가장 정리가 잘되는 구조였다.
흔히 사용되는 구조와 유사하고 엄격히 지키기 보다 유연하게 사용하고자하였다.
비즈니스 로직의 분리은 신경쓰자
대부분의 구조는 상황에 따라(ex styles 폴더 분리여부?)유연하게 사용하려 하지만, 비즈니스 로직 분리는 꼭 일정한 규칙을 가져가려고 한다.
예전에는 props를 이용해 하위컴포넌트로 비즈니스 로직을 분리하고 처리하는것을 선호하였는데, 최근 커스텀 hook을 이용해 비즈니스로직들을 분리할 수 있다는것을 알게되어서 아주 잘 활용중이다.
다만 이렇게 특정 도메인에 국한된 커스텀훅을 lib 하위로 빼는것이 아니라 사용되는 component 하위에 위치시켜서 도메인 별로 로직파악이 용이하게 하였다.
import 는 절대경로
폴더를 정리 후, pages 컴포넌트내에서 하위 컴포넌트를 호출할때, 상대경로 사용시에는 import 코드가 지저분하다는 생각이 들었다.
또한 ../../로 연결되는 구조는 구조 파악에도 어려움이 있었다.
다행히도 typeScript로 간단히 해결할 수 있었다.
typeScript 설정으로 baseUrl을 src로 설정하고 path를 지정해, src 하위 폴더명으로 호출이 가능하게 되었다.
드라마틱한 변화는 아니지만 import가 많을 수록 빛을 발할것이라 믿는다...
