컨텐츠로 건너뛰기

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

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

요구 사항

  • 햄버거 메뉴 컴포넌트 만들기
  • 사이트 방문자가 탐색 메뉴를 열고 닫을 수 있도록 <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. 다양한 크기의 브라우저 미리보기를 다시 확인하고, 화면 크기와 이 페이지의 사용자 입력에 반응하는 탐색 메뉴가 작동하는지 확인하세요.

각 페이지에 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.astroblog.astro에 추가하고 각 페이지에 반응형 대화형 헤더가 있는지 확인하세요.

    src/pages/about.astro & src/pages/blog.astro
    <Footer />
    <script>
    import "../scripts/menu.js";
    </script>
    </body>

지식을 테스트해보세요

섹션 제목: 지식을 테스트해보세요
  1. Astro는 언제 컴포넌트의 프런트매터에 작성된 JavaScript를 실행합니까?

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

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

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

기여하기

여러분의 생각을 들려주세요!

GitHub Issue 생성

우리에게 가장 빨리 문제를 알려줄 수 있어요.

커뮤니티