Gatsby와 TypeScript로 정적 사이트 생성하기 🚀

안녕하세요, 여러분! 오늘은 웹 개발의 흥미진진한 세계로 여러분을 초대하려고 해요. 특히 Gatsby와 TypeScript를 사용해 정적 사이트를 만드는 방법에 대해 알아볼 거예요. 이 조합은 마치 슈퍼히어로 팀업과 같아요! 🦸‍♂️🦸‍♀️ Gatsby는 빠른 속도로, TypeScript는 강력한 타입 체크로 우리의 웹 개발을 한층 더 업그레이드시켜줄 거예요.

여러분, 혹시 재능넷이라는 사이트를 들어보셨나요? 이 사이트는 다양한 재능을 거래하는 플랫폼인데요, 우리가 오늘 배울 내용을 활용하면 이런 멋진 사이트도 만들 수 있답니다! 자, 그럼 이제 본격적으로 시작해볼까요?

1. Gatsby: 현대적인 웹 개발의 신세계 🌟

Gatsby는 React 기반의 정적 사이트 생성기입니다. "정적 사이트 생성기"라고 하면 뭔가 딱딱하고 지루할 것 같지만, 전혀 그렇지 않아요! Gatsby는 마치 레고 블록처럼 웹사이트를 조립할 수 있게 해주는 멋진 도구예요. 🧱✨

1.1 Gatsby의 특징

• 빠른 속도: Gatsby로 만든 사이트는 번개처럼 빠릅니다! ⚡
• 플러그인 생태계: 다양한 기능을 쉽게 추가할 수 있어요. 마치 스마트폰에 앱을 설치하는 것처럼 간단해요! 📱
• SEO 친화적: 검색 엔진이 여러분의 사이트를 사랑하게 될 거예요. 💖
• Progressive Web App: 모바일에서도 앱처럼 동작하는 웹사이트를 만들 수 있어요. 📱💻

Gatsby를 사용하면, 재능넷과 같은 복잡한 사이트도 효율적으로 만들 수 있어요. 사용자들이 재능을 빠르게 검색하고 거래할 수 있는 환경을 제공할 수 있죠!

1.2 Gatsby의 작동 원리

Gatsby는 마법사처럼 동작해요. 여러분이 콘텐츠를 작성하면, Gatsby가 그것을 가져와 최적화된 HTML, CSS, JavaScript로 변환합니다. 이 과정을 그림으로 표현해볼까요?

이렇게 Gatsby는 여러분의 콘텐츠를 받아서 최적화된 웹사이트로 변신시켜줍니다. 마치 요리사가 신선한 재료로 맛있는 요리를 만드는 것처럼요! 🍳👨‍🍳

1.3 Gatsby vs 다른 프레임워크

웹 개발 세계에는 다양한 프레임워크가 있어요. Gatsby가 어떻게 다른지 한번 비교해볼까요?

각 프레임워크는 자신만의 특징이 있어요. Gatsby는 특히 빠른 속도와 SEO 최적화가 필요한 프로젝트에 딱이에요. 예를 들어, 재능넷과 같은 사이트는 사용자들이 빠르게 정보를 찾고, 검색 엔진에서도 잘 노출되어야 하죠. 이런 경우 Gatsby가 완벽한 선택이 될 수 있어요!

1.4 Gatsby로 할 수 있는 멋진 것들

Gatsby로 무엇을 만들 수 있을까요? 가능성은 무한해요! 🌈

• 🖥️ 개인 포트폴리오 웹사이트
• 📰 뉴스 또는 블로그 사이트
• 🛒 e-커머스 플랫폼
• 🎨 디지털 아트 갤러리
• 📚 온라인 학습 플랫폼

여러분의 상상력이 곧 한계예요. Gatsby는 여러분의 아이디어를 현실로 만들어주는 마법 지팡이 같은 존재랍니다! 🧙‍♂️✨

2. TypeScript: 타입의 마법사 🧙‍♂️

자, 이제 TypeScript라는 멋진 친구를 소개할 시간이에요! TypeScript는 JavaScript의 슈퍼셋으로, 타입을 추가한 프로그래밍 언어예요. 마치 JavaScript에 슈퍼 파워를 부여한 것과 같죠! 💪

