프론트엔드 개발환경 왜 이렇게 복잡할까? javscript 환경 이해하기

최근 프론트엔드 개발 공부를 시작한 사람들이 많습니다.

 

구하는 곳은 많은 것에 비해 인력난이기 때문일 수도 있지만 코로나19로 인해 많은 곳이 인력난이라 변명이 되기에는 부족함이 있죠.

더울 때 시원한 곳에서 일하고,
추울 때 따뜻한 곳에서 일할 수 있는
'개발'이라는 것에 매력을 느끼는 것 같아요.

또한, 디지털노마드를 꿈꾸며 워라밸과 자신의 라이프를 유연하게 사려는 시대이기 때문이라고도 할 수 있습니다.

오늘은 프론트엔드 개발을 할 때 가장 기초가 되는 부분을 포스팅해봅니다.

javascript 코드에 대한 부분은 구글링르 조금만 해도 나오는 반면 '왜' 이렇게 복잡한 세팅을 해야 하는지 모르는 사람들이 많을 거라 예상합니다.

html에 간단하게 javascript 파일을 불러와서 적용하는 간단한 방법 외 번들러를 사용해서 수만, 수십만, 수백만의 코드를 통합한다면 다양한 장점이 있겠죠.

---

모던 Javascript : ES2015버전 ~
대체적으로 동의하는 부분

 

이전 버전들은 모던 Javascript가 아니다.

복잡한 개발환경의 원인

웹앱의 규모가 커지고 복잡해졌다.

 

1. 수만 ~ 수백만 줄의 코드 규모
2. 수십 ~ 수만개의 파일로 분할된 파일

모듈 스펙

파일과 파일간 특정 파일의 기능을 사용하기 위해 불러들이는 기능

export
import

html 안에는 script가 포함되어야 한다.(기존)
javascript - javascript 간의 통신(모던 javascript 이후)

 

코드를 사용하기 현실적인 문제가 되는 2가지

1. 브라우저 호환성(크로스 브라우징)

브라우저 호환 확인 사이트(can i use)

Can I use... Support tables for HTML5, CSS3, etc

모듈 스펙을 지원하는 브라우저

JavaScript modules - JavaScript | MDN

2. import, export 외 최신 문법들의 사용(생산성 확대)

• 새로 추가된 편리하고 좋은 문법들이 계속 개발되고 업데이트된다.
• 브라우저 호환성..

문제 해결

nodejs & bunddler 등장!

번들러(Bunddler)

시작되는 javascript를 통해 불러오는 모든 javascript의 구문 해석을 해서 하나의 파일로 만들어 준다. 
이 하나의 파일을 script로 불러와서 사용하면 된다.

실무에서 가장 많이 사용하는 번들러

한번쯤 들어봤을 'webpack'

webpack

번들러의 역할

• javscript 외 css, 이미지, 템플릿 역시 하나로 통합해준다.
• 쓸데없는 코드(주석 등)를 정리해 준다.(보안, 용량, 비용적 측면)
• 이미지 파일의 경로를 통해 이미지 최적화 기능을 포함
• 중요한 코드를 알아보기 힘들게 암호화(uglify)

외 수 많은 일을 하게 되고 제공하면서 세팅을 하면서 점점 복잡해지고 어려워졌다.

 

가장 중요한 역할

트랜스 파일러
(Babel)

• 인간이 이해할 수 있는 프로그래밍 언어를 컴퓨터가 이해할 수 있는 언어로 변경
• javascript는 브라우저에서 이해하는 유일한 언어이다.

내가 원하는 언어로 만들어서 javascript로 변환한다면?

 

기계어 = 1개
개발자 = N개 

javascript의 최신 기술을 사용하여 트랜스 파일러로 호환이 가능한 언어로 변환해주는 변환기를 사용해줄 수 있다.

최신 버전 -> 하위 버전

Typescript

• javascript가 아니다.
• 당연히 브라우저에서 사용 x
• 트랜스 파일러를 이용해서 원하는 js 버전으로 바꾼다.