front end 개발환경

gyomni·2021년 7월 16일
0

Week I Learned

목록 보기
2/20
post-thumbnail

📝모던 JavaScript

통상적으로 ES2015 버전부터 모던 JavaScript.
ES2015부터 모듈스펙을 지원.

모듈스펙 : 파일과 파일 간에 특정 파일의 기능을 사용하기 위해 불러서 사용할 수 있는 기능
(JS에서는 import와 export라는 문법으로 지원)

모듈 스펙이 FE개발을 복잡하게 하는 원인으로 작용

📝import, export 그대로 사용하기 어려운 현실적 문제

1) 브라우저 호환성 이슈

웹개발자에겐 브라우저 호환성을 최대한 넓게 가져가는 것이 굉장히 중요.


링크 : MDN Web Docs

2) 최신 문법 사용 측면

JS는 ES2015부터 매년 새로운 최신 문법이 나오고 있고, 쓸만한 문법이 다수 있음.
최신 문법을 사용하고 싶으나, 브라우저 호환 문제가 심화됨.

그렇다면 JS의 새로운 기능이 나오는게 무슨 의미가 있는가 ?
이런 문제를 해결하기 위해 엔지니어링 시도 -> node.js
node.js : 브라우저에서 실행되는 것이 아니라, 데스크톱이나 노트북, PC, 서버에서 JS를 실행시키는 애플리케이션.

JS개발자들이 JS로 다양한 툴들을 만들기 시작.
npm으로 인하여 무수히 많은 툴들을 예전보다 다른 개발자에게 알리고 배포하기 쉬워짐.
(npm을 통해서 만든 애플리케이션을 등록해 놓으면 다른 개발자들이 검색해서 바로 npm설치하여 자신의 프로젝트에 불러다 쓰기 쉬움)

위와 같은 환경이 만들어진 상황에서 번들러라는 소프트웨어가 나옴.

번들러가 하는 일 : 여러개의 파일을 하나의 파일로 만드는 것트랜스 파일링

시작되는 JS파일 하나를 지정하면 모듈이라는 스펙을 이용하여 그 JS파일 안에서 다른 JS파일을 불러올 수 있게 됨. 이렇게 JS 파일안에서 다른 JS파일을 부르는 것들을 다 구문해석해서, 불려진 JS 코드를 하나의 파일로 만들어 주는 것.

브라우저에서 로딩하기 전에 (미리 브라우저에서 실제로 JS파일을 불러들이기 전에)
미리 몇 개가 됐던 많은 파일들을 하나로 만들어 놓으면
HTML 내에서는 만들어진 하나의 파일만 스크립트 태그에 연결해 놓으면 모든것이 해결.
=> 번들러라는 소프트웨어가 하나로 만들어 놓았기 때문에 가능한 일.

✨핵심적인 측면 - 번들러라는 도구로 번들링 방식으로 인해서 모듈을 부르는 스펙을 못 쓰던 상황을 쓸 수 있게 됨. 더불어 많은 소스 코드를 가지고 프로젝트를 만든다 하더라도, 하나로 합칠 방법이 있으니 HTML을 운영하기도 훨씬 더 현실적으로 가능.

번들러에는 여러가지 도구 존재함. 실무적으로 가장 많이 쓰이는 도구는 웹팩(Webpack)

링크텍스트
JS파일이 아닌 여러가지 유형의 파일도 입력으로 받고 여러 유형의 파일로 출력.

트랜스 파일링 : 개발자들이 작성한 코드는 컴퓨터가 이해하지 못하기에, 인간이 작성한 코드를 기계가 읽고 실행시킬 수 있는 기계어로 바꾸는 것.

내가 원하는 언어를 만들어서 그 언어를 JS로 변환시켜 브라우저에서 실행시킴.

개발자는 JS의 최신스텍으로 개발을 하고 싶지만 브라우저의 호환성 문제로 다 쓸 수 없는 문제를 트랜스 파일러를 통해 해결할 수 있음.
최신문법의 JS, 과거문법의 JS 는 둘다 JS지만, 브라우저 입장에서는 지원하지 않은 문법을 사용한 언어와 지원하는 언어로 다른 언어 일수 있음.
이를 가능하게 한 것이 Bable 이라는 트랜스 파일러

링크 : babel

typeScript도 JavaScript가 아니니까 브라우저에서 실행될 수 없음.
TypeScript가 제공하는 트랜스 파일러를 이용해서 바로 원하는 Javascript로 바꿀 수 있는, 즉 트랜스 파일링 동작이 일어남.
그래서 TypeScript도 트랜스 파일러 중의 한 종류.

profile
Front-end developer 👩‍💻✍

0개의 댓글