2.1 TypeScript의 특징

• 정적 타입 검사: 코드를 실행하기 전에 오류를 잡아냅니다. 마치 맞춤법 검사기처럼요! 📝
• 향상된 IDE 지원: 코드 자동 완성, 리팩토링 등이 더 강력해집니다. 🖥️
• 객체 지향 프로그래밍 지원: 클래스, 인터페이스 등을 사용할 수 있어요. 🏗️
• JavaScript와의 호환성: 기존 JavaScript 코드를 그대로 사용할 수 있어요. 🤝

TypeScript를 사용하면, 재능넷과 같은 복잡한 웹 애플리케이션을 더 안정적으로 개발할 수 있어요. 사용자의 프로필, 재능 정보, 거래 내역 등을 타입으로 정의하면 실수를 줄이고 개발 속도를 높일 수 있죠!

2.2 TypeScript vs JavaScript

TypeScript와 JavaScript의 차이점을 간단한 예제로 살펴볼까요?

function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("Alice")); // 정상 동작
console.log(greet(42)); // 이상하지만 오류 없음
      

function greet(name: string): string {
  return "Hello, " + name + "!";
}

console.log(greet("Alice")); // 정상 동작
console.log(greet(42)); // 컴파일 오류!
      

보셨나요? TypeScript는 함수의 매개변수와 반환값에 타입을 지정할 수 있어요. 이렇게 하면 잘못된 타입의 데이터가 들어오는 것을 미리 방지할 수 있답니다. 마치 경비원이 문 앞에서 초대장을 확인하는 것처럼요! 🚪👮‍♂️

2.3 TypeScript의 주요 개념

TypeScript에는 몇 가지 중요한 개념들이 있어요. 이 개념들을 이해하면 TypeScript의 진정한 힘을 느낄 수 있답니다!

interface User {
  name: string;
  age: number;
  email?: string; // 선택적 속성
}

const user: User = {
  name: "Alice",
  age: 30
};
    

function identity<T>(arg: T): T {
  return arg;
}

let output = identity<string>("myString");
    

let myFavorite: string | number;
myFavorite = "TypeScript"; // OK
myFavorite = 42; // 또한 OK
    

이런 개념들을 활용하면, 재능넷과 같은 플랫폼에서 다양한 유형의 사용자, 재능, 거래 정보 등을 더 정확하고 유연하게 다룰 수 있어요. 예를 들어, 재능의 가격을 숫자나 "무료"라는 문자열로 표현할 수 있겠죠?

2.4 TypeScript의 장점

TypeScript를 사용하면 어떤 점이 좋을까요? 한번 자세히 살펴볼까요? 🕵️‍♀️

1. 버그 감소: 타입 체크로 인해 많은 버그를 사전에 방지할 수 있어요. 마치 질병을 예방하는 백신 같아요! 💉
2. 코드 가독성 향상: 타입 정보가 있어 코드를 이해하기 쉬워져요. 주석이 없어도 코드가 스스로 설명하는 것 같죠! 📖
3. 리팩토링 용이성: IDE의 강력한 지원으로 대규모 리팩토링도 두렵지 않아요. 마치 강력한 청소기로 집 안 구석구석을 정리하는 것처럼요! 🧹
4. 팀 협업 개선: 명확한 타입 정의로 팀원 간 의사소통이 원활해져요. 모두가 같은 언어로 이야기하는 것 같죠! 🗣️

이런 장점들 덕분에 TypeScript는 대규모 프로젝트에서 특히 빛을 발해요. 재능넷처럼 다양한 기능과 복잡한 데이터 구조를 가진 웹 애플리케이션을 개발할 때 TypeScript의 힘을 제대로 느낄 수 있답니다!

2.5 TypeScript 실전 팁

TypeScript를 더 잘 활용하기 위한 몇 가지 팁을 소개할게요! 🎩✨

{
  "compilerOptions": {
    "strict": true
    // 다른 옵션들...
  }
}
    

type Point = {
  x: number;
  y: number;
};

