1.웹앱의 구성요소
도큐먼트가 html, css, js 로 구성되어있는건 웹개발을 조금만 건드려봤어도 모두가 아는 부분일것이다.
그런데 클라이언트(웹)에서 렌더링을 해서 html을 만드는
csr(클라이언트 사이드 렌더링) <-> ssr(서버 사이드 렌더링)
두가지 렌더링 요소가 존재한다.
또한 JS를 사용해서 그래픽 시스템(canvus)과 api로 페이지를 구성할 수 있기 때문에, 삼요소를 js를 통해 모두 구성하고 만들 수 있는 것이다.
2.프론트엔드 모던 JS 개발환경
프론트 개발을 하다보면 생각보다 개발 환경이 복잡하다고 느낄때가 많은데, 생각보다 타당한 이유들이 있다.
일단 웹앱의 규모가 너무 커졌기 때문이다.
파일이 수십, 수백, 수천개가 하나의 앱을 위해서 동작하다보니, 간단한 지원을 위해 만들어진 JS가 더 많은 방식으로 사용하게 되다보니 더 복잡하게 될 수 밖에 없는것이다.
또한 모듈의 호출 방식이 파일이 파일을 불러오게 되면서 파일이 늘어나면 무리가 가서, 스크립트 태그만으로 진행해질 수 없다보니 새로운 문법들을(import) 사용해서 부담을 줄이려고 했다.
3.브라우저 호환성
그런데 이 방식을 다 사용할 수 없는 이유가 생기는데, 브라우저가 호환이 안되는 경우가 너무나도 많기 때문에 es2015를 지원하는게 기준인데, 생각보다 그게 힘들기 때문이다.
4.새로운 최신 문법 사용하기
또다른 이유도 있다. 새로운 최신 문법이 나오고있는데, 좋은 최신 문법들이 나오면 이것들을 쓰면 개발을 더 재밌고, 효과적이고, 생산성이 더 높은 코드들이 나올 수 있다.그런데 브라우저 호환성에 발목이 잡히면서 이런 문법들을 사용할 수 없게 되는것들이 문제를 유발한다.
5.엔지니어링(nodeJS) - 번들러
이것들을 모두 해결해서 사용하기 위해서 nodejs와 툴들을 개발해서 사용한다.
결국 이 모두를 번들러가 개발되었다.
이것은 시작되는 시작되는 자바 스크립트 파일을 하나 결정하면 다른 파일들을 구문 해석해서 간단하게 임포트해서 하나의 파일로 만들어준다.
EX:)webpack이라는 번들러가 있는데, 번들러의 컨셉은 여러개의 자바스크립트 파일을 하나로 취합하자 였기 때문에,
1.다른 필요없는 주석이나 이미지 파일의 경로를 찾아서 이미지를 최적화해서 용량을 줄여서 파일의 크기를 줄여나간다.
2.코드를 알아보기 힘들게 하는것이며
3.만약 쓰고싶은 문법이 더 높은 버전에 있거나 JS파일이 아닌 파일을 컴퓨터가 읽기 편하게 JS 파일을 변환해내는것이다 (트랜스파일링)
