astro의 첫눈

Astro은 Islands Architecture의 영향을 받은 소스 오픈 웹 프레임워크이다.프레드 케이 쇼트(Fred K.Schott), 매튜 필립스(Matthew Phillips), 네트 모어(Nate Moore)가 만들었고 눈더미와 스카이팩을 동시에 완성하는 산물로 파워스(Powers)를 끌어들였다.

대강

Introduction

Partial Hydration

Client Directives

Set up

Create project and install Astro dependency

Add CLI Commands

Create a Page

Start Development Server

Add Components

Create a Markdown Component

Create a React Component

Create a Svelte Component

Deploy to Netlify

Create a GitHub Repository

Connect GitHub Repository to Netlify

소개하다.

이 틀은 주류 웹 개발 대화에 일부 수합 작용과 상호작용적 고도라는 개념을 가져왔기 때문에 칭찬할 만하다.

부분수합작용

나는 이 일에 대해 약간 의심하지만, 여기는 총결이다.그 대화는 이미 십여 년 동안 진행되었지만, 줄곧 가장자리에 처해 있다.이 기술들을 완전히 지원하는 첫 번째 틀인 마르코는 2014년 창설됐지만 2019년께까지도 고립된 틀이었다.
그러나 지난 2년 동안 많은 틀이 유사한 동기와 기존 기술, 예를 들어 Slinkity, Elder를 참고했다.js, Ales 및 Qwik.프레드 K 쇼트는 Introducing Astro: Ship Less JavaScript (June 8, 2021)에서 Astro의 구조와 목표를 묘사했다.

Astro works a lot like a static site generator. If you have ever used Eleventy, Hugo, or Jekyll (or even a server-side web framework like Rails, Laravel, or Django) then you should feel right at home with Astro.

In Astro, you compose your website using UI components from your favorite JavaScript web framework (React, Svelte, Vue, etc). Astro renders your entire site to static HTML during the build. The result is a fully static website with all JavaScript removed from the final page.

React, Vue, Svelte을 기반으로 하는 프레임워크가 많지만, 구축하는 동안 구성 요소를 정적 HTML로 표시할 수 있지만, 클라이언트에서 이 프로젝트를 실현하려면 정적 HTML과 함께 의존 항목을 제공해야 합니다.다른 한편, Astro는 단일 구성 요소만 불러오는 능력과 이 구성 요소가 필요할 때 의존항을 불러오는 능력을 포함한다.

고객 명령

Astro에는 실행 시 클라이언트에 구성 요소를 추가하는 client:* 명령이 다섯 개 포함되어 있습니다.명령은 Astro 어셈블리가 표시되는 방법을 알려주는 어셈블리 속성입니다.
명령어
묘사<Component client:load />페이지를 불러올 때 구성 요소를 추가합니다.<Component client:idle />일단 메인 라인이 한가해지면 즉시 부품에 대해 수합물 처리를 한다.<Component client:visible />요소가 뷰포트에 들어오면 어셈블리는 즉시 중지됩니다.<Component client:media={QUERY} />브라우저가 지정한 미디어 조회와 일치하면 이 구성 요소를 즉시 삭제합니다.<Component client:only />페이지에 불러올 때 구성 요소에 수화물을 추가합니다. client:load과 유사합니다.생성 시 이 구성 요소를 건너뜁니다.

설정

이 강좌는 초보자 템플릿을 사용하지 않고 처음부터 Astro 프로젝트를 구축할 것입니다. 이것은 프레임워크가 어떻게 작동하는지 이해하는 더 좋은 방법이라고 생각하지만, templates은 정말 훌륭합니다.
이 강좌의 모든 코드는 on my GitHub에서 찾을 수 있습니다.

프로젝트 작성 및 Astro 종속성 설치

프로젝트에 새 디렉터리 cd을 만들고 프로젝트에 넣고 package.json 파일을 초기화하고 astro 의존항을 설치합니다.

mkdir ajcwebdev-astro
cd ajcwebdev-astro
yarn init -y
yarn add -D astro
echo 'node_modules\ndist\n.DS_Store' > .gitignore

CLI 명령 추가

다음 스크립트를 package.json에 추가합니다.

"scripts": {
  "dev": "astro dev",
  "start": "astro dev",
  "build": "astro build",
  "preview": "astro preview"
},

모든 명령은 프로젝트의 루트 디렉터리에서 실행됩니다.

yarn dev과 yarn start은 모두 localhost:3000에서 로컬 개발 서버를 시작한다.

yarn build은 ./dist에 생산 기지를 세웠다.