function printPoint(point: Point) {
  console.log(`x: ${point.x}, y: ${point.y}`);
}
    

interface User {
  id: number;
  name: string;
  email: string;
}

type PartialUser = Partial<User>; // 모든 속성이 선택적인 새로운 타입
type UserWithoutEmail = Omit<User, 'email'>; // email을 제외한 새로운 타입
    

이런 팁들을 활용하면 TypeScript로 더 깔끔하고 안전한 코드를 작성할 수 있어요. 재능넷과 같은 복잡한 웹 애플리케이션을 개발할 때 이런 기술들이 큰 도움이 될 거예요!

3. Gatsby와 TypeScript의 환상의 콜라보 🎭

자, 이제 우리의 두 주인공 Gatsby와 TypeScript를 함께 사용해볼 시간이에요! 이 둘을 합치면 정말 놀라운 일이 벌어집니다. 마치 초콜릿과 땅콩버터의 조합처럼 말이죠! 🍫🥜

3.1 Gatsby 프로젝트에 TypeScript 도입하기

Gatsby 프로젝트에 TypeScript를 도입하는 것은 생각보다 쉬워요. 마치 레고 블록을 끼우는 것처럼 간단하답니다! 👷‍♂️

1. 새 Gatsby 프로젝트 생성: 먼저 새로운 Gatsby 프로젝트를 만들어볼까요?

npx gatsby new my-typescript-site
cd my-typescript-site
    

2. TypeScript 설치: 이제 TypeScript와 관련 플러그인을 설치해요.

npm install --save-dev typescript @types/react @types/react-dom @types/node
npm install gatsby-plugin-typescript
    

3. gatsby-config.js 수정: Gatsby 설정 파일에 TypeScript 플러그인을 추가해요.

module.exports = {
  plugins: [`gatsby-plugin-typescript`],
  // 다른 설정들...
}
    

4. tsconfig.json 생성: TypeScript 설정 파일을 만들어요.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "esnext",
    "jsx": "preserve",
    "lib": ["dom", "esnext"],
    "strict": true,
    "noEmit": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "noUnusedLocals": false,
    "allowJs": true
  },
  "exclude": ["node_modules", "public", ".cache"]
}
    

이렇게 하면 기본적인 설정은 끝났어요! 이제 재능넷과 같은 멋진 프로젝트를 TypeScript로 개발할 준비가 된 거예요. 🎉

3.2 Gatsby와 TypeScript로 컴포넌트 만들기

이제 실제로 TypeScript를 사용해 Gatsby 컴포넌트를 만들어볼까요? 간단한 예제로 시작해봐요!

import React from 'react'

interface HeaderProps {
  siteTitle: string;
}

const Header: React.FC<HeaderProps> = ({ siteTitle }) => (
  <header style={{ background: `rebeccapurple`, marginBottom: `1.45rem` }}>
    <div style={{ margin: `0 auto`, maxWidth: 960, padding: `1.45rem 1.0875rem` }}>
      <h1 style={{ margin: 0 }}>
        <a href="/" style={{ color: `white`, textDecoration: `none` }}>
          {siteTitle}
        </a>
      </h1>
    </div>
  </header>
)

export default Header
    

보셨나요? TypeScript를 사용하면 컴포넌트의 props 타입을 명확하게 정의할 수 있어요. 이렇게 하면 잘못된 타입의 props를 전달하는 실수를 미리 방지할 수 있답니다. 마치 요리 재료를 미리 정확히 준비해두는 것과 같죠! 👨‍🍳

3.3 페이지 컴포넌트에 TypeScript 적용하기

Gatsby에서는 pages 디렉토리에 있는 컴포넌트가 자동으로 페이지가 됩니다. 이 페이지 컴포넌트에도 TypeScript를 적용해볼까요?

import React from 'react'
import { PageProps } from 'gatsby'
import Layout from '../components/layout'
import SEO from '../components/seo'

const IndexPage: React.FC<PageProps> = () => (
  <Layout>
    <SEO title="Home" />
    <h1>안녕하세요, 재능넷에 오신 것을 환영합니다!</h1>
    <p>여기서 당신의 재능을 마음껏 펼쳐보세요.</p>
  </Layout>
)

