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

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

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

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

#### 모듈 프로그래밍 

{% 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;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shhn0509.gitbook.io/react/react-study/getting-started/undefined.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.