1. 프론트엔드 개발에 Node.js가 필요한 이유
최신 스펙으로 개발할 수 있다
자바스크립트 스펙의 빠른 발전에 비해 브라우져의 지원 속도는 항상 뒤쳐진다. 아무리 편리한 스펙이 나오더라도 이것을 구현해 주는 징검다리 역할, 이를테면 바벨 같은 도구의 도움 없이는 부족하다. 더불어 웹팩, NPM 같은 노드 기술로 만들어진 환경에서 사용할 때 비로소 자동화된 프론트엔드 개발환경을 갖출 수 있다.
각 프레임워크에서 제공하는 도구를 사용하면 손쉽게 개발환경을 갖출수 있다. React.js의 CRA(create-react-app)를 사용한다면 말이다. 그러나 개발 프로젝트는 각자의 형편이라는 것이 있어서 툴을 그대로 사용할 수 없는 경우도 빈번하다. 커스터마이징 하려면 Node.js 지식이 필요하다. 어쩌면 자동화된 도구를 사용할 수 없는 환경이라면 직접 환경을 구축해야 할 상황에 놓일 수도 있다.
웹브라우저의 한계를 번들링으로 해결해야 한다.
웹 브라우저는 IE, 크롬, Edge, Firefox, Safari 등 다양한 종류가 존재하는데, 모두가 최신 자바스크립트 문법을 지원하지는 않고 또 사용자가 사용하는 버전에 따라 지원 현황이 다르기 때문에 범용적으로 브라우저가 읽을 수 있게 만드는데 번들링은 필수적이다.
또, 웹 브라우저는 서버로부터 타입스크립트 파일을 받아 컴파일해서 보여주는 등의 기능을 갖고 있지 않다. 웹브라우저는 오직 HTML/CSS/JS만 해석할 수 있다. 우리가 타입스크립트로 코딩을 한 뒤에 올바르게 웹 브라우저에 표기해주려면 직접 번들링 혹은 컴파일을 해주어야 하는 것이다.
💡 npm, jsx, tsx, ts, scss 등은 웹브라우저에서 기본적으로는 알 수 없는 확장자이다. 번들링을 통해 지원해야 한다.
위와 같이 최신 개발 환경에서 작성된 파일을 브라우저에 올바르게 배포하기 위해 거쳐야 하는 과정인 번들링 과정이 주로 Node.js 로 작성된 프로그램 내부에서 일어난다. 그렇기 때문에 Node.js를 필수적으로 알아야 해당 과정 자체를 이해할 수 있다.
'개발공부_Blog > React.js' 카테고리의 다른 글
useReducer, React-hooks(3) (0) | 2022.08.10 |
---|---|
useEffect, React-Hooks(2) (0) | 2022.08.10 |
useState, 가장 기본적인 React-Hooks (0) | 2022.08.10 |
React Hooks을 사용하는 이유 (0) | 2022.08.10 |
(브라우저 렌더링 과정) 브라우저가 사용자에게 어떻게 UI를 그려내는가! (0) | 2022.03.16 |
댓글