export default IndexPage
    

이렇게 하면 페이지 컴포넌트에도 TypeScript의 타입 체크 기능을 적용할 수 있어요. PageProps 타입을 사용하면 Gatsby가 페이지 컴포넌트에 전달하는 props의 타입을 정확히 알 수 있죠!

3.4 GraphQL과 TypeScript 함께 사용하기

Gatsby의 강력한 기능 중 하나는 GraphQL을 통한 데이터 쿼리입니다. TypeScript와 함께 사용하면 더욱 강력해져요!

import React from 'react'
import { graphql, PageProps } from 'gatsby'

interface TalentData {
  allTalents: {
    edges: {
      node: {
        id: string
        title: string
        description: string
      }
    }[]
  }
}

const TalentsPage: React.FC<PageProps<TalentData>> = ({ data }) => (
  <>
    <h1>재능 목록</h1>
    <ul>
      {data.allTalents.edges.map(({ node }) => (
        <li key={node.id}>
          <h2>{node.title}</h2>
          <p>{node.description}</p>
        </li>
      ))}
    </ul>
  </>
)

export const query = graphql`
  query TalentsQuery {
    allTalents {
      edges {
        node {
          id
          title
          description
        }
      }
    }
  }
`

export default TalentsPage
    

이렇게 하면 GraphQL 쿼리 결과의 타입을 정확히 지정할 수 있어요. 데이터를 사용할 때 자동 완성 기능도 사용할 수 있고, 잘못된 필드에 접근하는 실수도 방지할 수 있답니다. 마치 데이터베이스에 안전장치를 달아놓은 것 같죠? 🔐

3.5 Gatsby와 TypeScript의 시너지 효과

Gatsby와 TypeScript를 함께 사용하면 정말 멋진 일들이 일어나요! 🎭✨

• 개발 생산성 향상: 자동 완성과 타입 체크로 개발 속도가 빨라져요. 마치 터보 엔진을 단 것처럼요! 🚀
• 버그 감소: 컴파일 타임에 많은 오류를 잡아낼 수 있어요. 디버깅 시간이 크게 줄어들죠! 🐛🔍
• 코드 품질 개선: 타입 정의로 인해 코드의 의도가 명확해져요. 마치 코드에 상세한 설명서를 붙여놓은 것 같죠! 📚
• 리팩토링 용이성: 타입 시스템 덕분에 대규모 리팩토링도 두렵지 않아요. 변경 사항의 영향을 쉽게 파악할 수 있거든요! 🔧

이런 장점들 덕분에 재능넷과 같은 복잡한 웹 애플리케이션을 개발할 때 Gatsby와 TypeScript의 조합은 정말 강력한 무기가 됩니다. 사용자 프로필, 재능 정보, 거래 시스템 등 복잡한 데이터 구조를 안전하고 효율적으로 다룰 수 있어요!

3.6 실전 팁: Gatsby + TypeScript 프로젝트 구조화

대규모 프로젝트를 위한 효율적인 파일 구조를 살펴볼까요? 🗂️

my-gatsby-typescript-project/
├── src/
│   ├── components/
│   │   ├── Layout/
│   │   │   ├── Layout.tsx
│   │   │   └── index.ts
│   │   ├── Header/
│   │   │   ├── Header.tsx
│   │   │   └── index.ts
│   │   └── ...
│   ├── pages/
│   │   ├── index.tsx
│   │   ├── talents.tsx
│   │   └── ...
│   ├── templates/
│   │   ├── TalentPage.tsx
│   │   └── ...
│   ├── hooks/
│   │   ├── useSiteMetadata.ts
│   │   └── ...
│   ├── utils/
│   │   ├── formatDate.ts
│   │   └── ...
│   └── types/
│       ├── talent.ts
│       └── ...
├── gatsby-config.js
├── gatsby-node.js
├── tsconfig.json
└── package.json
  

이런 구조를 사용하면 프로젝트를 깔끔하게 관리할 수 있어요. 각 컴포넌트, 페이지, 유틸리티 함수 등이 명확히 구분되어 있어 협업할 때도 편리하답니다! 🤝

