2024 07 18 TIL : 모듈화의 즐거움을 배우다

 

미니 프로젝트를 진행하면서 하나의 index.html에 모든 css, 모든 JavaScript 를 넣어놓다보니 코드가 너무 길어지고 관리하기도 힘들었다. 그래서 이걸 기능별로 파일을 따로 만들어서 관리하고싶었는데, 찾다보니 모듈화라는 걸 알게됐다. 

 

모듈 (Module) : 프로그램 내에서 특정 기능을 수행하는 독립적인 단위. 보통 클래스 하나 + 특정한 목적을 가지는 복수의 함수로 구성된 라이브러리 하나 정도로 구성한다. , 다른 모듈과의 의존성을 최소화하여 독립적으로 작성된다. 모듈은 함수, 클래스, 변수 등을 포함할 수 있다. 

모듈화  (Modularization) : 프로그램을 여러 개의 모듈로 분리하여 구성하는 과정. 소프트웨어 개발의 중요한 설계 원칙 중 하나로, 복잡한 문제를 더 작은 문제로 나누어 관리하고 해결할 수 있게 한다. 

 

 

그러고나서 자바스크립트 파일을 만들고, 그 안에 스크립트를 작성한 뒤, <script type = "module" src = " (스크립트 파일) " ></script> 을 해주기만 하면 된다는 사실을 알았다. 

 

모듈화의 즐거움

 

사실 유지보수의 용이성이나 재사용성보단 코드가 길어서 싫었다는 말도 안 되는 이유였지만, 막상 모듈화를 하고 보니 정말 관리하기도 편하고, 편집기에서 칸을 나누어 배치하고 서로 코드를 비교하면서 작성하기도 너무 편했다. 

 

그리고 이렇게 모듈화를 아무 생각없이 하다보니 나중에 코드리뷰에서 지적받은 사실이 있는데, 어떤 JS파일을 처음 작성할 때, 일단 내가 무슨 기능이 필요한지 모르니 전에 export 해놨던 모든 함수를 다 import 한 뒤 작성했다. 그런데 이게 그냥 '함수' 단어 하나만 받아오면 알아서 그 폴더에 가서 기능을 받아오는 게 아니라, 컴파일 시에, 해당 함수와 관련된 모든 코드가 같이 들어온다는 사실을 알았다. 말 그대로 불필요한 코드를 불러오게 되어, 파일 크기도 늘어나고, 초기 로딩 시간도 느려지게 만들어서 전혀 좋지 않다는 것이다.

 

이처럼 아직 내가 모르는 모듈화를 할 때 주의해야 할 점을 앞으로도 많이 배워나갈 거 같은데, 이를 잘 배워서 효율적인 코드를 작성할 수 있게 노력해야겠다.