첫 번째 스크립트를 브라우저로 보내기

클라이언트 측 상호 작용이 필요한 모바일 화면 크기에서 링크를 열고 닫을 수 있는 햄버거 메뉴를 추가해 보겠습니다.

요구 사항

햄버거 메뉴 컴포넌트 만들기
사이트 방문자가 탐색 메뉴를 열고 닫을 수 있도록 <script> 작성
JavaScript를 .js 파일로 이동

햄버거 컴포넌트 구축

모바일 메뉴를 열고 닫을 수 있는 <Hamburger /> 컴포넌트를 만듭니다.

src/components/에 Hamburger.astro라는 파일을 생성합니다.
다음 코드를 컴포넌트에 복사합니다. 이는 모바일에서 탐색 링크를 열고 닫는 3줄 “햄버거” 메뉴를 나타냅니다. (나중에 global.css에 새 CSS 스타일을 추가할 것입니다.)
src/components/Hamburger.astro
```
---
---
<div class="hamburger">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
</div>
```

이 새로운 <Hamburger /> 컴포넌트를 Header.astro의 <Navigation /> 컴포넌트 바로 앞에 배치하세요.

코드를 확인하세요!

---
import Hamburger from './Hamburger.astro';
import Navigation from './Navigation.astro';
---
<header>
  <nav>
    <Hamburger />
    <Navigation />
  </nav>
</header>

햄버거 컴포넌트에 다음 스타일을 추가합니다.

/* nav 스타일 */
.hamburger {
  padding-right: 20px;
  cursor: pointer;
}

.hamburger .line {
  display: block;
  width: 40px;
  height: 5px;
  margin-bottom: 10px;
  background-color: #ff9776;
}

.nav-links {
  width: 100%;
  top: 5rem;
  left: 48px;
  background-color: #ff9776;
  display: none;
  margin: 0;
}

.nav-links a {
  display: block;
  text-align: center;
  padding: 10px 0;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
}

.nav-links a:hover, a:focus {
  background-color: #ff9776;
}

.expanded {
  display: unset;
}

@media screen and (min-width: 636px) {
  .nav-links {
    margin-left: 5em;
    display: block;
    position: static;
    width: auto;
    background: none;
  }

  .nav-links a {
    display: inline-block;
    padding: 15px 20px;
  }

  .hamburger {
    display: none;
  }
}

첫 번째 스크립트 태그 작성

탐색 링크를 표시하거나 숨기기 위해 햄버거 메뉴를 클릭하는 등의 사용자 입력에 응답할 수 없기 때문에 헤더는 아직 대화형이 아닙니다.

<script> 태그를 추가하면 클라이언트 측 JavaScript가 사용자 이벤트를 ‘수신’한 후 그에 따라 응답합니다.

index.astro의 닫는 </body> 태그 바로 앞에 다음 <script> 태그를 추가합니다.

  <Footer />
  <script>
    document.querySelector('.hamburger').addEventListener('click', () => {
      document.querySelector('.nav-links').classList.toggle('expanded');
    });
  </script>
</body>

다양한 크기의 브라우저 미리보기를 다시 확인하고, 화면 크기와 이 페이지의 사용자 입력에 반응하는 탐색 메뉴가 작동하는지 확인하세요.

`.js` 파일 가져오기

각 페이지에 JavaScript를 직접 작성하는 대신 <script> 태그의 내용을 프로젝트의 자체 .js 파일로 이동할 수 있습니다.

src/scripts/menu.js를 생성하고 (새 /scripts/ 폴더를 생성해야 함) JavaScript를 해당 폴더로 이동합니다.

document.querySelector('.hamburger').addEventListener('click', () => {
  document.querySelector('.nav-links').classList.toggle('expanded');
});

index.astro의 <script> 태그 내용을 다음 파일 가져오기로 바꿉니다.

  <Footer />
  <script>
    document.querySelector('.hamburger').addEventListener('click', () => {
      document.querySelector('.nav-links').classList.toggle('expanded');
    });

    import "../scripts/menu.js";
  </script>
</body>

더 작은 크기로 브라우저 미리보기를 다시 확인하고 햄버거 메뉴가 여전히 탐색 링크를 열고 닫는지 확인하세요.
가져오기와 동일한 <script>를 다른 두 페이지인 about.astro 및 blog.astro에 추가하고 각 페이지에 반응형 대화형 헤더가 있는지 확인하세요.
src/pages/about.astro & src/pages/blog.astro
```
  <Footer />
  <script>
    import "../scripts/menu.js";
  </script>
</body>
```

지식을 테스트해보세요

Astro는 언제 컴포넌트의 프런트매터에 작성된 JavaScript를 실행합니까?
1. Astro는 절대로 JavaScript를 실행하지 않습니다.
2. 빌드 타임에
3. 방문자가 버튼을 클릭할 때
선택적으로 Astro는 브라우저에 JavaScript를 보내 다음을 허용할 수 있습니다.
1. 사용자가 페이지를 클릭
2. 더 빠른 로드 시간
3. 클라이언트 측 상호작용
클라이언트 측 JavaScript는 어디에서 작성되거나 가져올 때 사용자의 브라우저로 전송되나요?
1. <script> 태그
2. .astro 파일의 코드 펜스
3. global.css

체크리스트

<script> 태그에 JavaScript를 사용하여 클라이언트 측 상호 작용을 추가할 수 있습니다.
.js 파일을 <script> 태그로 가져올 수 있습니다.

참고 자료

Astro의 클라이언트 측 스크립트