Javascript & TypeScript Essential - 패스트캠퍼스 챌린지 3일차

#패스트캠퍼스_환급_챌린지 https://bit.ly/3FVdhDa #3일차

오늘은 모던 Javascript(이하 자바스크립트)와 개발환경 강의 학습노트를 기록하고자 한다.

 

웹앱의 규모가 커지면서 페이지에서 사용하는 자바스크립트 파일의 갯수도 함께 늘어나게 된다.

자바스크립트가 100개, 1000개 늘어나게 되면 페이지에 <script>태그를 통해 삽입하는데 한계가 발생하게 된다.

그래서 이를 해결하기 위해 모듈이라는 기능이 모던자바스크립트에 개발되게 되었다.

 

자바스크립트 모듈을 지원하는 브라우저는 아래 이미지에서 확인할 수 있다.

import browser supprot

export browser support

출처) https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules

JavaScript modules - JavaScript | MDN

 

여러개의 자바스크립트파일을 불러와서(import) 사용하기 위해서 번들러를 사용한다.

번들러는 시작하는 자바스크립트 파일 하는 지정하면 해당 파일에서 다른 자바스크립트 파일을 불러오고 불러온 자바스크립트 코드를 하나의 파일로 만들어 준다.

그리고 번들러를 통해서 모듈을 사용할 수 없는 브라우저에서 한개의 통합된 파일을 불러와서 사용하기 때문에 모듈러를 지원하는 브라우저와 동일한 서비스를 제공할 수 있게 된다.

가장 대표적인 번들러 프로그램에는 webpack(https://webpack.js.org/)이 있다.

그리고 또하나 필요한 개념이 트랜스파일러이다.

트랜스 파일러는 Java나 C처럼 인간이 이해하는 개발코드(언어)를 컴퓨터가 이해할 수 있는 언어로 바꿔주는 컴파일과 유사하다고 볼 수 있다. 다시말해 브라우저가 이해할 수 있는 것은 자바스크립트밖에 없는데 자바스크립트가 아닌 내가 원하는 프로그래밍 언어로 프로그래밍을 하고 그리고 이를 변환기를 통해 자바스크립트로 만들게 되면 문제없이 브라우저가 이해하고 실행할 수 있다. 이런 변환기를 트랜스 파일러라고 부른다.

가장 대표적인 트랜스파일러 프로그램에는 Babel(https://babeljs.io/)이 있다.

 

여기까지 모던 자바스크립트 개발환경에 대해서 정리를 마친다.