Next.js와 Babel, Webpack
D+43
잊지 말자. 나는 Next.js와 R3F를 연결하기 위해 Next.js를 공부하는 것이다. 맨땅에 헤딩하며 공부하는 나의 이야기를 또다시 적어본다.
Babel이란?
게임 사이버펑크 같은 로고를 가진 이 친구는 바벨이라고 한다. 바벨 하면 떠오르는 단어가 있다. 바벨탑이다. 바벨탑의 역사를 생각하면 바벨의 의미도 자연스럽게 연결시킬 수 있다. 바벨은 인류가 문명발전을 통해 하늘에 닿고자 하는 노력을 뜻한다. 그리고 이것을 좋게 보지 않았던 존재가 이를 방해하기로 한다. 인간이 이것을 가능하게 한 이유를 언어로 보고 하나로 되어있던 언어를 여러 가지로 흩어버렸다 한다. 그리고 그 장소를 바벨이라 이름 지었고, 그 의미는 "뒤섞다"라고 한다.
그래 그럼 이 뒤섞다가 웹개발이랑 무슨 상관인가. 자바스크립문서를 좀 찾아보면 ES2015 등등하는 다른 버전들이 존재하는 것을 볼 수 있다. 마치 Python이 2,3 등등 발전하는 것처럼 자바스크립트도 발전해 왔던 것이다. 여기서부터는 내 상상과 사실이 섞여 있는 부분이니 감안해서 들어주길 바란다. 과거 브라우저들, 예를 들면 우리가 싫어하는 인터넷 익스플로러 등은 과거 자바스크립트를 지원하고, 크롬등 현대 브라우저는 최신 스크립트를 지원해 준다. 대부분 우리는 현대 자바스크립트로 코드를 작성한다. 그러면 원래대로라면 해당 코드를 과거 브라우저는 이해할 길이 없다. 하지만 언어를 "뒤섞어"주는 바벨을 통해 현대 버전의 자바스크립트로 써도 과거 브라우저에서도 같은 웹페이지를 확인할 수 있는 것이다.
그런 면에서 잡설을 해보자면 정부 웹페이지는 호환성이 떨어지는 방법으로 구성되었음을 추측해 볼 수 있다.
Webpack이란?
webpack은 모듈 번들러의 일종이다. 모듈번들러란 자바스크립트에 사용된 모듈을 하나로 묶어주는 기능을 뜻한다. 좀 더 넓은 의미에선 SCSS 등 자바스크립트로 쓰이지 않은 모듈까지도 웹에 사용하기 적합하도록 하나로 합쳐주는 기능을 뜻한다.
내가 아는 부분과 섞어서 이야기해보면 이렇다. 예전 자바스크립트 코드 국룰은 *. min.js라는 코드를 쓰는 것이었다. 이것이 무엇이냐. 본인이 쓴 자바스크립트 모듈을 경량화한 형태로 바꿔놓은 것이다. 그래서 실제로 열어보면 줄 바꿈 하나도 안되어있고 사실상 사람이 읽으려 하면 화가 나서 읽지 못하는 모듈코드를 뜻한다. 자료를 조금 참고해 보니, webpack도 그런 역할을 겸하고 있었다. 겸하고 있었다고 뜻하는 이유는 코드를 경량화하는 것 이상의 역할을 하고 있기 때문이다.
각 모듈은 각자 의존성을 가지고 있다. 그러니까 하나의 모듈이 갑자기 하늘에서 뿅 하고 생긴 게 아니라, 누군가 만든 모듈에 기반해서 새로운 것을 만들고 그런다는 뜻이다. 새로 만들어진 하나를 a, 다른 하나를 b라고 해보자. 그리고 a, b가 c라는 모듈기반으로 만들어져 있다고 가정하자. 근데 a는 c의 1.0 버전으로 만들어져 있고 b는 c의 1.5 버전으로 만들어져 있다고 하자. 이런 상호 의존성이 잘 해결되지 않으면 코드가 작동하지 않을 수 있다. 깊게 들어가지 않고 webpack을 이해하자면 webpack은 상호 의존성 문제를 해결해 주는 역할도 겸하고 있다.
끝맺으며
r3f와 next.js를 연결하고 코드 좀 바꿔보자는 게 일이 커졌다. 하지만 어쩌겠는가. 나는 매일 글을 쓰는 사람으로서 해나가는 수밖에
참고자료
[1]
“Babel · Babel.” Accessed: May 12, 2024. [Online]. Available: https://babeljs.io/
[2]
“Brief Explanation of Javascript Module Bundler,” DEV Community. Accessed: May 12, 2024. [Online]. Available: https://dev.to/mustafamilyas/brief-explanation-of-javascript-module-bundler-b1k
[3]
“JavaScript Versions.” Accessed: May 12, 2024. [Online]. Available: https://www.w3schools.com/js/js_versions.asp
[4]
Module Bundlers Explained... Webpack, Rollup, Parcel, and Snowpack, (2020). Accessed: May 12, 2024. [Online Video]. Available: https://www.youtube.com/watch?v=5IG4UmULyoA
[5]
“webpack,” webpack. Accessed: May 12, 2024. [Online]. Available: https://webpack.js.org/
[6]
everek123, “What is Babel?,” r/learnjavascript. Accessed: May 12, 2024. [Online]. Available: www.reddit.com/r/learnjavascript/comments/absifg/what_is_babel/
[7]
“바벨탑,” 위키백과, 우리 모두의 백과사전. Apr. 18, 2024. Accessed: May 12, 2024. [Online]. Available: https://ko.wikipedia.org/w/index.php?title=%EB%B0%94%EB%B2%A8%ED%83%91&oldid=36761055