yarn preview은 배치하기 전에 로컬에서 미리 보기로 생성됩니다.

페이지 만들기

Astro는 .astro 디렉토리에서 .md 또는 src/pages 파일을 찾습니다.각 페이지는 파일 이름에 따라 라우팅으로 공개됩니다.이미지 등 정적 자산은 public 목록에 넣을 수 있다.

mkdir -p src/pages public
touch src/pages/index.astro

src/pages 디렉터리에서 우리는 index.astro 파일을 만들었다.

<!-- src/pages/index.astro -->

--------
let title = 'ajcwebdev-astro'
--------

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">

    <title>{title}</title>
  </head>

  <body>
    <main>
      <header>
        <div>
          <h1>ajcwebdev-astro</h1>
        </div>

        <p>Hello! This is an example Astro project by Anthony Campolo (ajcwebdev).</p>
      </header>
    </main>

    <footer>
      <h3>Find me on the internet:</h3>

      <ul>
        <li><a href="https://github.com/ajcwebdev">GitHub</a></li>
        <li><a href="https://twitter.com/ajcwebdev">Twitter</a></li>
        <li><a href="https://dev.to/ajcwebdev">DEV</a></li>
      </ul>
    </footer>
  </body>
</html>

개발 서버 시작

yarn dev

홈 페이지를 보려면 localhost:3000을 여십시오.

구성 요소 추가

Astro/React/Vue/Svelte/Preact 구성 요소를 저장하기 위해 components에 src이라는 디렉터리를 만들 것입니다.그리고 Markdown, React, Svelte 구성 요소 등 세 개의 추가 디렉터리를 만들 것입니다. 각각 .astro, .jsx, .svelte 파일을 저장합니다.

가격 인하 구성 요소 만들기

첫 번째 예제에서는 Markdown을 사용하여 완전히 정적 렌더링을 수행합니다.Astro에는 Markdown component이 내장되어 있으며 모든 .md 파일로 가져올 수 있습니다.

mkdir -p src/components/markdown
touch src/components/markdown/HelloMarkdown.astro

Markdown에서 astro/components 구성 요소를 가져오고 가격 인하를 적으세요.

<!-- src/components/markdown/HelloMarkdown.astro -->

--------
import { Markdown } from 'astro/components';
--------

<article>
  <section>
    <h2>Markdown</h2>

    <Markdown>
      ### This is an h3 with Markdown

      *Pretty* **cool**, ***right***?

      * Unordered
      * List

      1. Ordered
      2. List
    </Markdown>
  </section>
</article>

index.astro으로 돌아가 HelloMarkdown에서 '../components/markdown/HelloMarkdown.astro'으로 가져옵니다.<HelloMarkdown />을 main 라벨에 넣습니다.

<!-- src/pages/index.astro -->

--------
import HelloMarkdown from '../components/markdown/HelloMarkdown.astro';

let title = 'ajcwebdev-astro';
--------

<html lang="en">
  <head>
    ...
  </head>

  <body>
    <main>
      <header>
        ...
      </header>

      <HelloMarkdown />
    </main>

    <footer>
      ...
    </footer>
  </body>
</html>

React 구성 요소 생성

Astro를 구성하려면 프로젝트 루트 디렉토리에 astro.config.mjs 파일을 추가합니다.모든 설정은 옵션이며 기본 구성에 대한 정보를 포함하여 GitHub에서 전체 구성 API를 볼 수 있습니다.

touch astro.config.mjs

다음 코드를 astro.config.mjs에 추가하여 React 렌더링을 활성화하고 React JSX 구성 요소를 지원합니다.

// astro.config.mjs

export default ({
  renderers: [
    '@astrojs/renderer-react'
  ],
})

우리는 react 구성 요소를 포함하는 HelloReact.jsx 디렉터리를 만들 것입니다.

mkdir src/components/react
touch src/components/react/HelloReact.jsx

이것은 React 구성 요소이기 때문에 계약에 따라 귀하는 이를 useState의 계수기로 삼아 onClick의 <button> 이벤트 처리 프로그램에서 촉발할 의무가 있습니다.

// src/components/react/HelloReact.jsx

import { useState } from 'react'

export default function HelloReact({ children, count: initialCount }) {
  const [count, setCount] = useState(initialCount)

  const add = () => setCount((i) => i + 1)
  const subtract = () => setCount((i) => i - 1)

  return (
    <>
      <div className="children">
        {children}
      </div>

      <div className="counter">
        <button onClick={subtract}>-</button>

        <pre>{count}</pre>

        <button onClick={add}>+</button>
      </div>
    </>
  )
}

