Svelte App Project : Daily Planet의 뉴스 앱 UI 구축

Svelte는 React와 같은 현대 UI 라이브러리와 여러 가지면에서 유사한 새로운 JavaScript UI 라이브러리입니다. 중요한 차이점 중 하나는 가상 Dom의 개념을 사용하지 않는다는 것입니다.

이 튜토리얼에서 슈퍼맨 세계의 가상 신문 인 Daily Planet에서 영감을 얻은 뉴스 애플리케이션을 구축하여 Svelte를 소개합니다. 키 테이크 아웃

svelte는 가상 DOM을 사용하지 않는 새로운 JavaScript UI 라이브러리로 React, Vue 및 Angular와 같은 가장 강력한 프레임 워크보다 빠릅니다. 앱을 구축 할 때 필요한 작업을 개발 시스템의 컴파일 시간 단계로 이동시킵니다. 튜토리얼은 슈퍼맨 월드의 가상 신문 인 데일리 플래닛 (Daily Planet)에서 영감을 얻은 뉴스 애플리케이션 구축에 대한 단계별 안내서를 제공합니다. 여기에는 Svelte 프로젝트 초기화, 로컬 개발 서버 실행 및 최종 번들 구축이 포함됩니다. 튜토리얼은 또한 Svelte 프로젝트를 생성하고 뉴스 엔드 포인트에서 데이터를 가져오고 응용 프로그램에 대한 UI 생성을위한 Degit 도구의 사용을 다룹니다. 응용 프로그램을 개발 한 후 터미널에서 빌드 명령을 실행하여 생산 번들을 생성하고 웹 사이트 및 서버리스 기능을위한 클라우드 플랫폼 인 Zeit을 사용하여 응용 프로그램을 호스팅 할 수 있습니다.

svelte에 대해 svelte는 사용자 인터페이스를 구축하는 새로운 접근 방식을 사용합니다. 브라우저에서 필요한 작업을 수행하는 대신 Svelte는 앱을 구축 할 때 개발 시스템에서 발생하는 컴파일 타임 단계로 이동합니다. 간단히 말해서, 이것은 공식 블로그에 언급 된대로 Svelte의 작동 방식입니다. svelte는 빌드 시간 에서 실행되며, 구성 요소를 DOM을 외과 적으로 업데이트하는 매우 효율적인 명령

