패스트캠퍼스 챌린지 3일차

모던 자바스크립트와 개발 환경

 

Node.js와 NPM의 등장으로 인해 FE의 개발환경은 급변했다.

 

프론트엔드 개발 환경이 복잡할 수 밖에 없는 이유 ? :웹 앱의 규모가 굉장히 커지고 복잡해짐

 

JavaScript의 디자인은 단순히 HTML을 조작하기 위한 언어였지만 ES2015부터 모듈 스펙을 지원하기 시작한다. 모듈 스펙은 파일과 파일간의 어떤 기능을 사용하기 위해 어떤 파일의 기능을 해당 파일로 불러들여서 사용하는 것을 말한다. (import export)

 

모듈 스펙을 사용하는 경우는 예를들어 JavaScript를 사용하기 위해선 HTML 파일의 <script> 태그를 사용하여 로딩하는데 js파일의 갯수가 대량이 되어버리면 스크립트 태그를 그 만큼 작성해야 한다. 때문에 운영하는데도 불편하고 또 문제점이 생길수 있다.

 

그렇기 때문에 HTML의 <script>가 아닌 import, export를 사용하면 되는데 이러한 문법은 현실적으로 2가지 문제가 있다.

 

첫 번째는 브라우저 호환성 문제이다. 사용자들이 어떤 브라우저의 어떤 버전을 사용할지 모르기 때문에 브라우저의 호환성을 최대한 넓게 가져가야 한다. 두 번째는 최신 문법을 사용하려 하는 경향이다. 프로그래밍 언어의 문법은 차차 발전하고 이전 문법의 좋지 않은 관습이나 불편한 것들은 사라지거나 변경되어 더 좋은 문법으로 나타나는데 이 또한 브라우저 호환성 문제가 더욱 생기기 마련이다.

 

따라서 이런 문제들을 해결하기 위해 엔지니어링이 시도가 된다. 엔지니어링이란 예를 들어 node.js를 보면 브라우저 뿐만 아니라 일반 데스크탑, PC 서버 등에서 JavaScript를 실행할 수 있도록 해주는 환경이다. JavaScript 개발자들이 JavaScript로 다양한 툴들을 만들고 그것들을 배포하기 시작했다. 그 배포된 툴들은 npm을 통해서 그것을 사용하고자 하는 프로젝트에 불러다가 쓰기 수월해졌다.

 

번들러는 시작되는 자바스크립트 파일을 하나 지정하면 그 파일을 통해 다른 자바스크립트 파일을 불러와서 그렇게 불러진 자바스크립트 파일을 하나로 만들어 주는 것을 의미한다. 브라우저는 그렇게 하나로 만들어진 파일만을 읽어와서 수 많은 파일들을 실행한 결과를 가져올 수 있다.

 

결국 여러개의 파일을 하나로 만들어주는 번들러라는 프로그램이 나왔고 그 번들링이라는 작업으로 인해 모듈을 부르는 스펙을 못 쓰던 상황에서 모듈 스펙을 쓸 수 있게 되었고 파일을 하나로 관리할 수 있어 HTML을 운영하기도 현실적으로 쉬워졌다. 

 

또한, 번들러는 자바스크립트 파일 뿐만 아니라 번들링을 하는 과정에 있어 파일 용량을 위한 주석제거나 이미지 파일의 용량이 일정 이상이되면 압축을 통한 이미지 최적화, 소스 파일의 어글리파이 작업등을 수행할 수 있다.

 

이러한 기능들을 추가하다보니 번들러는 점점 커지고 웹 앱의 규모가 커짐으로 이어졌다.

 

트랜스파일링이란 내가 작업한 프로그래밍 언어를 브라우저가 이해할 수 있는 자바스크립트 언어로 변환 하는것. 개발자는 JavaScript의 최신 버전으로 개발하고 그러면서 발생할 수 있는 브라우저의 호환성 문제는 트랜스 파일러를 통해 해결할 수 있다. (ex. Babel, TypeScript)

 

 

 

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential