astro 새 Astro JS 앱을 만드는 방법: 치트시트 이 게시물에서 새 Astro JS 앱을 만드는 방법을 알아봅니다. 이것은 Astro를 처음 사용하고 시작하려는 경우와 노련한 우주 비행사이지만 스핀업 명령을 기억할 수 없는 경우에도 동일하게 유용합니다. 기본 Astro 프로젝트에 대한 명령이 포함된 치트 시트를 받고 보너스로 CI 도구를 추가하는 방법도 살펴봅니다. 페이지 아래에서 연락처 세부 정보를 찾을 수 있습니다. 새 Astro JS ... nodeastrojavascriptwebdev Astro에 Vue 3를 설치하는 방법 이 섹션에서는 Astro에 vue 3을 설치합니다. 이 Astro 통합은 Vue 3 구성 요소에 대한 서버 측 렌더링 및 클라이언트 측 수화를 가능하게 합니다. css의 경우 astro가 Tailwind CSS를 쉽게 통합할 수 있으므로 Tailwind CSS를 사용합니다. 도구 사용 아스트로 Tailwind CSS(@astrojs/tailwind) 뷰 3(@astrojs/vue) 아스트로 ... astrotailwindcsswebdevvue CSS 변수를 통해 Astro 웹사이트의 다크 모드 활성화 많은 대형 웹사이트와 애플리케이션은 종종 CSS 변수를 사용하여 수행되는 자체 버전을 개발하고 있습니다. 이 게시물에서는 먼저 CSS를 사용한 다음 JavaScript 토글을 사용하여 웹 사이트에 다크 모드 지원을 추가하는 방법을 살펴보겠습니다. 계속해서 에서 Astro 스타터를 포크하는 것이 좋습니다. 선택한 템플릿을 선택한 다음 에서 템플릿을 열면 필요한 종속성이 자동으로 처리됩니다. 구... cssjavascriptwebdevastro Firebase에 Astro 배포 Astro는 UI를 더 작은 구성 요소로 추출하고 사용하지 않는 자바스크립트를 HTML로 대체하여 이를 달성합니다. 따라서 Javascript가 적을수록 로드 속도가 빨라지고 대화식 시간(TTI 점수)이 향상됩니다. 따라서 앱 빌드를 시작하고 무료로 호스팅할 수 있습니다. 버전 제어를 위해 GitHub를 사용하는 경우 GitHub 작업도 구성할 수 있습니다. Firebase 설정에는 Gith... javascriptastrotypescriptfirebase 마크다운 파일의 모든 단어 세기 ~ Astro 이제 이 있으므로 Astro 웹 사이트에 이 기능을 추가하는 방법을 살펴보겠습니다. 이전 Astro 기사를 팔로우했다면 을 가져오는 함수를 이미 작성했습니다. 위 기사에서 설명한 방법은 기사당 단어 수를 사용하여 대략적인 읽기 시간을 검색했습니다. 이 방법은 공백을 기반으로 문자열을 제거하며 이는 CLI 스크립트에서 본 것과 다를 수 있습니다. 이 방법은 HTML 태그 내부의 모든 항목도 계... webdevastromarkdownprogramming 아스트로로 미니멀한 블로그 템플릿을 만들었습니다. 자유롭게 복제하고 별표 표시하세요 ... 100% 무료입니다 안녕하세요 여러분, 저는 Astro를 사용하는 방법을 배우는 동시에 모든 사람이 즐길 수 있도록 무료 템플릿을 만들고 있습니다. 질문이 있으시면 언제든지 Twitter에서 저에게 연락하십시오: Astro로 래핑되지 않은 최소 블로그 템플릿 # 미리보기: # 래핑되지 않은 최소 블로그 템플릿. 기능: ✅ 표준 URL 및 OpenGraph 데이터를 사용한 SEO 친화적 설정 ✅ 전체 마크다운 지... astrotailwindcsswebdev GitHub 페이지에 Astro 사이트를 배포하는 방법 GitHub Pages는 이제 사용자 지정 가능한 GitHub Action 워크플로를 사용하여 개발자가 제작 프레임워크 및 배포를 제어할 수 있도록 코드를 빌드 및 배포합니다. GitHub Pages는 다음과 같은 이유로 정적 콘텐츠를 저장하기 위한 강력한 옵션입니다. GitHub Pages는 https://YOUR_USER_NAME.github.io/와 같은 기본 도메인 이름과 함께 제공되... tutorialreactastrogithub Typescript를 사용하여 Astro에 Tailwind CSS 설치 이 섹션에서는 Tailwind CSS 3과 함께 Astro + Typescript를 설치 및 설정합니다. 이 섹션에서는 을 사용하여 CLI가 tailwindcss-ready 프로젝트를 스캐폴딩하는 데 도움이 됩니다. Astro는 빠르고 콘텐츠 중심의 웹사이트를 구축하기 위한 올인원 웹 프레임워크입니다. 특징 Astro 1.Component Islands: 더 빠른 웹사이트 구축을 위한 새로운... typescripttailwindcssastrowebdev React 구성 요소를 추가하는 Astro 1.0 나는 과거에 의 공평한 몫을 썼지 만 Astro 1.0 출시 이후 몇 가지 사항이 변경되었습니다. 이 기사에서는 Astro에서 React 구성 요소를 실행하는 방법을 살펴보겠습니다. Astro의 최소 시작 팩을 사용해 봅시다. 폴더가 설치되면 최소 스타터를 설치할 수 있습니다. 계속해서 렌더링된 React를 추가해 봅시다. 이렇게 하면 React와 렌더링 및 필요한 구성이 Astro 구성 파... astroreact Astro에서 여러 프레임워크 실행 이전 기사에서는 에 대해 살펴보았습니다. 오늘은 Astro에서 여러 프레임워크를 동시에 실행할 수 있는 방법을 살펴보겠습니다. 프레임워크를 자유롭게 혼합하고 일치시킬 수 있기 때문에 이것은 진정한 초강력입니다. 이전 기사를 시작점으로 삼겠습니다. 기술적으로 모든 프레임워크를 선택할 수 있습니다. 이 경우 Vue를 사용하겠습니다. 가장 먼저 해야 할 일은 새 프레임워크를 설치하는 것입니다. V... beginnersastrowebdev Astro로 프레임워크 간 상태 공유 아스트로는 아일랜드 아키텍처로 설정되어 있고 동시에 실행 도 가능하기 때문에 상태 관리가 좀 어렵습니다. 예를 들어 React 또는 Vue에서와 같이 컨텍스트에만 의존할 수는 없습니다. 이것은 Nano Stores가 매우 편리한 곳입니다. 나는 그들에 대해 읽은 이후로 그들을 시험해보고 싶었습니다. 이 기사에서는 React와 Vue 구성 요소 간에 상태를 공유하는 방법을 살펴봅니다. 이 문서... astrojamstack 아스트로나노 매장 지도 이전 기사에서 우리는 먼저 과 이들이 프레임워크 간에 상태를 동기화할 수 있는 방법을 소개했습니다. 이 기사에서는 이러한 Nano Store에 대해 자세히 알아보고 특히 지도를 살펴보겠습니다. 맵은 키 값을 유지하려는 개체를 저장하는 데 사용할 수 있는 일종의 저장소입니다. 그런 다음 이 키를 사용하여 스토어의 기존 항목을 업데이트할 수 있습니다. 예제를 만들어 봅시다. 지도가 어떻게 작동하... beginnersastrojavascriptwebdev 계산된 나노 저장소 이제 을 살펴보았으므로 다음 요소인 계산된 저장소를 살펴보겠습니다. 계산된 저장소는 초기 정적 저장소를 가져와 일부 컴퓨팅을 수행할 수 있습니다. 두 개의 다른 저장소에서 계산할 수도 있습니다. 이 문서를 따르려면 이 문서 를 시작점으로 사용하세요. 가장 먼저 할 일은 기본이라는 색상 개체에 새 값을 추가하는 것입니다. 이를 사용하여 색상이 기본 색상인지 확인할 수 있습니다. src/stor... beginnersastrojavascriptwebdev Cloudflare 작업자의 Astro 이 두 가지를 결합하고 광고에 뛰어들어 Astro용 Cloudflare Worker 어댑터를 만들기에 더할 나위 없이 좋은 때입니다. 서비스 작업자와 매우 유사한 환경인 Cloudflare 작업자용 Astro 어댑터를 만들 수 있다면 서비스 작업자에서 Astro를 실행할 수 없는 이유는 무엇입니까? 새로운 랭글러 CLI 및 Cloudflare Worker 어댑터: 이제 다음을 실행하여 프로젝... cloudflareastrowrangler Astro + React + Tailwind CSS 설치 이 섹션에서는 Astro에 ReactJS를 설치합니다. Astro는 빠르고 콘텐츠 중심의 웹사이트를 구축하기 위한 올인원 웹 프레임워크입니다. Astro는 reactjs도 지원합니다. UI에는 astro가 Tailwind CSS를 쉽게 통합할 수 있으므로 Tailwind CSS를 사용합니다. 도구 사용 아스트로 Tailwind CSS(@astrojs/tailwind) 반응(@astrojs/반... tailwindcssreactastrowebdev pagefind를 사용하여 정적 사이트에 검색 추가 이 기사에서는 astro 사이트에 pagefind를 추가하는 방법에 대해 설명합니다. 이 코드는 관심 있는 사람들을 위해 이 github 저장소에서 액세스할 수 있습니다. pagefind의 경우 다음 명령으로 설치할 수 있습니다. 그런 다음 package.json 파일에서 정적 사이트가 구축된 후 검색을 생성하는지 확인하십시오. 그런 다음 다음 명령을 실행하여 사이트에서 콘텐츠를 검색할 수 ... astropagefind 다양한 YouTube 동영상에 nlp를 적용한 방법 처음에는 assemblyai를 사용하여 직접 YouTube 비디오에서 대본을 추출하려고 했지만 Google은 매우 발전하여 자동으로 대본을 제공하기 시작했습니다. 이전에 가지고 있던 레거시 프로젝트( )는 대본 페이지를 생성하기 위해 jinja2를 사용하고 있었으며 범주별로 비디오를 그룹화하거나 toc이 없었습니다. 내 최신 반복 은 모든 종류의 미디어(주로 YouTube 비디오)를 가져와서... astropythonnlp @storyblok/astro 발표 의 출시를 발표하게 되어 매우 기쁩니다! Astro 프로젝트에서 Storyblok을 사용하는 것이 이제 이전보다 훨씬 쉽고 빠릅니다. 강력한 및 새로운 모듈 덕분에 몇 분 만에 시작하고 실행할 수 있습니다. 다음 코드를 astro.config.mjs에 추가하고 accessToken를 Storyblok 공간의 미리 보기 API 토큰으로 바꿉니다. 이후부터는 아래와 같이 StoryblokComp... astroopensourceintegrationsdk Astrojs 및 tailwindCSS로 테마 토글 버튼 빌드 그들은 이 철학을 사용하여 번들 크기를 줄이고 브라우저의 첫 번째 페인트 속도를 높이지만 블로그에서 어두운 테마 버튼을 토글하는 것과 같이 개발자에게 많은 새로운 과제를 안겨줍니다. 이런 식으로 TailwindCSS는 현재 테마가 무엇인지 인식할 수 있습니다. 그러나 Context API의 사용을 유지하려면 아래와 같이 작성해야 할 수 있습니다. 그러나 이런 식으로 주입되어 우리가 원하는 것... astrowebdevtailwindcssjavascript ¿Qué es Astro y cómo empezar? La tecnología evoluciona todos los días, siempre hay algo nuevo y esta vez es Astro! Esta tecnología esta siendo muy bien aceptada en la comunidad, ya tiene más de ⭐ 3k estrellas en GitHub. Astro: “Un nuevo tipo de cread... webdevastronewsjavascript 저희가 Astro에 대한 체험. 만약 당신이 이미 을 알고 있다면, 당신은 을 선택할 수 있습니다. Build your pages in .astro files (very close to HTML/JSX) and sparkle them with React/Vue/Preact/Svelte components. 즉시 사용할 수 있습니다. 에서 astro 구성 요소에 필요한 위치에 <style> 표시를 하고 <link ref="s... webdevastrojavascript
새 Astro JS 앱을 만드는 방법: 치트시트 이 게시물에서 새 Astro JS 앱을 만드는 방법을 알아봅니다. 이것은 Astro를 처음 사용하고 시작하려는 경우와 노련한 우주 비행사이지만 스핀업 명령을 기억할 수 없는 경우에도 동일하게 유용합니다. 기본 Astro 프로젝트에 대한 명령이 포함된 치트 시트를 받고 보너스로 CI 도구를 추가하는 방법도 살펴봅니다. 페이지 아래에서 연락처 세부 정보를 찾을 수 있습니다. 새 Astro JS ... nodeastrojavascriptwebdev Astro에 Vue 3를 설치하는 방법 이 섹션에서는 Astro에 vue 3을 설치합니다. 이 Astro 통합은 Vue 3 구성 요소에 대한 서버 측 렌더링 및 클라이언트 측 수화를 가능하게 합니다. css의 경우 astro가 Tailwind CSS를 쉽게 통합할 수 있으므로 Tailwind CSS를 사용합니다. 도구 사용 아스트로 Tailwind CSS(@astrojs/tailwind) 뷰 3(@astrojs/vue) 아스트로 ... astrotailwindcsswebdevvue CSS 변수를 통해 Astro 웹사이트의 다크 모드 활성화 많은 대형 웹사이트와 애플리케이션은 종종 CSS 변수를 사용하여 수행되는 자체 버전을 개발하고 있습니다. 이 게시물에서는 먼저 CSS를 사용한 다음 JavaScript 토글을 사용하여 웹 사이트에 다크 모드 지원을 추가하는 방법을 살펴보겠습니다. 계속해서 에서 Astro 스타터를 포크하는 것이 좋습니다. 선택한 템플릿을 선택한 다음 에서 템플릿을 열면 필요한 종속성이 자동으로 처리됩니다. 구... cssjavascriptwebdevastro Firebase에 Astro 배포 Astro는 UI를 더 작은 구성 요소로 추출하고 사용하지 않는 자바스크립트를 HTML로 대체하여 이를 달성합니다. 따라서 Javascript가 적을수록 로드 속도가 빨라지고 대화식 시간(TTI 점수)이 향상됩니다. 따라서 앱 빌드를 시작하고 무료로 호스팅할 수 있습니다. 버전 제어를 위해 GitHub를 사용하는 경우 GitHub 작업도 구성할 수 있습니다. Firebase 설정에는 Gith... javascriptastrotypescriptfirebase 마크다운 파일의 모든 단어 세기 ~ Astro 이제 이 있으므로 Astro 웹 사이트에 이 기능을 추가하는 방법을 살펴보겠습니다. 이전 Astro 기사를 팔로우했다면 을 가져오는 함수를 이미 작성했습니다. 위 기사에서 설명한 방법은 기사당 단어 수를 사용하여 대략적인 읽기 시간을 검색했습니다. 이 방법은 공백을 기반으로 문자열을 제거하며 이는 CLI 스크립트에서 본 것과 다를 수 있습니다. 이 방법은 HTML 태그 내부의 모든 항목도 계... webdevastromarkdownprogramming 아스트로로 미니멀한 블로그 템플릿을 만들었습니다. 자유롭게 복제하고 별표 표시하세요 ... 100% 무료입니다 안녕하세요 여러분, 저는 Astro를 사용하는 방법을 배우는 동시에 모든 사람이 즐길 수 있도록 무료 템플릿을 만들고 있습니다. 질문이 있으시면 언제든지 Twitter에서 저에게 연락하십시오: Astro로 래핑되지 않은 최소 블로그 템플릿 # 미리보기: # 래핑되지 않은 최소 블로그 템플릿. 기능: ✅ 표준 URL 및 OpenGraph 데이터를 사용한 SEO 친화적 설정 ✅ 전체 마크다운 지... astrotailwindcsswebdev GitHub 페이지에 Astro 사이트를 배포하는 방법 GitHub Pages는 이제 사용자 지정 가능한 GitHub Action 워크플로를 사용하여 개발자가 제작 프레임워크 및 배포를 제어할 수 있도록 코드를 빌드 및 배포합니다. GitHub Pages는 다음과 같은 이유로 정적 콘텐츠를 저장하기 위한 강력한 옵션입니다. GitHub Pages는 https://YOUR_USER_NAME.github.io/와 같은 기본 도메인 이름과 함께 제공되... tutorialreactastrogithub Typescript를 사용하여 Astro에 Tailwind CSS 설치 이 섹션에서는 Tailwind CSS 3과 함께 Astro + Typescript를 설치 및 설정합니다. 이 섹션에서는 을 사용하여 CLI가 tailwindcss-ready 프로젝트를 스캐폴딩하는 데 도움이 됩니다. Astro는 빠르고 콘텐츠 중심의 웹사이트를 구축하기 위한 올인원 웹 프레임워크입니다. 특징 Astro 1.Component Islands: 더 빠른 웹사이트 구축을 위한 새로운... typescripttailwindcssastrowebdev React 구성 요소를 추가하는 Astro 1.0 나는 과거에 의 공평한 몫을 썼지 만 Astro 1.0 출시 이후 몇 가지 사항이 변경되었습니다. 이 기사에서는 Astro에서 React 구성 요소를 실행하는 방법을 살펴보겠습니다. Astro의 최소 시작 팩을 사용해 봅시다. 폴더가 설치되면 최소 스타터를 설치할 수 있습니다. 계속해서 렌더링된 React를 추가해 봅시다. 이렇게 하면 React와 렌더링 및 필요한 구성이 Astro 구성 파... astroreact Astro에서 여러 프레임워크 실행 이전 기사에서는 에 대해 살펴보았습니다. 오늘은 Astro에서 여러 프레임워크를 동시에 실행할 수 있는 방법을 살펴보겠습니다. 프레임워크를 자유롭게 혼합하고 일치시킬 수 있기 때문에 이것은 진정한 초강력입니다. 이전 기사를 시작점으로 삼겠습니다. 기술적으로 모든 프레임워크를 선택할 수 있습니다. 이 경우 Vue를 사용하겠습니다. 가장 먼저 해야 할 일은 새 프레임워크를 설치하는 것입니다. V... beginnersastrowebdev Astro로 프레임워크 간 상태 공유 아스트로는 아일랜드 아키텍처로 설정되어 있고 동시에 실행 도 가능하기 때문에 상태 관리가 좀 어렵습니다. 예를 들어 React 또는 Vue에서와 같이 컨텍스트에만 의존할 수는 없습니다. 이것은 Nano Stores가 매우 편리한 곳입니다. 나는 그들에 대해 읽은 이후로 그들을 시험해보고 싶었습니다. 이 기사에서는 React와 Vue 구성 요소 간에 상태를 공유하는 방법을 살펴봅니다. 이 문서... astrojamstack 아스트로나노 매장 지도 이전 기사에서 우리는 먼저 과 이들이 프레임워크 간에 상태를 동기화할 수 있는 방법을 소개했습니다. 이 기사에서는 이러한 Nano Store에 대해 자세히 알아보고 특히 지도를 살펴보겠습니다. 맵은 키 값을 유지하려는 개체를 저장하는 데 사용할 수 있는 일종의 저장소입니다. 그런 다음 이 키를 사용하여 스토어의 기존 항목을 업데이트할 수 있습니다. 예제를 만들어 봅시다. 지도가 어떻게 작동하... beginnersastrojavascriptwebdev 계산된 나노 저장소 이제 을 살펴보았으므로 다음 요소인 계산된 저장소를 살펴보겠습니다. 계산된 저장소는 초기 정적 저장소를 가져와 일부 컴퓨팅을 수행할 수 있습니다. 두 개의 다른 저장소에서 계산할 수도 있습니다. 이 문서를 따르려면 이 문서 를 시작점으로 사용하세요. 가장 먼저 할 일은 기본이라는 색상 개체에 새 값을 추가하는 것입니다. 이를 사용하여 색상이 기본 색상인지 확인할 수 있습니다. src/stor... beginnersastrojavascriptwebdev Cloudflare 작업자의 Astro 이 두 가지를 결합하고 광고에 뛰어들어 Astro용 Cloudflare Worker 어댑터를 만들기에 더할 나위 없이 좋은 때입니다. 서비스 작업자와 매우 유사한 환경인 Cloudflare 작업자용 Astro 어댑터를 만들 수 있다면 서비스 작업자에서 Astro를 실행할 수 없는 이유는 무엇입니까? 새로운 랭글러 CLI 및 Cloudflare Worker 어댑터: 이제 다음을 실행하여 프로젝... cloudflareastrowrangler Astro + React + Tailwind CSS 설치 이 섹션에서는 Astro에 ReactJS를 설치합니다. Astro는 빠르고 콘텐츠 중심의 웹사이트를 구축하기 위한 올인원 웹 프레임워크입니다. Astro는 reactjs도 지원합니다. UI에는 astro가 Tailwind CSS를 쉽게 통합할 수 있으므로 Tailwind CSS를 사용합니다. 도구 사용 아스트로 Tailwind CSS(@astrojs/tailwind) 반응(@astrojs/반... tailwindcssreactastrowebdev pagefind를 사용하여 정적 사이트에 검색 추가 이 기사에서는 astro 사이트에 pagefind를 추가하는 방법에 대해 설명합니다. 이 코드는 관심 있는 사람들을 위해 이 github 저장소에서 액세스할 수 있습니다. pagefind의 경우 다음 명령으로 설치할 수 있습니다. 그런 다음 package.json 파일에서 정적 사이트가 구축된 후 검색을 생성하는지 확인하십시오. 그런 다음 다음 명령을 실행하여 사이트에서 콘텐츠를 검색할 수 ... astropagefind 다양한 YouTube 동영상에 nlp를 적용한 방법 처음에는 assemblyai를 사용하여 직접 YouTube 비디오에서 대본을 추출하려고 했지만 Google은 매우 발전하여 자동으로 대본을 제공하기 시작했습니다. 이전에 가지고 있던 레거시 프로젝트( )는 대본 페이지를 생성하기 위해 jinja2를 사용하고 있었으며 범주별로 비디오를 그룹화하거나 toc이 없었습니다. 내 최신 반복 은 모든 종류의 미디어(주로 YouTube 비디오)를 가져와서... astropythonnlp @storyblok/astro 발표 의 출시를 발표하게 되어 매우 기쁩니다! Astro 프로젝트에서 Storyblok을 사용하는 것이 이제 이전보다 훨씬 쉽고 빠릅니다. 강력한 및 새로운 모듈 덕분에 몇 분 만에 시작하고 실행할 수 있습니다. 다음 코드를 astro.config.mjs에 추가하고 accessToken를 Storyblok 공간의 미리 보기 API 토큰으로 바꿉니다. 이후부터는 아래와 같이 StoryblokComp... astroopensourceintegrationsdk Astrojs 및 tailwindCSS로 테마 토글 버튼 빌드 그들은 이 철학을 사용하여 번들 크기를 줄이고 브라우저의 첫 번째 페인트 속도를 높이지만 블로그에서 어두운 테마 버튼을 토글하는 것과 같이 개발자에게 많은 새로운 과제를 안겨줍니다. 이런 식으로 TailwindCSS는 현재 테마가 무엇인지 인식할 수 있습니다. 그러나 Context API의 사용을 유지하려면 아래와 같이 작성해야 할 수 있습니다. 그러나 이런 식으로 주입되어 우리가 원하는 것... astrowebdevtailwindcssjavascript ¿Qué es Astro y cómo empezar? La tecnología evoluciona todos los días, siempre hay algo nuevo y esta vez es Astro! Esta tecnología esta siendo muy bien aceptada en la comunidad, ya tiene más de ⭐ 3k estrellas en GitHub. Astro: “Un nuevo tipo de cread... webdevastronewsjavascript 저희가 Astro에 대한 체험. 만약 당신이 이미 을 알고 있다면, 당신은 을 선택할 수 있습니다. Build your pages in .astro files (very close to HTML/JSX) and sparkle them with React/Vue/Preact/Svelte components. 즉시 사용할 수 있습니다. 에서 astro 구성 요소에 필요한 위치에 <style> 표시를 하고 <link ref="s... webdevastrojavascript