4. 정적 사이트 생성의 마법: Gatsby + TypeScript의 힘 💪

자, 이제 Gatsby와 TypeScript를 결합해 정적 사이트를 생성하는 과정을 자세히 살펴볼까요? 이 과정은 마치 요리사가 최고의 재료로 맛있는 요리를 만드는 것과 같아요! 👨‍🍳✨

4.1 빌드 프로세스 이해하기

Gatsby의 빌드 프로세스는 여러 단계로 이루어져 있어요. 각 단계를 이해하면 최적화된 사이트를 만들 수 있답니다!

1. 데이터 소싱: GraphQL을 통해 다양한 소스에서 데이터를 가져와요.
2. 데이터 변환: 가져온 데이터를 필요한 형태로 변환해요.
3. 페이지 생성: 데이터를 기반으로 정적 페이지를 생성해요.
4. 최적화: 이미지 최적화, 코드 분할 등을 수행해요.
5. HTML 생성: 각 페이지에 대한 HTML 파일을 생성해요.

이 과정에서 TypeScript는 타입 안정성을 제공하여 각 단계가 오류 없이 진행되도록 도와줍니다. 마치 요리 과정에서 정확한 계량을 하는 것과 같죠! ⚖️

4.2 성능 최적화 기법

Gatsby와 TypeScript를 사용하면 웹사이트의 성능을 극대화할 수 있어요. 몇 가지 핵심 기법을 살펴볼까요?

import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import Img from 'gatsby-image'

const TalentImage: React.FC<{ talentId: string }> = ({ talentId }) => {
  const data = useStaticQuery(graphql`
    query {
      allTalentImages {
        edges {
          node {
            id
            childImageSharp {
              fluid(maxWidth: 300) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  `)

  const image = data.allTalentImages.edges.find(
    edge => edge.node.id === talentId
  )?.node.childImageSharp.fluid

  return image ? <Img fluid={image} alt="Talent" /> : null
}

export default TalentImage
    

이렇게 하면 이미지가 자동으로 최적화되어 로딩 속도가 빨라져요. 사용자들이 재능넷의 재능 이미지를 빠르게 볼 수 있겠죠! 🖼️💨

4.3 SEO 최적화

검색 엔진 최적화(SEO)는 웹사이트의 성공에 매우 중요해요. Gatsby와 TypeScript를 사용하면 SEO도 쉽게 최적화할 수 있답니다!

import React from 'react'
import { Helmet } from 'react-helmet'
import { useStaticQuery, graphql } from 'gatsby'

interface SEOProps {
  title: string
  description?: string
  lang?: string
  meta?: Array<{ name: string; content: string }>
}

