JSX와 React, Bundle, Babel

귤티·2025년 4월 19일

front

목록 보기
5/10

번들러

개발할 때는 파일이 많지만 최종적으로 사용자한테 전달할 때는 하나로 합쳐 버린 소프트웨어

웹팩

  • 가장 많이 쓰이는 번들러

Vite

Parcel

실제 웹에서 실행되는 환경과 개발자들이 개발하는 환경을 분리한 것이 번들링
브라우저가 기본적으로 지원하지 않는 것도 개발 환경에서 하게 되었다.

다른 언어로 작성해도 자바스크립트로 변환해줌

내부에 언어 변환기라는 소프트웨어 존재 => 바벨

Babel

  • 여러 언어를 자바스크립트로 변환
  • 최신 버전의 자바스크립트를 낮은 버전으로 변환

Node.js

  • 자바스크립트로 만든 소프트웨어를 일반적인 소프트웨어처럼 사용할 수 있다.
  • 개발 환경에서 자바스크립트로 다양한 소프트웨어를 만들 수 있게 한다.

npm

  • 자바스크립트로 만들어둔 수많은 소프트웨어를 모아둔 것

nodejs가 설치되고 npm을 기반으로 프로젝트를 구성하고 내가 원하는 웹앱을 원하는 프로젝트 구성으로 셋업한 다음에 개발하고 그것을 어떤 사용자든 실행시킬 수 있는 웹앱으로 번들링해서 출시

JSX

React -> JS로 html을 조작하기 위해서 DOM을 사용해야함.
DOM을 사용하기 힘들기에 Js만을 사용해서 html 같이 컨텐츠를 표현하고 나머지는 자바스크립트를 사용하자

자바스크립트 안에 html 태깅이 들어가야 하는 상황
-> 브라우저가 지원하지 않음
번들러와 바벨 덕분에 브라우저가 지원하지 않는 jsx 환경에서 개발하고 자바스크립트와 html 파일로 번역해서 브라우저에서 실행하게 할 수 있다.

profile
취준 진입

0개의 댓글