본문 바로가기
부트캠프교육중/react

빌드와 번들링 정리

by 뭉지야 2023. 3. 20.
728x90

# 프론트엔드 개발에서 번들링은 사용자가 더 쉽고 빠르게 프론트엔드 애플리케이션에 접근할 수 있도록 용량을 줄이거나 파일을 최소화하여 유저에게 전달하는 과정입니다.

 

#번들링은 실질적으로 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위를 의미한다.

 

#현대 웹 개발에서, 프론트엔드 개발자에게 번들은 사용자에게 웹 애플리케이션을 제공하기 위한 파일묶음 이다.

 

#사용자가 브라우저를 열고 주소를 입력하면, 해당 주소에서 프론트엔드 개발자가 번들링한 여러 파일을 받는다. 이 파일을 브라우저가 실행하여 멋진 웹 애플리케이션을 사용자에게 제공하게 된다.

 

#번들링의 필요성

  -큰 문제는 없지만, 이러한 상황이 일어난다면 어려움에 처할수있다.

  • 두개의 .js 파일에서 같은 변수를 사용하고 있어서, 변수 간 충돌이 일어났습니다.
  • 딱 한 번 불러오는 프레임워크 코드가 8MB라서, 인터넷 속도가 느린 국가의 모바일 환경에서 사용자가 불편을 호소합니다.
  • 번들 파일 사이즈를 줄이기 위해서 파일의 공백을 모두 지웠는데, 가독성이 너무 떨어져서 코딩하기가 어렵습니다. 결국 그대로 공백을 되돌려서 코딩합니다.
  • 배포 코드가 너무 읽기 쉬워 개발을 할 줄 아는 사용자가 프론트엔드 애플리케이션을 임의로 조작하여 피해가 발생했습니다.

 - 소프트웨어를 잘 만들어도 사용자에게 배포하기 위해 번들링이 꼭 필요하다.


#번들링: 묶어서 제공하는것.

             1개의 파일로 결합하는 과정

#빌드: 변환
           작성한 코드들을 실행가능한 형태로 제공하는거다
#빌드 안에 번들링 속해있음.

#웹팩: 빌드, 번들링 모두 해줌.

자바스크립트로만 된 것만 받아들일수있다.

그래서 JSX쓰려면 바벨 써야한다. config파일로 ES6를 알려주는거다.

728x90

'부트캠프교육중 > react' 카테고리의 다른 글

웹팩의 핵심 개념  (0) 2023.03.20
웹팩 Webpack  (0) 2023.03.20
Redux 간단히 정리  (0) 2023.02.27
Redux Hook  (0) 2023.02.24
Redux 2  (0) 2023.02.24