const SEO: React.FC<SEOProps> = ({ description = '', lang = 'en', meta = [], title }) => {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            author
          }
        }
      }
    `
  )

  const metaDescription = description || site.siteMetadata.description

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={`%s | ${site.siteMetadata.title}`}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata.author,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
      ].concat(meta)}
    />
  )
}

export default SEO
    

이 SEO 컴포넌트를 사용하면 각 페이지의 메타 정보를 쉽게 관리할 수 있어요. 재능넷의 각 재능 페이지가 검색 엔진에 잘 노출될 수 있겠죠! 🔍📈

4.4 동적 기능 추가하기

정적 사이트라고 해서 모든 것이 정적일 필요는 없어요. Gatsby와 TypeScript를 사용하면 동적 기능도 쉽게 추가할 수 있답니다!

import React, { useState, useEffect } from 'react'
import { graphql, useStaticQuery } from 'gatsby'

interface Talent {
  id: string
  title: string
  description: string
}

const Search: React.FC = () => {
  const data = useStaticQuery(graphql`
    query {
      allTalents {
        nodes {
          id
          title
          description
        }
      }
    }
  `)

  const [searchTerm, setSearchTerm] = useState('')
  const [searchResults, setSearchResults] = useState<Talent[]>([])

  useEffect(() => {
    const results = data.allTalents.nodes.filter((talent: Talent) =>
      talent.title.toLowerCase().includes(searchTerm.toLowerCase())
    )
    setSearchResults(results)
  }, [data, searchTerm])

  return (
    <div>
      <input
        type="text"
        placeholder="재능 검색..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <ul>
        {searchResults.map((talent) => (
          <li key={talent.id}>
            <h3>{talent.title}</h3>
            <p>{talent.description}</p>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default Search
    

이렇게 하면 사용자가 실시간으로 재능을 검색할 수 있어요. 재능넷의 사용자 경험이 한층 더 좋아지겠죠! 🔍✨

4.5 배포 및 호스팅

Gatsby로 만든 정적 사이트는 다양한 플랫폼에 쉽게 배포할 수 있어요. 몇 가지 인기 있는 옵션을 살펴볼까요?

• Netlify: GitHub와 연동하여 자동 배포가 가능해요. 무료 HTTPS와 CDN도 제공합니다.
• Vercel: Next.js로 유명하지만 Gatsby 사이트도 훌륭하게 지원해요.
• GitHub Pages: GitHub 저장소와 직접 연동되어 무료로 호스팅할 수 있어요.
• Amazon S3 + CloudFront: 대규모 트래픽을 처리해야 한다면 좋은 선택이 될 수 있어요.

재능넷과 같은 서비스는 사용자가 많아질수록 안정적인 호스팅이 중요해져요. Netlify나 Vercel과 같은 플랫폼을 사용하면 초기에는 무료로 시작하고, 나중에 필요에 따라 스케일업할 수 있답니다! 🚀

5. 실전 프로젝트: 재능넷 구현하기 🛠️

자, 이제 우리가 배운 모든 것을 종합해서 재능넷을 실제로 구현해볼 시간이에요! 이 과정을 통해 Gatsby와 TypeScript의 진정한 힘을 경험할 수 있을 거예요. 준비되셨나요? Let's go! 🚀

5.1 프로젝트 설정

먼저 프로젝트를 설정해볼까요? 터미널을 열고 다음 명령어를 실행해주세요:

npx gatsby new talent-net https://github.com/gatsbyjs/gatsby-starter-default
cd talent-net
npm install --save-dev typescript @types/react @types/react-dom @types/node
npm install gatsby-plugin-typescript
  

그리고 gatsby-config.js 파일에 다음 내용을 추가해주세요:

module.exports = {
  // ... 기존 설정 ...
  plugins: [
    `gatsby-plugin-typescript`,
    // ... 다른 플러그인들 ...
  ],
}
  

5.2 타입 정의하기

재능넷의 핵심 개체들의 타입을 정의해볼까요? src/types/index.ts 파일을 만들고 다음 내용을 작성해주세요:

export interface Talent {
  id: string
  title: string
  description: string
  price: number
  category: string
  seller: User
}

export interface User {
  id: string
  name: string
  email: string
  talents: Talent[]
}

export interface Order {
  id: string
  talent: Talent
  buyer: User
  seller: User
  status: 'pending' | 'completed' | 'cancelled'
  createdAt: Date
}
  

이렇게 타입을 정의해두면 개발 과정에서 실수를 줄이고 코드의 가독성을 높일 수 있어요! 👀✨

5.3 GraphQL로 데이터 쿼리하기

이제 재능 목록을 가져오는 GraphQL 쿼리를 만들어볼까요? src/pages/index.tsx 파일을 다음과 같이 수정해주세요:

import React from 'react'
import { graphql, PageProps } from 'gatsby'
import Layout from '../components/layout'
import SEO from '../components/seo'
import { Talent } from '../types'

interface DataProps {
  allTalents: {
    edges: {
      node: Talent
    }[]
  }
}

const IndexPage: React.FC<PageProps<DataProps>> = ({ data }) => (
  <Layout>
    <SEO title="Home" />
    <h1>재능넷에 오신 것을 환영합니다!</h1>
    <ul>
      {data.allTalents.edges.map(({ node }) => (
        <li key={node.id}>
          <h2>{node.title}</h2>
          <p>{node.description}</p>
          <p>가격: {node.price}원</p>
        </li>
      ))}
    </ul>
  </Layout>
)

export const query = graphql`
  query {
    allTalents {
      edges {
        node {
          id
          title
          description
          price
        }
      }
    }
  }
