Astro.js 백엔드를 구축하는 방법은 무엇인가요?
Astro.js는 빠르고 최신 웹 애플리케이션을 구축하기 위한 정적 사이트 생성기(SSG) 및 프론트엔드 프레임워크입니다.
빌드 시 정적 HTML, CSS, JavaScript 파일을 미리 렌더링하여 빠르고 가벼운 웹사이트를 구축할 수 있습니다.
기존 SSG와 달리 Astro.js를 사용하면 런타임에 자바스크립트로 정적 페이지에 수분을 공급하여 동적이고 인터랙티브한 웹사이트를 유연하게 만들 수 있습니다.
이 문서에서는 Back4app을 서비스형 백엔드(BaaS)로 사용하여 Astro.js 애플리케이션을 구축하는 방법에 대한 포괄적인 자습서를 제공합니다.
이 문서에서는 Astro.js의 개요, 장점과 한계, Astro.js 애플리케이션을 빌드하고 호스팅하는 방법에 대한 단계별 가이드를 제공합니다.
Astro.js의 장점
Astro.js는 다음과 같은 몇 가지 주요 기능을 통해 최신 웹사이트를 구축할 수 있는 훌륭한 선택입니다:
섬 건축
아일랜드 아키텍처는 웹 페이지를 캡슐화되고 독립적인 기능의 섬으로 나누는 웹 아키텍처의 패턴입니다.
각 섬은 단일 구성 요소, 구성 요소 그룹 또는 전체 페이지로 표시할 수 있습니다.
Astro.js는 사용자 인터페이스(UI)를 “Astro Islands”라고 하는 작고 독립된 구성 요소로 추출합니다. 이 아일랜드는 모든 페이지에서 사용할 수 있으므로 사용하지 않는 JavaScript를 경량 HTML로 대체할 수 있습니다.
아일랜드 아키텍처는 성능 향상, 유연성 증대, 개발 간소화 등 여러 가지 장점이 있습니다.
최소한의 자바스크립트
Astro는 “덜 자바스크립트” 접근 방식을 취합니다. 상호작용을 위해 필요한 경우에만 클라이언트에 JavaScript를 전송합니다. 이를 통해 자바스크립트 번들의 크기를 줄이고 로드 시간을 개선할 수 있습니다.
Astro.js에서 JavaScript를 최소화하면 웹사이트 성능 향상, SEO 개선, 리소스 소비 감소, 보안 강화, 응답성이 뛰어난 사용자 경험 등 여러 가지 실질적인 이점을 얻을 수 있습니다.
이러한 접근 방식은 효율적이고 성능이 뛰어난 웹 애플리케이션을 제공하기에 적합하므로 최신 웹 개발을 위한 강력한 선택이 될 수 있습니다.
인기 있는 프레임워크와 통합
Astro.js는 React, Svelte, Vue, Lit 등 다양한 인기 자바스크립트 프레임워크와 함께 사용할 수 있습니다.
이를 통해 선호하는 도구를 선택하고, 기존 구성 요소와 지식을 재사용하고, 기존 에코시스템을 활용하고, 원활한 개발 프로세스를 유지할 수 있습니다.
이러한 유연성과 호환성으로 인해 Astro.js는 다양한 프로젝트에 매력적인 선택이 될 수 있습니다.
최적화된 로딩
최적화된 로딩은 Astro.js의 핵심 장점입니다. 사용자 경험과 웹사이트 성능 향상에 초점을 맞춰 웹 페이지의 디자인 및 제공 방식을 근본적으로 변화시킵니다.
Astro는 스마트폰과 같은 저전력 기기를 포함한 다양한 기기에 맞게 로딩과 렌더링을 최적화합니다. 사용자의 디바이스나 네트워크 상태에 관계없이 원활한 경험을 제공하는 것을 목표로 합니다.
Astro.js의 제한 사항
Astro.js에는 알아야 할 몇 가지 제한 사항이 있습니다. 다음은 그 중 몇 가지입니다:
에코시스템 호환성
Astro.js는 React, Svelte, Vue.js와 같은 인기 있는 프론트엔드 프레임워크와 함께 작동하도록 설계되었습니다. 그러나 이 프레임워크의 생태계는 React나 Vue와 같은 프레임워크에 비해 덜 성숙되어 있으므로 Astro용으로 명시적으로 구축된 타사 라이브러리 및 컴포넌트가 더 적을 수 있습니다.
프레임워크 친숙도 요구 사항
Astro.js를 사용하면 다양한 프론트엔드 프레임워크를 사용할 수 있으므로 선택한 각 프레임워크에 익숙해야 합니다.
한 가지 프레임워크만 전문적으로 다루거나 웹 개발이 처음인 개발자에게는 이러한 광범위한 지식이 부담스러울 수 있습니다.
여러 프레임워크가 필요한 프로젝트에서 작업하려면 다양한 프레임워크에서 일관성을 유지해야 합니다.
프레임워크마다 고유한 규칙과 모범 사례가 있고 단일 프로젝트 내에서 이를 조화시키면 코드 구조가 파편화될 수 있기 때문에 이는 매우 어려운 작업일 수 있습니다.
최적화 학습
최적화 학습이란 프레임워크로 구축된 웹 애플리케이션의 성능을 극대화하기 위한 구체적인 전략을 이해하고 구현하는 것을 말합니다.
Astro.js는 효율성과 속도를 위해 설계되었지만, 그 기능을 완전히 활용하려면 최적화 기술을 깊이 이해하고 개발 프로세스에서 이를 구현해야 합니다. 이는 복잡하고 고급 지식이 필요할 수 있습니다.
저널 애플리케이션 구축
이 튜토리얼에서는 React.js와 함께 Astro.js 프레임워크를 사용하여 기본 저널 애플리케이션을 빌드합니다.
저널 애플리케이션은 CRUD(생성, 읽기, 업데이트, 삭제) 기능을 제공하고 데이터 저장 및 검색을 위해 Back4app을 사용합니다.
터미널에서 다음 명령을 실행하여 Astro.js 프로젝트를 만들 수 있습니다:
npm create astro@latest
위의 명령은 기본 Astro.js 프로젝트를 생성하고 TypeScript 사용 및 엄격성 수준과 같은 측면을 포함하여 애플리케이션을 구성하는 과정을 안내합니다.
Astro.js 프로젝트에 React.js를 추가하려면 터미널에서 다음 명령을 실행하세요:
npx astro add react
이제 프로젝트가 준비되었습니다. 선호하는 IDE로 애플리케이션 개발을 시작할 수 있습니다. 먼저 애플리케이션의 글로벌 스타일과 레이아웃을 정의합니다.
글로벌 스타일을 정의하려면 src 디렉터리 내에 스타일 폴더를 만듭니다. 스타일 폴더 안에 global.css라는 파일을 만들고 여기에 전역 스타일을 정의합니다.
이렇게요:
글로벌 스타일을 설정했으면 이제 레이아웃을 정의할 차례입니다. src 디렉터리의 레이아웃 폴더에 레이아웃.astro 파일을 찾을 수 있습니다.
Layout.astro 파일의 기존 코드를 다음 코드 블록으로 바꿉니다:
위의 코드 블록은 레이아웃 컴포넌트를 나타냅니다. 글로벌 스타일을 가져오고 메타데이터를 설정하며 슬롯 요소를 사용하여 동적 콘텐츠를 위한 플레이스홀더를 제공합니다.
구성 요소의 주요 콘텐츠는 스타일 태그에 정의된 특정 스타일링이 포함된 h1 제목입니다.
페이지에 레이아웃 및 전역 스타일을 적용하려면 레이아웃 컴포넌트를 페이지 파일로 가져온 다음 레이아웃 컴포넌트 내에 HTML 섹션을 둘러싸세요.
홈페이지에 레이아웃을 적용하려면 src/pages 디렉토리에 있는 index.astro 파일에서 동일한 단계를 따르세요.
이렇게요:
이 코드 블록은 애플리케이션의 홈페이지를 정의합니다. “/journal ” 페이지로 연결되는 링크가 있는 탐색 메뉴를 정의하고 특정 스타일을 적용하여 탐색 요소의 중앙과 공백을 지정합니다.
저널 페이지를 만들려면 src/pages 디렉터리 내에 journal.astro라는 파일을 만들고 다음 코드 블록을 파일에 포함하세요.
위의 코드 블록은 애플리케이션의 저널 페이지를 나타냅니다. 레이아웃 컴포넌트를 가져오고 일관된 페이지 구조를 제공하기 위해 HTML 섹션을 래핑합니다.
이 코드는 또한 제목과 본문에 대한 입력 필드와 “로그” 버튼을 갖춘 저널 항목을 캡처하기 위한 양식을 정의합니다. 스타일 태그에 정의된 CSS 스타일은 양식과 그 요소의 모양을 제어합니다.
웹 브라우저에서 애플리케이션을 시작하려면 애플리케이션의 개발 서버를 시작합니다. 터미널에서 프로젝트의 디렉토리로 이동하여 다음 명령을 실행하여 개발 서버를 시작합니다.
npm run dev
위의 명령을 실행하면 http://localhost:4321/ 링크가 제공됩니다 . 웹 브라우저에서 이 링크로 이동하여 애플리케이션을 확인합니다.
홈페이지는 다음과 같은 모습이어야 합니다:
저널 페이지를 보려면 탐색 링크 “경험 기록”을 클릭합니다 .
Back4app과 애플리케이션 통합
Back4App은 애플리케이션의 개발 및 관리를 간소화하도록 설계된 클라우드 기반 백엔드 서비스 플랫폼으로, Back4app을 Astro.js 백엔드로 사용할 것입니다.
오픈 소스 Parse Server 프레임워크를 활용하여 개발자가 백엔드의 복잡성을 간소화하면서 프론트엔드 개발에 집중할 수 있는 강력한 도구 모음을 제공합니다.
Back4App은 데이터 저장, 사용자 인증, 실시간 데이터베이스 등 최신 앱 개발에 필수적인 기능을 핵심적으로 제공합니다.
따라서 인터랙티브하고 역동적인 사용자 경험을 만드는 데 유용합니다. 이 플랫폼은 다양한 프로그래밍 언어와 프레임워크를 지원하여 다양한 개발 요구 사항을 충족합니다.
Back4app 계정 만들기
백4앱이 제공하는 기능을 애플리케이션에 통합하려면 백4앱 계정이 있어야 합니다. 다음의 간단한 단계를 따라 계정을 만들 수 있습니다:
- Back4app 웹사이트를 방문하세요.
- ‘가입하기 ‘ 버튼을 클릭합니다.
- 가입 양식을 작성하여 제출하세요.
Back4app ChatGPT 플러그인 소개
Back4app은 최근 개발자 및 비전문가가 Back4app 애플리케이션을 만들고 상호 작용할 수 있도록 ChatGPT 플러그인을 도입했습니다.
Back4app ChatGPT 플러그인을 사용하면 대화를 실제 애플리케이션으로 변환할 수 있습니다. 즉, 상호 작용하기 전에 Back4app 플랫폼에 대한 경험이 필요하지 않습니다.
ChatGPT 플러그인에 액세스하려면 ChatGPT Plus에 가입해야 합니다. 구독한 후 “GPT-4 ” 버튼을 클릭하면 팝업 메뉴가 표시됩니다. 계속하려면 “플러그인” 옵션을 선택합니다.
사용 가능한 플러그인 목록이 화면에 표시됩니다. Back4app 플러그인을 찾아 선택합니다(검색창에 ‘Back4app’을 입력).
플러그인을 사용하여 Back4app 애플리케이션 만들기
ChatGPT에서 백4앱 플러그인을 사용하여 백4앱 애플리케이션을 만드는 것은 간단한 작업입니다. 만들고자 하는 애플리케이션의 유형을 ChatGPT에 알려주면 나머지는 자동으로 처리됩니다.
예를 들어
위 이미지에서 볼 수 있듯이 Back4app ChatGPT 플러그인은 “저널 애플리케이션”이라는 이름의 Back4app 애플리케이션을 생성합니다.
Back4app ChatGPT 플러그인이 애플리케이션을 성공적으로 만들었는지 확인하려면 Back4app 웹사이트로 이동하여 계정에 로그인하고 앱을 확인합니다. 애플리케이션 중에서 “저널 애플리케이션” 이라는 이름의 애플리케이션을 찾을 수 있을 것입니다.
플러그인을 사용하여 저널 애플리케이션에서 저널 클래스를 만듭니다.
위 이미지에서 볼 수 있듯이 Back4app ChatGPT 플러그인은 저널 클래스를 생성하고 제목, 콘텐츠 및 날짜 필드를 추가합니다.
Back4app 애플리케이션에 데이터 추가
Back4app ChatGPT 플러그인을 사용하면 애플리케이션에 사용자 지정 데이터를 추가할 수도 있습니다. 예를 들어 제목 및 콘텐츠 필드에 사용자 지정 텍스트를 추가할 수 있습니다.
텍스트를 추가한 후 애플리케이션 대시보드로 이동하여 저널 클래스를 클릭하고 텍스트가 추가되었는지 확인합니다.
Back4app에 연결
저널 앱을 Back4app 애플리케이션에 연결하려면 애플리케이션에 Parse JavaScript SDK를 설치해야 합니다.
이렇게 하려면 터미널에서 다음 명령을 실행합니다:
npm install parse
자바스크립트 구문 분석 SDK를 설치한 후에는 애플리케이션 ID와 자바스크립트 키 자격 증명이 필요합니다.
이러한 자격 증명은 Back4app 앱 대시보드의 보안 및 키 섹션에서 찾을 수 있습니다. 애플리케이션 ID와 자바스크립트 키를 애플리케이션에 안전하게 저장하세요.
애플리케이션에서 Back4app에 데이터 추가하기
이 글의 앞부분에서 Back4app ChatGPT 플러그인을 사용하여 Back4app에 데이터를 추가하는 방법을 배웠습니다. 저널 애플리케이션 애플리케이션을 사용하여 이 작업을 수행하려면 Parse Javascript SDK를 활용합니다.
journal.astro 파일에 아래 코드 블록을 추가합니다:
이 코드 블록은 Parse와 통합되어 저널 항목을 만들고 저장하는 JavaScript 스크립트를 나타냅니다. 이 스크립트는 parse/dist/parse.min.js에서 축소된 버전의 Parse를 가져와서 초기화 메서드를 호출합니다.
이 메서드는 Application_ID 및 Javascript_KEY 자격 증명을 인수로 받습니다. Parse에서 초기화 메서드를 호출한 후 Parse의 serverURL 속성을 https://parseapi.back4app.com/ 로 설정합니다.
이 코드는 DOM에서 입력, 텍스트 영역 및 버튼 요소를 선택하여 제목, 본문 및 버튼 변수에 할당합니다.
입력 필드에는 저널 항목의 제목이 입력되고 텍스트 영역 필드에는 저널 항목의 본문이 입력됩니다.
addJournal 함수에는 Back4app 데이터베이스에 데이터를 추가하는 데 필요한 로직이 포함되어 있습니다. 저널 객체의 새 인스턴스를 생성하고 제목 및 콘텐츠 속성을 입력 및 텍스트 영역 요소의 값으로 설정한 다음 백4앱에 저장합니다.
추가 이벤트 리스너 메서드를 사용하면 코드가 버튼에 이벤트 리스너를 추가하여 버튼을 클릭하면 addJournal 함수가 트리거되도록 합니다.
Back4app에서 데이터 가져오기
Back4app에서 데이터를 가져와 애플리케이션에 표시하려면 React 컴포넌트를 활용합니다. src/components 디렉토리에 Journal.tsx 파일을 생성합니다. 파일에서 Parse 라이브러리를 가져와 초기화합니다.
이렇게요:
그런 다음 컴포넌트의 JSX 요소를 정의합니다:
다음으로 저널 상태를 만들고 Back4app에서 데이터를 가져오는 로직이 포함된 함수를 정의합니다.
이렇게요:
Parse.Query 메서드를 사용하면 fetchJournal 함수는 Parse SDK를 사용하여 Journal 클래스에서 데이터를 검색하는 쿼리를 구성합니다.
쿼리 객체의 find 메서드는 쿼리 결과가 포함된 배열을 반환하고, setJournal 함수는 검색된 데이터로 저널 상태를 업데이트합니다.
이 코드는 useEffect 훅을 사용하여 컴포넌트에서 부수 효과를 실행합니다. 컴포넌트가 마운트될 때 fetchJournal을 호출하여 데이터를 가져옵니다. 이제 컴포넌트에서 저널 상태의 내용을 표시합니다.
이렇게요:
위의 코드 블록은 저널 항목 목록을 각각 특정 콘텐츠와 전용 ‘삭제’ 버튼이 있는 DIV 요소 모음으로 렌더링합니다.
h3 및 p 태그 안에 각 저널 항목의 제목과 내용이 표시되며 사용자가 항목을 쉽게 삭제할 수 있도록 ‘삭제’ 버튼이 있습니다.
저널 컴포넌트에 정의된 JSX 요소의 스타일을 지정하려면 global.css 파일에 다음 스타일을 추가합니다:
이제 홈 페이지에 저널 구성 요소를 표시합니다. 이렇게 하려면 index.astro 파일의 기존 코드를 아래 코드 블록으로 바꿉니다:
이 코드 블록은 저널 컴포넌트를 가져와서 렌더링합니다. 클라이언트:로드 지시문은 페이지 로드 시 저널 컴포넌트가 즉시 로드되도록 하여 원활하고 반응이 빠른 사용자 경험을 제공합니다.
Back4app에서 데이터 삭제
애플리케이션의 삭제 버튼이 모든 항목과 함께 작동하도록 하려면 선택한 항목을 삭제하는 함수를 정의해야 합니다. 그런 다음 클릭 이벤트를 사용하여 이 함수를 삭제 버튼에 바인딩합니다.
이렇게요:
deleteJournal 함수는 Parse.Object.extend 메서드를 사용하여 저널 객체의 새 인스턴스를 만듭니다. 객체를 생성한 후 객체의 id 속성을 함수에 전달된 id 매개변수로 설정합니다.
다음으로, 이 함수는 ‘저널’ 개체의 비동기 삭제 메서드를 호출하여 백4앱에서 지정된 ID를 가진 저널 항목을 삭제합니다.
필터 메서드를 사용하면 이 함수는 저널 상태에서 지정된 ID를 가진 저널 항목을 필터링하여 삭제된 항목을 제외한 새 배열을 만듭니다.
마지막으로 setJournal 메서드를 사용하면 함수가 이 새 배열로 저널 상태를 업데이트합니다.
이제 클릭 이벤트 핸들러를 사용하여 deleteJournal 함수를 "삭제" 버튼에 바인딩합니다. 이렇게 하면 Journal.tsx 파일의 JSX 요소가 다음과 같이 표시됩니다:
애플리케이션 테스트
애플리케이션 빌드가 완료되었으므로 이제 애플리케이션을 테스트하는 것이 중요합니다. 이렇게 하려면 터미널로 이동하여 개발 서버를 실행하고 웹 브라우저에서 애플리케이션을 확인합니다.
애플리케이션은 다음과 같은 모습이어야 합니다:
‘경험 기록하기 ‘를 클릭하여 애플리케이션의 저널 페이지로 이동한 후 입력란을 채우세요.
입력 필드를 채운 후 로그를 클릭하여 데이터를 Back4app 데이터베이스에 추가합니다. 홈 페이지로 돌아갑니다.
이제 항목을 삭제할 수 있는지 테스트하려면 ‘나의 첫날 일기’ 항목의 삭제 버튼을 클릭합니다. 이제 홈 페이지가 아래 이미지와 같이 보일 것입니다.
결론
이 글에서는 Astro.js 프레임워크의 장점과 잠재적인 단점을 살펴보았습니다. React 라이브러리와 원활하게 통합된 Astro 애플리케이션을 구축하는 방법을 배웠습니다.
Astro.js는 간단한 랜딩 페이지부터 복잡한 웹 애플리케이션까지 다양한 웹사이트를 구축하는 데 탁월한 선택입니다. 특히 빠르고 가벼우며 확장성이 필요한 웹사이트에 적합합니다.
자세한 내용은 Astro.js용 백엔드를 만드는 방법 튜토리얼을 참조하세요.
