> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/react-study/getting-started/undefined.md).

# 왜 프레임워크를 사용할까?

## 프레임워크를 사용하는 이유 

### **새로운 기술의 브라우저 호환성** 

모듈 프로그래밍과 웹 컴포넌트 시스템과 같은 차세대 웹 표준 기술을 브라우저 호환성 문제로 자유롭게 사용하지 못한다. 하지만 프레임워크를 사용해서 이와 같은 새로운 기술을 사용할 수 있다. 또한 웹 표준이 될 기술 들을 미리 사용해 볼 수 있다. 

#### 모듈 프로그래밍 

{% hint style="info" %}
모듈이란? 코드 덩어리를 독립적인 단위로 구성해서 부품처럼 사용하는 것을 말한다. 
{% endhint %}

기존의 `<script>`를 불러오는 방식은 아래와 같이 의존하는 파일을 전부 불러 와야 했다. &#x20;

```markup
<script src="./dom.js"></script>
<script src="./js/main.js"></script>
```

하지만 이 방법은 앞서 불러오는 파일의 내용을 모두 불러와야 하기 때문에 `DOMContentLoaded` 시간이 오래 걸리고 이는 성능과 사용자 경험에 좋지 않다.&#x20;

새롭게 사용할 수 있는 모듈 방식은 아래와 같이 `type="module"`을 사용한다. 그리고 `import`, `export`를 사용해서 필요한 기능만 내보내고 가져오기 때문에 브라우저가 해석할 스크립트 코드가 줄어들어 `DOMContentLoaded`의 시간도 단축된다.&#x20;

```markup
<script type="module" src="./js/main.js"></script>
```

&#x20;