콘텐츠로 이동

소셜 미디어 바닥글 만들기

이번에 배울 내용

  • 바닥글 컴포넌트 만들기
  • 소셜 미디어 컴포넌트에 props를 생성하고 전달합니다.

이제 페이지에서 Astro 컴포넌트를 사용했으므로 다른 컴포넌트 내에서 컴포넌트를 사용할 차례입니다!

바닥글 컴포넌트 만들기

  1. src/components/Footer.astro 위치에 새 파일을 만듭니다.

  2. 다음 코드를 새 파일 Footer.astro에 복사합니다.

    ---
const platform = "github";
const username = "withastro";
---

<footer>
  <p>Learn more about my projects on <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
</footer>

Footer.astro 가져오기 및 사용

  1. 세 개의 Astro 페이지 (index.astro, about.astro, blog.astro) 각각의 프런트매터에 다음 import 문을 추가하세요.

    import Footer from '../components/Footer.astro';

  2. 페이지 하단에 바닥글을 표시하려면 닫는 </body> 태그 바로 앞에있는 각 페이지의 Astro 템플릿에 새로운 <Footer /> 컴포넌트를 추가하세요.

        <Footer />
  </body>
</html>

  3. 브라우저 미리보기에서 각 페이지의 새 바닥글 텍스트가 보이는지 확인하세요.

직접 시도해 보기 - 바닥글 맞춤설정

여러 소셜 네트워크 (예: Instagram, Twitter, LinkedIn)를 표시하도록 바닥글을 사용자 정의하고 사용자 이름을 포함하여 자신의 프로필에 직접 연결하세요.

코드 체크인

튜토리얼의 각 단계를 따라왔다면 index.astro 파일은 다음과 같아야 합니다:

---
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';

const pageTitle = 'Home Page';
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>{pageTitle}</title>
	</head>
	<body>
    <Navigation />
		<h1>{pageTitle}</h1>
		<Footer />
	</body>
</html>

소셜 미디어 컴포넌트 만들기

연결할 수 있는 온라인 계정이 여러 개 있을 수 있으므로 재사용 가능한 단일 컴포넌트를 만들어 여러 번 표시할 수 있습니다. 매번 사용할 다른 속성 (props) (온라인 플랫폼 및 사용자 이름)을 전달합니다.

  1. src/components/Social.astro 위치에 새 파일을 생성합니다.

  2. 다음 코드를 새 파일 Social.astro에 복사합니다.

    ---
const { platform, username } = Astro.props;
---
<a href={`https://www.${platform}.com/${username}`}>{platform}</a>

바닥글에 Social.astro를 가져와 사용

  1. src/components/Footer.astro의 코드를 변경하여 가져오고 이 새 컴포넌트를 세 번 사용하고 매번 다른 컴포넌트 속성을 props로 전달합니다.

    ---
const platform = "github";
const username = "withastro";
import Social from './Social.astro';
---

<footer>
  <p>Learn more about my projects on <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
  <Social platform="twitter" username="astrodotbuild" />
  <Social platform="github" username="withastro" />
  <Social platform="youtube" username="astrodotbuild" />
</footer>

  2. 브라우저 미리보기를 확인하면 각 페이지에 이 세 가지 플랫폼에 대한 링크가 표시되는 새 바닥글이 표시됩니다.

소셜 미디어 컴포넌트 스타일 지정

  1. src/components/Social.astro에 <style> 태그를 추가하여 링크 모양을 사용자 정의하세요.

    ---
const { platform, username } = Astro.props;
---
<a href={`https://www.${platform}.com/${username}`}>{platform}</a>

<style>
  a {
    padding: 0.5rem 1rem;
    color: white;
    background-color: #4c1d95;
    text-decoration: none;
  }
</style>

  2. 내용의 레이아웃을 개선하려면 src/components/Footer.astro에 <style> 태그를 추가하세요.

    ---
import Social from './Social.astro';
---
<style>
  footer {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
  }
</style>

<footer>
  <Social platform="twitter" username="astrodotbuild" />
  <Social platform="github" username="withastro" />
  <Social platform="youtube" username="astrodotbuild" />
</footer>

  3. 브라우저 미리보기를 다시 확인하고 각 페이지에 업데이트된 바닥글이 표시되는지 확인하세요.

지식 테스트

  1. title, author, date 값을 props로 받으려면 Astro 컴포넌트의 프런트매터에 어떤 코드 줄을 작성해야 합니까?

  2. Astro 컴포넌트에 어떻게 값을 props로 전달합니까?

체크리스트

참고 자료

기여하기 커뮤니티 후원하기