`

export default IndexPage
  

이렇게 하면 메인 페이지에서 모든 재능 목록을 볼 수 있어요. 타입스크립트 덕분에 data의 구조를 정확히 알 수 있죠! 👍

5.4 동적 페이지 생성하기

각 재능에 대한 상세 페이지를 동적으로 생성해볼까요? gatsby-node.js 파일을 다음과 같이 수정해주세요:

exports.createPages = async ({ actions, graphql }) => {
  const { createPage } = actions

  const result = await graphql(`
    {
      allTalents {
        edges {
          node {
            id
          }
        }
      }
    }
  `)

  result.data.allTalents.edges.forEach(({ node }) => {
    createPage({
      path: `/talent/${node.id}`,
      component: path.resolve(`src/templates/talent-detail.tsx`),
      context: {
        id: node.id,
      },
    })
  })
}
  

그리고 src/templates/talent-detail.tsx 파일을 만들어주세요:

import React from 'react'
import { graphql, PageProps } from 'gatsby'
import Layout from '../components/layout'
import SEO from '../components/seo'
import { Talent } from '../types'

interface DataProps {
  talent: Talent
}

const TalentDetail: React.FC<PageProps<DataProps>> = ({ data }) => {
  const talent = data.talent

  return (
    <Layout>
      <SEO title={talent.title} />
      <h1>{talent.title}</h1>
      <p>{talent.description}</p>
      <p>가격: {talent.price}원</p>
      <p>판매자: {talent.seller.name}</p>
    </Layout>
  )
}

export const query = graphql`
  query($id: String!) {
    talent(id: { eq: $id }) {
      id
      title
      description
      price
      seller {
        name
      }
    }
  }
`

export default TalentDetail
  

이제 각 재능에 대한 상세 페이지가 동적으로 생성됩니다. 멋지죠? 🎉

5.5 스타일링 추가하기

마지막으로 우리의 재능넷에 스타일을 입혀볼까요? styled-components를 사용해볼게요. 먼저 설치해주세요:

npm install styled-components @types/styled-components gatsby-plugin-styled-components
  

그리고 gatsby-config.js에 플러그인을 추가해주세요:

module.exports = {
  // ... 기존 설정 ...
  plugins: [
    `gatsby-plugin-styled-components`,
    // ... 다른 플러그인들 ...
  ],
}
  

이제 src/components/TalentCard.tsx 파일을 만들어 스타일링된 재능 카드 컴포넌트를 만들어볼까요?

import React from 'react'
import styled from 'styled-components'
import { Link } from 'gatsby'  import { Talent } from '../types'

const Card = styled.div`
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-5px);
  }
`

const Title = styled.h2`
  color: #333;
  font-size: 1.5em;
  margin-bottom: 8px;
`

const Description = styled.p`
  color: #666;
  font-size: 1em;
  margin-bottom: 8px;
`

const Price = styled.p`
  color: #e74c3c;
  font-weight: bold;
  font-size: 1.2em;
`

interface TalentCardProps {
  talent: Talent
}

const TalentCard: React.FC<talentcardprops> = ({ talent }) => (
  <link to="{`/talent/${talent.id}`}" style="{{" textdecoration:>
    <card>
      <title>{talent.title}</title>
      <description>{talent.description}</description>
      <price>{talent.price}원</price>
    </card>
  
)

export default TalentCard
</talentcardprops>

이제 이 TalentCard 컴포넌트를 사용해 메인 페이지를 더 멋지게 꾸며볼까요? src/pages/index.tsx 파일을 다음과 같이 수정해주세요:

import React from 'react'
import { graphql, PageProps } from 'gatsby'
import styled from 'styled-components'
import Layout from '../components/layout'
import SEO from '../components/seo'
import TalentCard from '../components/TalentCard'
import { Talent } from '../types'

const TalentGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
`

interface DataProps {
  allTalents: {
    edges: {
      node: Talent
    }[]
  }
}

