TIL - 모듈화(Modularization) 장점 및 주의사항

오늘은 영화 검색 사이트 개인과제를 제출하는 날이었고 제출을 한 다음 어제 생각해 본 영화 극장에 화면에 영화 이미지를 슬라이드 하는 것을 구현해 봤는데 제가 상상했던 이미지랑 다르게 엄청 별로여서 그 아이디어는 지우고 튜터 개발자님의 개인과제 강의를 보니 JS코드를 script.js로 한 개의 파일로만 만들어야 한다고 생각했는데 JS 파일을 모듈화 하셔서 코드를 작성하시는 것을 보고 내가 만들었던 JS 코드를 모듈화 하기로 했습니다.

 

모듈화 (Modularization)

---

모듈화 - 프로그램이나 소프트웨어를 구성하는 요소들을 기능 또는 관련성에 따라 분리하여 독립적으로 관리하는 프로그래밍 기법입니다.

 

모듈화의 장점

1. 구조화된 코드: 모듈화를 통해 코드를 기능 또는 관련성에 따라 분리함으로써 코드의 구조화를 쉽게 할 수 있습니다. 이는 코드의 가독성을 향상하고 유지보수를 용이하게 합니다.
2. 재사용성: 각 모듈은 독립적으로 개발되고 관리되므로 필요한 기능을 다른 프로젝트에서 쉽게 재사용할 수 있습니다. 이는 개발 시간을 단축시키고 효율성을 높입니다.
3. 협업: 모듈화 된 코드는 다른 개발자들과의 협업을 용이하게 합니다. 각 모듈은 독립적으로 작업할 수 있으며, 이를 통해 개발 과정에서의 충돌을 최소화할 수 있습니다.
4. 디버깅 및 테스트 용이성: 모듈화 된 코드는 작은 단위로 분리되어 있기 때문에 디버깅과 테스트가 쉽습니다. 각 모듈은 독립적으로 테스트되고 디버깅될 수 있으므로 오류를 신속하게 해결할 수 있습니다.

 

모듈화를 할 때 주의 사항

1. 모듈 간 의존성 관리: 모듈화 된 코드에서는 각 모듈 간의 의존성을 잘 관리해야 합니다. 의존성이 복잡하거나 순환적인 경우 코드의 이해와 유지보수가 어려워질 수 있습니다.
2. 너무 작은 모듈화 피하기: 너무 작은 단위로 모듈화 하는 것은 오히려 코드의 복잡성을 높일 수 있습니다. 적절한 수준의 모듈화를 유지하고 모듈의 기능을 명확히 정의하는 것이 중요합니다.
3. 일관성 유지: 모듈화 된 코드에서는 일관된 스타일과 패턴을 유지해야 합니다. 일관성 있는 코딩 스타일은 코드의 가독성을 향상하고 협업을 용이하게 합니다.
4. 모듈화의 목적 이해하기: 모듈화를 할 때에는 코드의 목적과 기능을 명확히 이해하고 분석하는 것이 중요합니다. 모듈 간의 관련성을 고려하여 적절한 분리와 구조화를 수행해야 합니다.

 

 

모듈화를 해본 소감

---

script.js파일을 main.js, modal.js, movieCard.js, search.js, slider.js, utility.js로 7개의 파일을 만들어 봤는데 지금 생각해 보니 각 모듈 간의 의존성이 높고 순환적인 것 같았습니다.

모듈 간 의존성이 높을 때의 해결 방법은 의존성 주입(DI, Dependency Injection)으로 각 모듈이 필요로 하는 의존성을 외부에서 주입받는 방식을 말합니다.

코드를 모듈화 하면서 한 가지 문제가 생겼었는데 모달창의 리스트 중 첫 번째 li 항목이 사라지는 문제였습니다.
모듈화의 장점이 디버깅 및 테스트 용이성이 좋다고 하는데 모달창과 관련된 항목들을 다 주석 처리해도 문제가 사라지지 않아서 꽤 곤란했었습니다. 문제는 슬라이드 이동 함수에서 li를 처음엔 target을 안 잡고 document로 함수를 작성했었습니다.

const moveSlide = (targetEl, direction) => {
    const target = document.querySelector(targetEl);    
    const firstLi = target.querySelector(`li`);    
		...
}

 

코드를 모듈화 하는 과정에서 영화 데이터 베이스에서 데이터를 async를 이용해서 비동기로 받아와서 슬라이드가 구현되기 전에 모달창 li 자식이 선택되고 이동되었던 문제였죠. moveSlide 함수에 문제가 있다는 것을 찾기까지 시간이 오래 걸렸던 이유는 모달창과 슬라이드의 연관성이 없었기에 생각을 빠르게 하지 못했었던 것 같고 결국 찾아서 처음 슬라이드를 움직이는 함수를 실행하기 전에  await키워드를 영화 데이터 생성에 줘서 해결하면서 document에서  target으로 바꿔서 슬라이드의 li만 선택되게 바꿨습니다.

 

결국 모듈화를 하는 과정에서 비동기로 데이터를 받아오면서 성능과 코드 가독성이 올라갔고 함수의 구조도 통일성을 높일뿐더러 코드 냄새가 나는 함수 또한 냄새를 제거해서 꽤 큰 성과가 있던 과정이었다고 생각이 됐었고 모듈화의 중요성에 대해 몸으로 체감한 것 같습니다.