해당 글은 프론트엔드를 공부하면서 미리 알아두었더라면 좋았을 사실들을 간략하게 나열해보았습니다.
브라우저와 도메인의 동작
브라우저의 도메인을 입력하면 어떤 작업이 일어날까? 해당 동작은 상당히 세부적으로 파고들면 쓸 것이 많다. 그러나 간단히 말하면 모두 해당 도메인 등록된 서버로부터 각종 파일을 받아오는 것이다.
브라우저는 받아온 파일을 해석하여 화면에 띄우는 기능을 수행하는 것이다. 이 때 index.html이 날아오게 되고 각종 정적파일들과 js script가 날아오게 된다. 이들을 해석하여 화면에 띄워주는 것이다.
브라우저의 스크립트 해석
브라우저의 스크립트 해석기는 빌드라는 기능이 없다. 즉 스크립트를 일렬로 읽고 해석하기만 할 뿐이다. 이를 인터프리팅이라고 한다. 그래서 우리는 html파일을 작성하고 이를 브라우저에 띄우면 바로 구현된 화면을 볼 수 있는 것이다.
번들러
Js는 모듈 방식을 지향하여 다양한 모듈을 만들고 export/import하여 사용한다. 이를 위해선 모든 js파일을 html에 <script>를 통해 삽입해두어야 한다. 이러한 번거로운 과정을 생략하기 위해 번들링이라는 개념이 등장하였다. 번들링은 여러 js파일 및 각종 정적파일을 묶어서 하나의 파일로 만들어주며 이러한 기능을 담당하는 것을 번들러라고 한다. 가장 대표적인 번들러는 webpack이다. 통상 CRA등으로 만든 프로젝트에거 npm start나 npm rum build를 할 때 기능하는 것이 webpack이다.
Dev server
요즘은 프론트 개발을React나 Vue로 제일 처음 접할 것이라 생각한다. 그리고 대부분 툴체인(CRA, vue-cli)를 통해 최초의 개발을 진행한다고 생각한다.
이러한 툴체인을 사용하면 npm start를 통해 프로젝트를 localhost에 띄워서 작업 결과를 확인하곤 한다. 그래서 종종 사람들은 react나 vue를 build툴이라고 생각하는데 실제로 react나 vue는 그냥 프레임워크이고 실제 브라우저는 index.html과 js를 해석하는 기능만을 가지고 있다. 실제로 우리가 보고있는 사이트는 서버에서 index.html과 각종 스크립트 파일을 브라우저가 받아서 보여주고 있을 뿐이다.
그러면 npm start가 하고 있는 동작은 무엇일까? 아까 말했지만 브라우저는 서버로부터 index.html을 받는 기능밖에 없다. 따라서 npm start가 하는 일은 index.html을 보내는 서버를 띄우는 것이다. 이러한 기능은 대부분 bundler에서 제공하는 dev server기능을 통해 이루어진다. CRA를 기준으로 설명하면 CRA를 통해 react framework를 만들면 자동으로 webpack bundler와 webpack-dev server가 설치된다. webpack은 개발자의 편의를 위해 작성한 html과 번들링한 js 결과물을 올린 서버를 만들어 주는 dev server의 기능을 가지고 있다. 실제로 npm start를 하게 되면 이 서버를 띄워서 개발 결과를 확인 가능하게끔 해주는 것이다.
JSX 문법과 babel
대세 브라우저는 기본적으로 자바스크립트 이외의 언어를 해석하지 못한다. 그럼 React로 jsx문법을 통해 작성한 어플리케이션은 어떻게 브라우저가 해석하는 것일까? npm run build후 만들어진 js파일을 보면 모든 jsx문법이 js로 변해있는 것을 확인할 수 있다. 즉 JSX는 js로 작성되야할 함수를 조금 더 쉽게 쓸 수 있게끔 한 문법일 뿐이고 실제 동작은 모두 번들링과정에서 js로 바뀌어 동작하는 것이다. 이러한 과정을 통상 babel이 담당하여 진행하게 된다.
Lint
lint는 소스코드의 문법적 오류나 스타일적 오류, 문제가 발생할 수 있을법한 부분들을 검사하고 알려주며 나아가 자동으로 수정까지 해주는 검사 도구들이다. Js에만 있는것은 아니고 대부분의 언어에 적용할 수 있으며 프론트 개발에서는 eslint를 통해 쉽게 적용할 수 있다.