const IndexPage: React.FC<pageprops>> = ({ data }) => (
  <layout>
    <seo title="Home"></seo>
    <h1>재능넷에 오신 것을 환영합니다!</h1>
    <talentgrid>
      {data.allTalents.edges.map(({ node }) => (
        <talentcard key="{node.id}" talent="{node}"></talentcard>
      ))}
    </talentgrid>
  </layout>
)

export const query = graphql`
  query {
    allTalents {
      edges {
        node {
          id
          title
          description
          price
        }
      }
    }
  }
`

export default IndexPage
</pageprops>

와우! 이제 우리의 재능넷이 정말 멋지게 변신했어요! 🎨✨

5.6 기능 추가: 검색 기능

사용자 경험을 더욱 향상시키기 위해 검색 기능을 추가해볼까요? src/components/Search.tsx 파일을 만들어주세요:

import React, { useState } from 'react'
import styled from 'styled-components'
import { useStaticQuery, graphql } from 'gatsby'
import TalentCard from './TalentCard'
import { Talent } from '../types'

const SearchContainer = styled.div`
  margin-bottom: 20px;
`

const SearchInput = styled.input`
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
`

const Search: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('')
  const data = useStaticQuery(graphql`
    query {
      allTalents {
        edges {
          node {
            id
            title
            description
            price
          }
        }
      }
    }
  `)

  const talents: Talent[] = data.allTalents.edges.map(({ node }: { node: Talent }) => node)

  const filteredTalents = talents.filter(talent =>
    talent.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
    talent.description.toLowerCase().includes(searchTerm.toLowerCase())
  )

  return (
    <searchcontainer>
      <searchinput type="text" placeholder="재능 검색..." value="{searchTerm}" onchange="{(e)"> setSearchTerm(e.target.value)}
      />
      {filteredTalents.map(talent => (
        <talentcard key="{talent.id}" talent="{talent}"></talentcard>
      ))}
    </searchinput></searchcontainer>
  )
}

export default Search

이제 이 Search 컴포넌트를 메인 페이지에 추가해볼까요? src/pages/index.tsx 파일을 다음과 같이 수정해주세요:

import React from 'react'
import { PageProps } from 'gatsby'
import Layout from '../components/layout'
import SEO from '../components/seo'
import Search from '../components/Search'

const IndexPage: React.FC<pageprops> = () => (
  <layout>
    <seo title="Home"></seo>
    <h1>재능넷에 오신 것을 환영합니다!</h1>
    <search></search>
  </layout>
)

export default IndexPage
</pageprops>

멋져요! 이제 사용자들이 원하는 재능을 쉽게 찾을 수 있게 되었어요. 🔍✨

5.7 마무리 및 배포

자, 이제 우리의 재능넷이 거의 완성되었어요! 마지막으로 프로젝트를 빌드하고 배포해볼까요?

1. 먼저 프로젝트를 빌드해주세요:

   gatsby build

2. 빌드된 사이트를 로컬에서 확인해보세요:

   gatsby serve

3. 모든 것이 잘 작동한다면, 이제 배포할 차례예요! Netlify를 사용해 배포해볼까요?
   • Netlify 계정을 만들고 새 사이트를 추가하세요.
   • GitHub 저장소와 연결하세요.
   • 빌드 설정에서 빌드 명령어를 gatsby build로, 퍼블릭 디렉토리를 public/로 설정하세요.
   • "Deploy site" 버튼을 클릭하세요!

축하합니다! 🎉 이제 여러분의 재능넷이 전 세계에 공개되었어요. Gatsby와 TypeScript의 강력한 조합으로 만든 빠르고 안정적인 웹사이트를 만들어냈답니다!

이렇게 해서 우리는 Gatsby와 TypeScript를 사용해 멋진 웹사이트를 만들어보았어요. 이 과정에서 정적 사이트 생성의 장점, TypeScript의 타입 안정성, 그리고 현대적인 웹 개발 도구들의 강력함을 경험해보았죠. 앞으로 여러분이 만들 멋진 프로젝트들이 기대되네요! 화이팅! 💪😊