HelloReact 구성 요소 가져오기는 HelloMarkdown 구성 요소 가져오기와 매우 유사합니다.그러나 이번에 우리는 someProps을 앞의 내용에 포함하여 초기 count을 0으로 설정하였다.

<!-- src/pages/index.astro -->

--------
import HelloMarkdown from '../components/markdown/HelloMarkdown.astro'
import HelloReact from '../components/react/HelloReact.jsx'

const someProps = {
  count: 0,
}

let title = 'ajcwebdev-astro'
--------

<html lang="en">
  <head>
    ...
  </head>

  <body>
    <main>
      <header>
        ...
      </header>

      <HelloMarkdown />

      <HelloReact {...someProps} client:visible>
        <h2>React</h2>
      </HelloReact>
    </main>

    <footer>
      ...
    </footer>
  </body>
</html>

또한 client:visible을 포함하여 요소가 뷰포트에 들어오는 즉시 어셈블리를 수화합니다.

날씬한 구성 요소 만들기

renderer-svelte을 renderers의 astro.config.mjs에 추가하여 Svelte 렌더링을 사용하고 Svelte 구성 요소에 대한 지원을 제공하며 여가 시간에 SvelteKit를 다시 쓸 수 있도록 합니다.날씬하고 멋있어요.나는 업무 중에 좀 날씬하게 써도 됩니까?

// astro.config.mjs

export default ({
  renderers: [
    '@astrojs/renderer-react',
    '@astrojs/renderer-svelte'
  ],
})

어떻게 해야 할지 알아?

mkdir src/components/svelte
touch src/components/svelte/HelloSvelte.svelte

슬림한 구성 요소에는 React 구성 요소와 동일한 기능이 포함됩니다.

<!-- src/components/svelte/HelloSvelte.svelte -->

<script>
  let count = 0

  function add() {
    count += 1
  }

  function subtract() {
    count -= 1
  }
</script>

<div class="children">
  <slot />
</div>

<div class="counter">
  <button on:click={subtract}>-</button>

  <pre>{ count }</pre>

  <button on:click={add}>+</button>
</div>

HelloSvelte을 가져오고 client:visible으로 설정합니다.

<!-- src/pages/index.astro -->

--------
import HelloMarkdown from '../components/markdown/HelloMarkdown.astro'
import HelloReact from '../components/react/HelloReact.jsx'
import HelloSvelte from '../components/svelte/HelloSvelte.svelte'

const someProps = {
  count: 0,
}

let title = 'ajcwebdev-astro'
--------

<html lang="en">
  <head>
    ...
  </head>

  <body>
    <main>
      <header>
        ...
      </header>

      <HelloMarkdown />

      <HelloReact {...someProps} client:visible>
        <h2>React</h2>
      </HelloReact>

      <HelloSvelte client:visible>
        <h2>Svelte</h2>
      </HelloSvelte>
    </main>

    <footer>
      ...
    </footer>
  </body>
</html>

Netlify 에 구축

Astro 문서에는 a dozen different deployment options개 이상이 포함되어 있습니다.우리는 우리의 프로젝트를 Netlify에 배치할 것이다.
구축 구성을 위한 netlify.toml 파일을 만듭니다.

touch netlify.toml

build 명령에 yarn build을 추가하고,publish 디렉터리에 dist을 추가합니다.

[build]
  command = "yarn build"
  publish = "dist"

이것은 우리의 최종 프로젝트 구조다.

/
├── public/
├── src/
│   ├── components/
│   │   ├── markdown/
│   │   │   └── HelloMarkdown.astro
│   │   ├── react/
│   │   │   └── HelloReact.jsx
│   │   └── svelte/
│   │       └── HelloSvelte.svelte
│   └── pages/
│       └── index.astro
├── netlify.toml
└── package.json

GitHub 저장소 작성

git repo를 초기화하고 GitHub 저장소로 푸시합니다.

git init
git add .
git commit -m "svreactro"
gh repo create ajcwebdev-astro
git push -u origin main

Netlify에 GitHub 저장소 연결

GitHub 저장소를 Netlify에 연결합니다.

"사이트 설정"에 들어가서 사용자 정의 도메인 이름을 만듭니다.

배포된 사이트를 보기 위해 ajcwebdev-astro.netlify.app을 엽니다.

축하합니다. 당신은 현재 마이크로 전방 분야의 전문가입니다. 사장님께 25-30%의 임금 인상을 요구할 수 있습니다.

Reference

이 문제에 관하여(astro의 첫눈), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ajcwebdev/a-first-look-at-astro-2937

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)