스크립트 파일 분리 방법

문서를 분리하는 것은 코드의 가독성과 유지보수를 향상시키는데 도움이 될 수 있습니다. 일반적으로 코드를 각각의 역할이나 기능에 따라 분리하여 관리하면 코드의 복잡도가 낮아지고 코드 간의 의존성이 줄어들어서 코드의 유지보수가 용이해집니다.

문서를 분리하는 방법으로는 여러 가지가 있습니다:

1. 스크립트 파일 분리: 각 기능이나 역할에 따라 스크립트를 여러 개의 파일로 나누고, HTML 문서에서 `<script>` 태그로 각 파일을 로드하는 방법입니다.

```html
<!-- main 섹션 접힘/펼침 스크립트 -->
<script src="mainToggle.js"></script>

<!-- 체크박스 선택 제한 스크립트 -->
<script src="checkboxLimit.js"></script>
```

2. 외부 스크립트 파일 링크: 스크립트를 외부 파일로 분리하고, HTML 문서에서 링크를 통해 스크립트를 가져오는 방법입니다.

```html
<!-- main 섹션 접힘/펼침 스크립트 링크 -->
<script src="https://example.com/scripts/mainToggle.js"></script>

<!-- 체크박스 선택 제한 스크립트 링크 -->
<script src="https://example.com/scripts/checkboxLimit.js"></script>
```

3. 모듈화: 모듈을 사용하여 기능을 별도의 논리적 단위로 분리하는 방법입니다. ES6 이후의 JavaScript에서는 `import`와 `export` 키워드를 사용하여 모듈을 정의하고 가져오는 것이 가능합니다.

```html
<!-- 스크립트가 포함된 HTML 파일에서는 type="module" 속성을 추가해야 모듈 기능을 사용할 수 있습니다. -->
<script type="module">
  import { toggleMainSection } from './mainToggle.js';
  import { limitCheckboxSelection } from './checkboxLimit.js';

  const mainSection = document.querySelector('.main');
  const toggleMainButton = document.getElementById('toggleMainButton');
  toggleMainButton.addEventListener('click', () => {
    toggleMainSection(mainSection);
  });

  const checkboxes = document.querySelectorAll('input[name="option"]');
  checkboxes.forEach((checkbox) => {
    checkbox.addEventListener('click', () => {
      limitCheckboxSelection(checkboxes);
    });
  });
</script>
```

어떤 방법을 선택하든 코드의 가독성과 유지보수를 고려하여 적절한 방식으로 코드를 분리하는 것이 중요합니다. 일반적으로는 기능별로 스크립트를 분리하여 관리하는 것이 좋습니다.