코드로 변환합니다. 결과적으로 우수한 성능 특성으로 야심 찬 응용 프로그램을 작성할 수 있습니다.
svelte는 가상 DOM을 사용하지 않고 변경되는 부품 만 외과 적으로 업데이트하기 때문에 가장 강력한 프레임 워크 (React, Vue 및 Angular)보다 빠릅니다.
• . 우리는 Svelte 구성 요소와 같은 기본 개념과 데이터 배열을 가져오고 반복하는 방법에 대해 배우게됩니다. 또한 Svelte 프로젝트를 초기화하고 로컬 개발 서버를 실행하고 최종 번들을 구축하는 방법을 배웁니다. 전제 조건 몇 가지 전제 조건이 있어야하므로 다음과 같이이 튜토리얼을 편안하게 따라갈 수 있습니다.
HTML, CSS 및 JavaScript (es6), 에 대한 친숙 함 node.js 및 npm은 개발 기계에 설치됩니다
• 우리는 JSON API를 앱의 뉴스 소스로 사용하므로 무료로 계정을 작성하고 API 키를 기록하여 API 키를 가져와야합니다.

  시작하기

  이제, Svelte 프로젝트를 생성하기 위해 Degit 도구를 사용하여 Daily Planet News 응용 프로그램을 구축하겠습니다. 시스템에 전 세계적으로 Degit을 설치하거나 NPX 도구를 사용하여 NPM에서 실행할 수 있습니다. 새 터미널을 열고 다음 명령을 실행하십시오

  다음, 프로젝트 폴더 내부를 탐색하고 다음 명령을 사용하여 개발 서버를 실행하십시오.

  dev 서버는 http : // localhost : 5000 주소에서 듣습니다. 변경 사항을 수행하면 실행중인 앱에 재건되고 라이브로드됩니다. <.> 프로젝트의 main.js 파일을 열면 다음 코드를 찾아야합니다.

  이것은 벨트 앱이 앱이라고하는 루트 구성 요소의 인스턴스를 작성하고 내보내어 부트 스트랩되는 곳입니다. 구성 요소는 대상과 소품 속성을 가진 객체를 가져옵니다.

  대상에는 구성 요소가 장착 될 DOM 요소가 포함되어 있으며 소품에는 앱 구성 요소로 전달하려는 속성이 포함되어 있습니다. 이 경우 world app.svelte 파일을 열면 다음 코드를 찾아야합니다.

  이것은 응용 프로그램의 루트 구성 요소입니다. 다른 모든 구성 요소는 앱의 어린이가됩니다 svelte의 구성 요소는 구성 요소의 모든 JavaScript, 스타일 및 마크 업이 포함 된 소스 파일의 .Svelte 확장자를 사용합니다.

  내보내기 이름; 구문은 이름이라는 구성 요소 소품을 만듭니다. 우리는 변수 보간 ({...})을 사용하여 이름의 이름을 통해 전달되는 값을 표시합니다. 당신은 단순히 svelte 구성 요소를 만들기 위해 익숙한 평범한 오래된 JavaScript, CSS 및 HTML을 사용할 수 있습니다. Svelte는 또한 가변 보간 및 데이터 목록 등을 통한 루핑을 위해 HTML에 일부 템플릿 구문을 추가합니다. 이것은 작은 앱이므로 앱 구성 요소에서 필요한 기능을 간단히 구현할 수 있습니다. <script> 태그에서 "svelte"에서 onMount () 메소드를 가져 와서 News API 키, 가져온 뉴스 기사 및 데이터를 제공하는 엔드 포인트를 보유 할 API_Key, 기사 및 URL 변수를 정의합니다. 🎜> <pre >npx degit sveltejs/template dailyplanetnews <is> onmount는 수명주기 방법입니다. 공식 튜토리얼이 그것에 대해 말하는 내용은 다음과 같습니다 <p> <has> 모든 구성 요소에는 라이프 사이클 <pre ><span >cd dailyplanetnews <span >npm run dev 가 생성 될 때 시작하여 파괴 될 때 끝납니다. 해당 라이프 사이클 동안 주요 순간에 코드를 실행할 수있는 소수의 기능이 있습니다. 가장 자주 사용하는 것은 Onmount입니다. 구성 요소가 Dom으로 처음 렌더링 된 후 실행됩니다. <’s> 다음, Fetch API를 사용하여 뉴스 엔드 포인트에서 데이터를 가져와 구성 요소가 DOM에 장착 될 때 기사 변수에 기사를 저장합시다. <p> <etch> fetch () 메소드가 JavaScript 약속을 반환하기 때문에 Async/Await 구문을 사용하여 코드를 동기화하고 콜백을 제거 할 수 있습니다. <’s> 다음, 다음 HTML 마크 업을 추가하여 응용 프로그램의 UI를 생성하고 뉴스 데이터를 표시하겠습니다. <each> 우리는 각 블록을 사용하여 뉴스 기사를 통해 루프를 사용하고 각 기사의 제목, 설명, URL 및 URLTOIMAGE를 표시합니다. <log> Daily Planet 로고와 헤드 라인은 DC Comics에서 영감을 얻은이 비영리 뉴스 조직에서 빌려 왔습니다. <use> 우리는 Google 글꼴에서 사용할 수있는 필기 글꼴 인 Kalam을 사용하므로 public/index.html 파일을 열고 다음 태그를 추가하십시오. <pre >npx degit sveltejs/template dailyplanetnews <back back> 다음으로 앱으로 돌아가서 Svelte 파일로 돌아가 다음 스타일을 추가하십시오. <p> <scre> 이것은 데일리 뉴스 앱의 스크린 샷입니다 : <🎜 🎜> <<> <p> <<<> 생산을위한 건물 <🎜 <your> 응용 프로그램을 개발 한 후 터미널에서 빌드 명령을 실행하여 생산 번들을 만들 수 있습니다. <pre ><span >cd dailyplanetnews <span >npm run dev <produce produce> 명령은 선호하는 호스팅 서버에서 호스팅 할 수있는 최소화 및 생산 준비 번들을 생성합니다. <host> 이제 Zeit Now를 사용하여 응용 프로그램을 호스팅하겠습니다 <now now> Zeit은 이제 프로젝트를 .now.sh 또는 개인 도메인에 배포하는 데 사용할 수있는 웹 사이트 및 서버리스 기능을위한 클라우드 플랫폼입니다. <your> 터미널로 돌아가 다음 명령을 실행하여 지금 CLI를 설치하십시오 : <🎜 🎜> <p> <igate> 다음, 다음, 공개 폴더로 이동하여 지금 명령을 실행하십시오 : <p> <!> 그게 다야! 응용 프로그램은 클라우드에 배포됩니다. 이 경우 Public-KyqAB3G5J.now.sh. <🎜 🎜 에서 사용할 수 있습니다 <the>이 GitHub 저장소 에서이 응용 프로그램의 소스 코드를 찾을 수 있습니다. <p> 결론 <🎜 🎜> 이 튜토리얼에서는 Svelte를 사용하여 간단한 뉴스 앱을 만들었습니다. 또한 Svelte가 무엇인지, NPM의 Degit 도구를 사용하여 Svelte 프로젝트를 만드는 방법을 보았습니다. <to> 모든 svelte 기능에 대해 배우기 위해 자세한 자습서를 위해 공식 문서를 참조하십시오.<questions> svelte <🎜 🎜 <h2 >로 뉴스 앱을 구축하는 것에 대한 자주 묻는 질문 (FAQ) <key> 뉴스 앱을 구축하기 위해 svelte를 사용하면 주요 이점은 무엇입니까? <h3 > Svelte는 이해하기 쉬운 JavaScript 코드를 작성할 수있는 최신 JavaScript 컴파일러입니다. 그것은 dom을 직접 조작합니다. 뉴스 앱을 구축 할 때 Svelte는 몇 가지 이점을 제공합니다. 첫째, 더 간단하고 깨끗한 코드를 제공하므로 개발자가 코드를 이해하고 유지 관리 할 수 ​​있습니다. 둘째, Svelte 앱은 성능이 뛰어납니다. Svelte는 빌드 타임에 실행되므로 앱 구성 요소를 DOM을 업데이트하는 매우 효율적인 명령 코드로 변환합니다. 이로 인해로드 시간이 빨라지고 더 부드러운 사용자 경험이 생깁니다. 마지막으로, Svelte는 React 및 Vue와 마찬가지로 구성 요소 기반으로 복잡한 사용자 인터페이스를 쉽게 구축 할 수 있습니다. <🎜 🎜> Svelte로 구축 된 뉴스 앱에 새 기사를 추가 할 수 있습니까? <p > Svelte News 앱에 새 기사를 추가하려면 기사의 새 구성 요소를 작성한 다음 관련 상위 구성 요소로 가져 오는 것이 포함됩니다. 새로운 구성 요소에서는 기사의 내용과 저자 및 게시 날짜와 같은 관련 메타 데이터를 정의 할 수 있습니다. 구성 요소가 작성되면 가져 오기 문을 사용하여 구성 요소로 가져올 수 있습니다. 그런 다음 기사가 나타나기를 원하는 부모 구성 요소의 렌더 메소드에 추가 할 수 있습니다. <🎜 🎜> <h3 > Svelte News 앱에서 검색 기능을 구현하려면 어떻게합니까? Svelte News 앱에는 검색 구성 요소를 작성하고 검색 입력을 추적하기 위해 상태 관리를 추가하는 것이 포함됩니다. Svelte의 내장 반응성 기능을 사용하여 검색 입력을 기반으로 표시된 기사를 업데이트 할 수 있습니다. 검색 입력이 변경되면 검색 입력과 일치하는 기사 만 포함하도록 기사 목록을 필터링 할 수 있습니다. <🎜 🎜> 내 Svelte 앱에서 뉴스 기사를 분류하는 방법은 무엇입니까? <p > 뉴스 기사를 분류하십시오. 각 기사에 카테고리 속성을 추가하여 Svelte 앱을 달성 할 수 있습니다. 그런 다음이 속성을 사용하여 선택한 범주를 기반으로 기사를 필터링 할 수 있습니다. 카테고리 목록을 표시하는 카테고리 구성 요소를 만들 수 있습니다. 카테고리가 선택되면 표시된 기사를 선택한 카테고리에만 포함하도록 업데이트 할 수 있습니다. <🎜 🎜> <h3 > Svelte News 앱에 사용자 인증을 추가 할 수 있습니까? <p > 사용자 인증 추가 사용자 인증 추가 Svelte News 앱은 Firebase Authentication Service 사용 또는 JWT (JSON Web Tokens)가있는 백엔드 서버와 같은 다양한 방법을 사용하여 수행 할 수 있습니다. 사용자가 로그인 자격 증명을 입력 할 수있는 인증 구성 요소를 작성해야합니다. 양식 제출시 이러한 자격 증명은 인증 서비스 또는 검증을 위해 백엔드 서버로 전송됩니다. 자격 증명이 유효 한 경우 사용자는 인증되고 앱에 대한 액세스 권한이 부여됩니다.<make> 저의 뉴스 앱 응답을 어떻게 반응하게 할 수 있습니까? <🎜 🎜> <h3 > 벨트 뉴스 앱을 반응하는 것은 CSS 미디어 쿼리를 사용하여 화면 크기를 기반으로 앱의 레이아웃을 조정하는 것과 관련이 있습니다. Svelte를 사용하면 JavaScript 및 HTML 코드와 동일한 파일로 CSS 코드를 작성하여 구성 요소를 더 쉽게 스타일링 할 수 있습니다. 모든 장치에서 앱이 좋아 보일 수 있도록 다양한 화면 크기의 다른 스타일을 정의 할 수 있습니다. <🎜 🎜> Svelte News 앱에 푸시 알림을 추가 할 수 있습니까? <p > 푸시 뉴스에 푸시 알림을 추가하십시오. 앱은 Firebase Cloud 메시징과 같은 서비스를 사용하여 수행 할 수 있습니다. 앱을 서비스에 등록한 다음 푸시 알림 수신을 처리하려면 앱에 필요한 코드를 추가해야합니다. 여기에는 일반적으로 푸시 이벤트를 청소하고 수신 될 때 알림을 표시하는 서비스 작업자를 앱에 추가하는 것이 포함됩니다. <🎜 🎜> <h3 > 내 Svelte 뉴스 앱에 주석 섹션을 추가 할 수 있습니까? <p > 추가 Svelte News 앱에 대한 의견 섹션에는 주석 구성 요소를 작성하고 주 경영진을 추가하여 주석을 추적합니다. Svelte의 내장 반응성 기능을 사용하여 사용자 입력을 기반으로 주석을 업데이트 할 수 있습니다. 사용자가 댓글을 제출하면 주석 목록에 추가하고 표시된 주석을 업데이트 할 수 있습니다. <🎜 🎜> Svelte News 앱의 성능을 최적화하는 방법 <h3 > 성능을 최적화하십시오. Svelte News 앱에는 몇 가지 전략이 포함될 수 있습니다. 먼저 Svelte의 내장 도구를 사용하여 코드 분할 및 게으른로드를 사용하여 현재보기에 필요한 코드 만로드 할 수 있습니다. 둘째, 이미지 및 기타 정적 자산을 최적화하여 파일 크기를 줄일 수 있습니다. 마지막으로, 서비스 작업자를 사용하여 앱의 자산을 캐시하고 캐시에서 제공하여로드 시간을 줄일 수 있습니다. <p > Svelte 뉴스 앱을 어떻게 배포 할 수 있습니까? <h3 > Svelte News 배포는 어떻게 배포 할 수 있습니까? 앱은 NetLify 또는 Vercel과 같은 정적 사이트 호스팅 서비스 또는 Google Cloud 또는 AWS와 같은 클라우드 플랫폼과 같은 다양한 방법을 사용하여 수행 할 수 있습니다. NPM Run Build 명령을 사용하여 생산을위한 앱을 구축해야하며, 이는 컴파일 된 앱으로 공개 폴더를 만듭니다. 그런 다음이 폴더를 호스팅 서비스 또는 클라우드 플랫폼에 업로드 할 수 있습니다. <p ></script>

위 내용은 Svelte App Project : Daily Planet의 뉴스 앱 UI 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!