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

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

요구 사항

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

햄버거 컴포넌트 구축

섹션 제목: 햄버거 컴포넌트 구축

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

1. src/components/에 Hamburger.astro라는 파일을 생성합니다.

2. 다음 코드를 컴포넌트에 복사합니다. 이는 모바일에서 탐색 링크를 열고 닫는 3줄 “햄버거” 메뉴를 나타냅니다. (나중에 global.css에 새 CSS 스타일을 추가할 것입니다.)

   src/components/Hamburger.astro

   ---
   ---
   <div class="hamburger">
     <span class="line"></span>
     <span class="line"></span>
     <span class="line"></span>
   </div>

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

   코드를 확인하세요!

   src/components/Header.astro

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

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

   src/styles/global.css

   /* 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가 사용자 이벤트를 ‘수신’한 후 그에 따라 응답합니다.

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

   src/pages/index.astro

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

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

.js 파일 가져오기

섹션 제목: .js 파일 가져오기

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

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

   src/scripts/menu.js

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

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

   src/pages/index.astro

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

3. 더 작은 크기로 브라우저 미리보기를 다시 확인하고 햄버거 메뉴가 여전히 탐색 링크를 열고 닫는지 확인하세요.

4. 가져오기와 동일한 <script>를 다른 두 페이지인 about.astro 및 blog.astro에 추가하고 각 페이지에 반응형 대화형 헤더가 있는지 확인하세요.

   src/pages/about.astro & src/pages/blog.astro

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

핵심사항

이전에 일부 JavaScript를 사용하여 사이트의 일부를 구축했습니다.

• 페이지 제목들을 (title, heading) 동적으로 정의
• 정보 페이지의 기술 목록을 통한 매핑
• HTML 요소를 조건부로 표시

이러한 명령은 모두 빌드 시 실행되어 사이트에 대한 정적 HTML을 생성한 다음 코드가 “버려집니다.”

<script> 태그의 JavaScript는 브라우저로 전송되며, 페이지 새로 고침 또는 입력 토글과 같은 사용자 상호 작용을 기반으로 실행할 수 있습니다.

지식을 테스트해보세요

섹션 제목: 지식을 테스트해보세요

1. Astro는 언제 컴포넌트의 프런트매터에 작성된 JavaScript를 실행합니까?

   1. Astro는 절대로 JavaScript를 실행하지 않습니다.

   2. 빌드 타임에

   3. 방문자가 버튼을 클릭할 때

   제출

2. 선택적으로 Astro는 브라우저에 JavaScript를 보내 다음을 허용할 수 있습니다.

   1. 사용자가 페이지를 클릭

   2. 더 빠른 로드 시간

   3. 클라이언트 측 상호작용

   제출

3. 클라이언트 측 JavaScript는 어디에서 작성되거나 가져올 때 사용자의 브라우저로 전송되나요?

   1. <script> 태그

   2. .astro 파일의 코드 펜스

   3. global.css

   제출

체크리스트

섹션 제목: 체크리스트

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

참고 자료

섹션 제목: 참고 자료

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