[IT] Tree Shaking ? webPack ?

---

이번에 20년 가까이 프론트앤드 개발자님과 같이 밥먹으러 걸어가면서 이런저런 이야기를 하는데

나보고 Tree Shaking 을 아냐고 물어봤다. 너무 생소한 단어인데다가 처음 들어봐서 "잘 모르겠다. 처음들어본다." 라고 했는데

이게 생각보다 엄청 오래된 기술이더라 ... 근데 내가 어떤 언어로, 어떤 툴에서 개발을 하던 웹 개발을 하는 이상 알아둬야 한다는 것 같다.

어쨋든 먼저 webPack 을 살펴보면

webPack은 현대 JavaScript 애플리케이션을 위한 모듈 번들러 ( Module Bundler )이다.

주로 웹에서 사용되는 여러 자원들(JavaScript, 스타일, 이미지, 폰트 등)을 최적화하고
모듈 형태로 조합하여 하나 또는 몇 개의 번들 파일로 만드는 역할

로더 ( Loader ) : Webpack 자체는 JavaScript와 JSON만 이해하지만
로더를 사용하면 다른 유형의 파일들(예: CSS, SCSS, 이미지, TypeScript 등)을 JavaScript 모듈로 변환하여 처리할 수 있다.
플러그인 ( Plugins ) : 추가적인 작업들(예: HTML 파일 생성, CSS 추출, 코드 압축 등)을 수행하기 위해 플러그인을 활용한다.
개발 서버 (Dev Server ): 개발용 서버를 제공하여 실시간 리로딩 기능을 포함한 여러 개발 툴을 지원한다.
코드 분할 ( Code Splitting ) : 애플리케이션의 여러 부분을 별도의 번들로 분리하여, 필요할 때 로딩하는 기능을 지원한다.
Tree Shaking : 불필요한 코드를 제거하여 최종 번들의 크기를 줄일 수 있다.
환경 설정 : webpack.config.js를 통해 상세한 설정을 제공할 수 있다.
Entry: Webpack은 애플리케이션의 '진입점(entry point)'부터 시작하여 필요한 모듈을 로딩하고 하나의 번들을 생성합니다.
Output : 번들된 결과물이 저장될 위치와 파일 이름 등을 지정한다.
Loaders : 어떤 유형의 파일들을 JavaScript 모듈로 변환할 것인지를 정의
Plugins : 번들링 프로세스에서 추가적인 작업을 수행한다.

개발을 좀 해봤거나, 공부를 조금이라도 해봤으면 webpack 은 들어봤을 법 하다. 근데 뜻을 잘 아는사람은 잘 없지 않을 까 싶다.

나도 애초에 잘 몰랐고, SI 업체에서 일 할 당시에도 이런걸 설명해주는 사수는 없었다. 기초강의를 들을때도 설명해주는 곳은 없었고.

TO-DO 만드는 수준의 웹을 만든다면 이런건 몰라도 아무문제 없다고 하는데

프로덕션 레벨의 웹을 만들기 시작한다면 자신이 뭘 쓰고 있는지 정도는 알아둬야 한다. 그래야 나처럼 욕먹지 않는다.

그럼 이제 Tree Shaking 을 더 정확하게 이해하자면

"Tree shaking"은 불필요한 코드를 제거하여 최종 번들의 크기를 줄이는 과정을 의미한다.
주로 자바스크립트에서 ES6 모듈 문법을 사용할 때 이 기능을 효과적으로 활용할 수 있습니다.

ES6 모듈 문법의 활용: ES6 모듈은 정적이다. 최상단에 위치하며, 런타임 중에 동적으로 변경되거나 해석되지 않는다는 것을 의미
따라서, 모듈 번들러는 어떤 모듈과 함수가 실제로 사용되고 있는지 사전에 정확히 판단할 수 있다.
불필요한 코드 제거 : 번들링 과정에서 식별된 불필요한 코드는 최종 출력 파일에서 제거됩니다. 이를 통해 파일 크기를 최소화하고 성능을 향상시킬 수 있다.

추가적으로, 들은 꿀팁인데, Class 보다는 Function 으로 하는걸 강력추천 해주셨다.

물론 장단점이 있겠지만, 최적화를 위해 함수를 사용하라고 해 주셨다. 그 이유를 살펴보면

클래스의 메서드는 클래스의 인스턴스화 없이는 일반적으로 호출되지 않는다.
때문에, 모듈 번들러는 클래스의 특정 메서드가 사용되지 않더라도 전체 클래스를 번들에 포함시키는 경향이 있다.

반면, 개별 함수를 ES6 모듈로 export하고 import하면, 사용하지 않는 함수는 Tree Shaking을 통해 번들에서 제거된다.

더 찾아봐도 물론 상황에 맞도록 응집도나, 결합도 때문에 적절히를 말해주지만, 어디나가 항상 적당히를 말하는 것같아 보인다.

성능 최적화, 유저가 불편함을 느끼지 않도록 하는게 최우선이라고 생각하기 때문에 함수화 하면서 객체지향 프로그래밍을 할 수 있도록

노력해야겠다. ( 내가 요즘 제일 많이 듣는 말이 "객체지향 프로그래밍을 해야한다." 인데 .. 노이로제 올 것 같다. )