새 Astro JS 앱을 만드는 방법: 치트시트

🚀 새로운 Astro 앱 돌리기

이 게시물에서 새 Astro JS 앱을 만드는 방법을 알아봅니다. 이것은 Astro를 처음 사용하고 시작하려는 경우와 노련한 우주 비행사이지만 스핀업 명령을 기억할 수 없는 경우에도 동일하게 유용합니다. 기본 Astro 프로젝트에 대한 명령이 포함된 치트 시트를 받고 보너스로 CI 도구를 추가하는 방법도 살펴봅니다. 도움이 되셨기를 바라며 누락된 내용이 있으면 아래에 연락하거나 댓글을 남겨주세요. 페이지 아래에서 연락처 세부 정보를 찾을 수 있습니다.

🧱 새 Astro JS 앱을 만드는 방법

새 Astro JS 앱을 만드는 방법

시작하려면 Create Astro 앱 명령을 실행하십시오.

pnpm create astro@latest my-new-astro-app && cd $_ && code .

여기에서 프로젝트가 새my-new-astro-app 디렉토리에 생성됩니다. "&& cd$_ "는 모든 것이 준비되면 새 디렉토리로 이동합니다. "&& code . "는 새 디렉토리에서 VSCode를 엽니다(Codium 또는 Sublime Text를 사용하는 경우 "&& codium . "또는 "&& subl . "로 변경).

Astro 익명 데이터 수집을 활성화(기본값) 상태로 유지하려면 이 단계를 건너뛰십시오.

pnpm astro telemetry disable

다음으로 명령줄에서 프로젝트를 쉽게 구성할 수 있습니다. Astro를 사용하면 자체 프레임워크를 가져올 수 있으므로 구성만 하면 됩니다. Astro add는 원하는 것을 말하면 자동으로 이 작업을 수행합니다.

pnpm astro add react svelte vue mdx sitemap tailwind

당연히 원하는 통합만 골라서 선택할 수 있습니다! available Integrations and links to docs 의 최신 목록을 가져옵니다.

Astro는 기본적으로 정적 사이트를 제공할 준비가 되어 있습니다. 이것은 대부분의 콘텐츠 사이트에서 작동합니다. 인기 있는 호스팅 서비스에 정적 사이트를 배포할 수 있습니다. 추가 에지 기능을 추가할 수 있는 전체 사이트 SSG(Server Side Generated)를 만들 수 있습니다. Astro add는 SSR로 이동하기 위해 주사위를 던지면 올바른 어댑터를 구성합니다.

# OPTIONAL: SSR only
pnpm astro add cloudflare deno netlify node vercel

다시 말하지만 호스팅 서비스*에 대한 어댑터를 선택하고 기본 SSG(정적 사이트 생성) 모드를 선호하는 경우 이를 건너뜁니다. available adapters and links to docs 의 최신 목록을 가져옵니다.

개발 서버 가동:

pnpm dev

CLI는 브라우저에서 새 앱을 열 수 있도록 링크를 제공합니다. 기본값은 localhost:3000/ 이지만 포트3000가 이미 사용 중인 경우 포트 번호가 다를 수 있습니다.

그게 전부입니다! 아스트로를 처음 접하시는 분들은 Getting Started with Astro Guide for 10 tips to help you hit the ground running 을 확인해보세요.Netlify의 Quick start Astro JS tutorial which even goes into publishing your static Astro site도 참조하십시오.

🙌🏽 새 Astro JS 앱을 만드는 방법: 마무리

이번 포스트에서는 새로운 Astro JS 앱을 생성하는 방법에 대해 알아보았습니다. 특히 다음을 확인했습니다.

pnpm을 사용하여 새 Astro 프로젝트를 만드는 방법,

잠재적으로 개인 정보 보호를 강화하기 위해 원격 측정을 비활성화하는 방법,

Astro 추가를 사용하는 Astro 앱의 일부 자동 구성.

이 게시물이 도움이 되었기를 바랍니다. 아스트로와 함께 하고 있는 일과 향후 프로젝트에 대한 아이디어를 듣고 싶습니다. 또한 위 콘텐츠에 대한 가능한 개선 사항에 대해서도 알려주십시오.

🙏🏽 새 Astro JS 앱을 만드는 방법: 피드백

게시물이 유용했습니까? 대신 다른 주제에 대한 게시물을 보시겠습니까? 새 게시물에 대한 아이디어를 얻으십시오. 또한 내 글쓰기 스타일이 마음에 든다면 컨설팅 기반으로 귀사 사이트에 대한 게시물을 작성할 수 있는지 연락해 주세요. 아래에서 연락 방법을 찾으려면 계속 읽으십시오. 이와 유사한 게시물을 지원하고 몇 달러, 유로 또는 파운드를 절약할 수 있는 경우 consider supporting me through Buy me a Coffee .

마지막으로, 게시물이 유용하다고 생각하는 모든 팔로워를 위해 소셜 미디어 계정에 게시물을 자유롭게 공유하세요. 아래에 댓글을 남기는 것 외에도 Twitter 및 askRodney on Telegram을 통해 연락할 수 있습니다. 또한 further ways to get in touch with Rodney Lab을 참조하십시오. Astro 및 SvelteKit에 정기적으로 게시합니다. 또한 subscribe to the newsletter to keep up-to-date 최신 프로젝트와 함께.