프론트엔트 개발환경이 복잡해진 이유

하초 2021. 9. 8. 12:56

모던 자바스크립트

es2015부터 모던 자바스크립트라고 볼 수 있다.

프론트 개발환경이 복잡해진 이유

개발환경이 급격하게 복잡해지고 달라진건 모던 자바스크립트뿐만 아니라 node.js와 npm의 등장, 개발툴의 변화 때문이다.

웹앱의 규모가 굉장히 커지고 복잡해지면서 수십 혹은 수만개의 파일들을 하나의 어플리케이션으로 만들게 되었다.

그러나 초기의 자바스크립트는 브라우저 안에서 html을 조작하기 위한 간단한 용도로 사용되기 위해 디자인 되어 있었기 때문에, 자바스크립트를 이용해서 웹앱을 만들기 위해 다양한 기능들이 준비되어 있지 않았다. 큰 규모의 웹앱을 만들기 위해서 수십개의 파일들로 하나의 어플리케이션을 만들기 위해 필요한 스펙은 모듈이라는 것인데, 자바스크립트는 이것을 es2015부터 지원하기 시작했다.

* 모듈 스펙이란 파일과 파일간의 특정 기능을 사용하기 위해서 불러들여서 사용하는 기능이다(import / export)

자바스크립트의 모듈은 자바스크립트 코드 내에서 자바스크립트를 불러오는 것.

자바스크립트 2015버전부터 모듈들을 비롯하여 웹앱을 만들기에 적합한, 또는 더 사용하기 쉬운 새로운 기능들이 나오기 시작하지만 이런 기능들이 모든 브라우저 호환성을 갖추고 있지 않았다. 유저가 사용하는 브라우저에 따라서, 브라우저 버전에 따라서, 기기에 따라서 최신 문법을 지양해야하는 경우가 생기기 시작했다. 정리하자면 아래와 같은 문제가 발생한 것이다.

1. 프론트엔드 개발자 입장에서는 브라우저 호환성을 반드시 고려해야한다.

2. 최신 문법을 사용하고 싶은데 브라우저 호환성이 문제가 된다.

이런 문제들을 해결하기 위해 엔지니어링이 시도된다.

node.js가 등장하면서 브라우저 외에서 자바스크립트를 사용할 수 있게 되어 개발자들은 이를 이용해서 다양한 툴들을 만들어냈고 이를 npm을 통해서 배포했다. 그 중에서는 번들러라는 소프트웨어가 있는데, 이는 자바스크립트 안에서 다른 자바스크립트를 불러오는 것을 해석해서 하나의 파일로 만들어주는 역할을 한다.

브라우저에서 로딩하기 전에, 즉 자바스크립트 파일을 불러들이기 전에 미리 모든 자바스크립트 파일을 하나의 파일로 만들어준다.

그럼 html에서는 번들러로 만들어진 자바스크립트 파일 하나만 불러들이면 된다.

번들러가 나옴으로 인해서 모듈이라는 스펙을 못 쓰던 상황에서도 문제가 없게 되었고, 많은 소스를 하나로 합쳐지는 게 가능해지며 html을 운영하기도 수월해졌다.

js 파일을 하나의 파일로 만들어내던 번들러가 시간이 지나며 js 뿐만 아니라 css , img 압축, 어글리파이, 트랜스파일링 등 아웃풋을 만들어내기 전 처리하는 일이 많아지며 이를 사용하는 세팅방법이라던가 사용법이 복잡해졌다. 이는 곧 프론트엔드 개발환경에 큰 영향을 미치게 되었다.

어글리파이 : 소스코드를 다른 사람이 알아보기 힘들게 만드는 것

트랜스파일링 : 컴퓨터는 대부분의 개발자가 사용하는 언어를 이해하지 못하는데, 우리가 개발하고 있는 개발언어를 컴퓨터가 이해할 수 있는 언어로 바꾸는 과정이다. 이와 유사하게 브라우저가 이해할 수 있는 언어는 자바스크립트 뿐인데, 개발자가 다른 개발언어로 개발하거나 자바스크립트 최신문법을 사용한 결과물을 자바스크립트로 변환해주는 것도 포함한다. 트렌스파일러로는 대표적으로 바벨이 존재한다.