이 게시물 시리즈의 색인은 NgateSystems.com에 있습니다. 거기에서 매우 유용한 키워드 검색 기능도 찾을 수 있습니다.
최종 검토일: 2024년 11월
이전 게시물에서는 전체가 간단한 HTML로 구성된 Svelte 웹앱을 만들었습니다. 여기에는 Javascript가 포함되어 있지 않았으므로 Svelte의 정교한 동적 HTML 생성 기능을 사용하지 않았습니다. 이 게시물은 Svelte 기능의 표면적인 부분만 설명하지만 언어의 힘에 대한 느낌을 줄 것입니다.
객관적으로 볼 때 웹앱은 HTML 페이지, 팝업, 테이블, 양식 및 버튼으로 구성된 복잡한 계층 구조입니다. 이 어지러운 시각적 요소 집합은 데이터를 통해 '정보'를 받습니다. 테이블은 JavaScript 배열 콘텐츠로 확장됩니다. 플래그 필드의 요청에 따라 팝업이 나타나고 사라집니다. 마우스와 키보드 입력으로 "눌렀을" 때 데이터로 양식이 꽃피웁니다. 한마디로 - 복잡합니다. 이런 상황에서 어떻게 질서가 확립될 수 있을까요?
통합적으로 특정 시점의 웹앱 모양을 정의하는 데이터 본문을 웹앱의 상태라고 합니다. 상태가 변경될 때 효율적으로 반응하는 웹앱을 더 쉽게 작성할 수 있도록 설계된 소프트웨어 개발 기술에 많은 노력이 기울여졌습니다. Svelte와 같은 플랫폼은 우수한 반응성을 제공하도록 명시적으로 설계되었습니다.
상태 정의와 반응성 구현에 대한 Svelte의 접근 방식을 살펴보겠습니다.
웹 페이지의 일반적인 기능은 웹 페이지를 시작할 때 표시되지만(보통 성가시게) 클릭하면 사라지는 팝업 창입니다. Svelte를 통해 상태 및 반응성을 사용하여 웹앱에서 이를 구현하는 방법을 살펴보겠습니다.
Javascript에서는 변수를 사용하기 전에 먼저 정의해야 합니다. 예를 들어
console.log(myDataItem);
코드의 앞부분에서 다음과 같은 문을 사용하여 정의하지 않는 한 오류가 발생합니다
let myDataItem;
여담으로, 이와 같은 JavaScript를 빠르게 시험해 볼 수 있는 "플레이그라운드"에 액세스하면 유용할 것입니다. 모든 브라우저 페이지의 "검사" 보기는 이러한 플레이그라운드 중 하나를 제공합니다. 임의의 페이지에서 검사기를 열고 메뉴 표시줄에서 "콘솔" 탭을 선택하십시오. 또는 PlayCode에서 자바스크립트 콘솔을 사용해 볼 수도 있습니다.
JavaScript의 let 키워드에 대해 할 말이 많지만(chatGPT에 "범위"에 대해 문의해 보세요) let은 상태를 정의하는 방법이기 때문에 Svelte에서는 추가적인 의미가 있습니다. Svelte 프로그램에서 let으로 정의된 모든 변수는 프로그램 상태의 일부가 됩니다.
그럼 어쩌죠? 글쎄요, 앞서 웹앱의 모양을 정의하는 변수인 상태 변수가 "반응적"이라고 말했습니다. 즉, 해당 값이 변경되면 웹앱의 모양도 그에 따라 자동으로 변경됩니다. popupVisible 부울 변수를 사용하여 팝업 상태를 정의한다고 가정해 보겠습니다. 반응형 플랫폼인 Svelte가 변수 값을 사용하여 팝업 표시 여부를 결정할 수 있습니까? 시도해 보세요.
다음은 제가 사용하기로 제안한 코드입니다. 잠시 후에 이 기능이 무엇인지 설명하겠습니다.
//src/routes/page.svelte - 실행하기 전에 이 줄을 제거하세요.
<스크립트>
popupVisible = true로 두십시오.
함수 토글팝업() {
popupVisible = !popupVisible;
}
</스크립트>
<div>
{#if popupVisible}
<버튼
>
<p>여기 코드는 두 부분으로 나누어져 있습니다. <script></script> 태그에서는 popupVisible 자바스크립트 변수와gglePopup() 함수를 선언합니다. 하위 "템플릿" 섹션은 Svelte {#if} {/if} 논리 블록에 의해 "조정된" HTML을 지정합니다. Svelte 코드는 <script> 섹션을 참조하여 HTML 코드 생성을 안내하세요. 참조는 논리 블록 내에서 직접 사용되는 경우를 제외하고 중괄호 {}로 묶습니다. 자세한 내용은 기본 마크업 및 논리 블록의 Svelte 문서를 참조하세요.
<p>위에 표시된 코드는 매우 조잡합니다. "팝업"은 일반적으로 <div> 테두리와 일부 위치 지정 CSS로 형식이 지정된 태그입니다. 여기서는 <버튼> 태그 - 양식의 "제출" 요소를 정의하는 데 더 일반적으로 사용되는 것입니다. 내가 이렇게 한 이유는 단지 그것이 당신의 주의를 산만하게 할 수 있는 몇 가지 기술적인 문제를 피할 수 있게 해주기 때문입니다. "팝업" 버튼을 파란색으로 표시해두었습니다.</p>
<p>Post 2.1에서 생성된 스켈레톤 svelte-dev Svelte 프로젝트의 복사본이 아직 있다면 이 코드를 사용하여 src/routes/page.svelte의 전체 콘텐츠를 바꿔보세요. 프로젝트에서 터미널을 열고 이전과 같이 개발 서버를 시작하면 이제 브라우저가 활성화되어 아래와 같은 화면이 표시됩니다.</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173277643775221.jpg" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>
<p>파란색 직사각형이 '팝업'입니다. 이 시점에서 popupVisible 변수가 true로 설정되고 페이지의 HTML 생성을 구동하는 Svelte 로직에 <button> 이 경우 태그를 지정하세요.</p>
<p>이제 팝업을 클릭해 보세요. 마법! 그것은 사라진다. 그 이유는 <버튼> 팝업을 지정하는 태그에는 요소를 클릭하면 토글팝업 기능이 실행되도록 하는 onClick 절이 포함되어 있습니다. 그러면 popupVisible 변수가 false로 설정됩니다.</p><p>앞서 Svelte "상태" 변수를 변경하면 Svelte가 페이지의 템플릿 섹션을 다시 실행하여 화면을 새로 고친다고 말했습니다. 따라서 템플릿 섹션이 다시 실행되고 이제 popupVisible 값이 false이므로 <button> 팝업을 표시하는 코드는 빈 페이지를 남기고 우회됩니다.</p>
<p>잠시 시간을 내어 이 내용을 이해해 보십시오. 제가 Post 1.1에서 소개한 원시적인 DOM 조작 코드를 계속 사용하고 있었다면 이 효과는 상당히 기술적인 코드를 많이 작성해야만 달성할 수 있었을 것입니다. 오히려 비효율적) 저수준 코드. 여기서는 변수 값을 변경해야 했습니다. Sveltekit은 복잡한 결과를 <strong>자동으로</strong> 처리했습니다(그리고 안심하세요, 효율적으로). </p>
<p>간단히 말하면 Svelte는 브라우저 화면 관리의 지루한 세부 사항을 프레임워크에 맡길 수 있는 고급 언어를 제공합니다. </p>
<p><em>2024년 10월 Svelte 5는 반응성 정의 배열에 일련의 개선 사항을 도입했습니다. 위에 설명된 let 구성은 이 게시물 시리즈의 모든 항목에 대해 여전히 잘 작동하지만 이제 더 복잡한 요구 사항을 처리할 수 있는 새로운 룬 개념을 사용할 수 있습니다. 자세한 내용은 룬이 무엇인지 확인하세요.</em></p>
<h4>
2.2 데이터 입력
</h4>
<p>팝업을 좀 더 재미있게 만들어 보겠습니다. 당신이 제조 회사의 "제품" 목록을 관리하는 업무를 맡고 있다고 상상해 보십시오. 현재 목록을 표시하고 새 제품을 추가할 수 있는 유틸리티가 필요합니다. 실제로는 물론 항목을 편집하고 삭제할 수도 있지만 지금은 간단하게 유지하겠습니다. </p>
<p>다음 코드를 살펴보세요. JavaScript 지식을 확장할 수 있지만 내부 의견이 도움이 될 것입니다.<br>
</p>
<pre class="brush:php;toolbar:false">//src/routes/page.svelte - 실행하기 전에 이 줄을 제거하세요.
<스크립트>
popupVisible = false로 설정합니다.
newProductNumber = ""를 보자;
제품 = []; // 제품 객체 배열 {productNumber: productNumber}
</스크립트>
<div>
<p>여기서 "템플릿" 섹션은 popupVisible 값을 확인하는 것으로 시작됩니다. 이것이 false인 경우(변수가 "스크립트" 섹션에서 방금 초기화되었기 때문에 시작 시 발생함) 웹앱은 웹앱의 현재 "제품" 목록(제품 배열에 저장된 productNumbers 배열)을 표시합니다. </p>
<p>이제 코드가 이동하여 "다른 제품 추가" 버튼을 표시합니다. 이전 예에서 사용된 이상한 버전이 아니라 이제 일반적인 버튼입니다. 하지만 이전과 마찬가지로 on:click 함수가 연결되어 있으며 이 함수는 popupVisible 값을 true로 설정합니다.</p>
<p>버튼을 클릭하면 어떻게 되나요? popupVisible은 반응형 변수이기 때문에 웹앱은 화면을 새로 고칩니다.</p>
<p>이번에는 양식의 제품 표시 섹션이 무시되고 제어가 바로 템플릿 섹션의 두 번째 부분으로 이동됩니다.</p><p>여기서 일반적인 팝업과 유사한 내용이 표시됩니다. 이것은 <form> 컨테이너 div> 내의 태그 newProductNumber 상태 변수에 대한 입력을 수집합니다. 여기서는 newProductNumber를 사용자의 키보드 입력과 동기화하기 위해 특별한 Svelte "bind" 한정자"가 사용됩니다. 사용자가 양식의 <input> 필드에 문자를 입력할 때마다 newProductNumber가 업데이트됩니다.
<p>사용자가 마지막으로 양식의 "등록" 버튼을 클릭하면 on:click 기능이 완전히 업데이트된 newProductNumber를 제품 배열에 푸시하고 popupVisible 필드를 재설정할 수 있습니다.</p>
<p>마지막으로 popupVisible은 반응형 변수이므로 코드의 "템플릿" 섹션이 다시 실행되고 팝업이 업데이트된 제품 번호 목록으로 대체됩니다.</p>
<p>한두 가지 다른 문제로 인해 당황스러울 수도 있습니다. 이전 예에서 anon:click 한정자는 웹앱의 <script> 부분. 그러나 이 새 버전의 page.svelte에서는 함수가 <button> 필드의 HTML 사양. 두 접근 방식 모두 완벽하게 유효합니다. 여기에 사용된 버전은 아마도 약간 이상하게 보일 수 있지만 함수의 논리가 호출 시점에 정의된다는 장점이 있어 널리 사용되는 배열입니다. 이렇게 하면 무슨 일이 일어나고 있는지 확인하기가 훨씬 쉬워집니다. </p>
<p>참고로 표현은 다음과 같습니다.<br>
"() => { .... }"는 "다음 JavaScript 문으로 정의된 함수가 있습니다: "{ .... }"입니다. 다양한 변형이 있습니다. chatGPT에 "화살표"에 대한 튜토리얼을 요청하세요 " 기능 .</p>
<p>계속해서 말씀드리자면 제가 "스타일링"에 있어 훨씬 더 모험적이었다는 점을 아시게 될 것입니다. 예를 들어 제목이 있고 모든 것이 중앙에 잘 배치되어 있습니다(CSS "상속"을 통해>
</p><p>하지만 배경설명은 이것으로 충분합니다. 웹앱이 실제로 작동하는 모습을 살펴보겠습니다. page.svelte 파일의 현재 콘텐츠 위에 새 코드를 붙여넣고 저장한 후 (필요한 경우) 프로젝트에서 터미널을 열고 npm run dev -- --open 명령을 사용하여 개발 서버를 다시 시작하세요. 브라우저에 표시되는 내용은 다음과 같습니다.:</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173277643810144.jpg" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>
<p>버튼을 클릭하면 표시되는 내용은 다음과 같습니다.<br><br></p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173277643952736.jpg" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>
<p>newProductNumber 필드에는 유효성 검사가 없으므로 숫자뿐만 아니라 문자도 입력할 수 있습니다. 향후 게시물에서 이 문제를 수정하겠습니다. 그럼에도 불구하고 "등록" 버튼을 클릭하면 원래 재고 표시 페이지로 대체된 팝업이 표시되고 새 제품 "번호"가 목록에 추가됩니다.</p>
<p>이 Svelte 스크랩은 거의 정보 시스템처럼 보이기 시작했습니다! </p><h3>
3. 앞으로 그리고 위로
</h3>
<p>이 게시물에서는 Svelte 언어에 구현된 주요 개념을 간략하게 살펴보았습니다. 불행히도 걸림돌이 있습니다. 여러분도 눈치채셨겠지만, 방금 본 "인벤토리" 예제는 사실상 쓸모가 없습니다. 왜냐하면 웹앱을 닫을 때마다 해당 제품 목록이 사라지기 때문입니다! 따라서 다음 단계는 Google의 <strong>Firestore</strong> 데이터베이스 기술을 소개하는 것입니다. 이를 통해 서버 호스트에 <strong>영구</strong> 저장소를 생성할 수 있습니다. </p>
<h3>
포스트스크립트 (a): 문제가 발생하는 경우 - Chrome Inspector를 사용하여 레이아웃 문제 조사
</h3>
<p>Post 2.1의 "상황이 잘못될 때"에서는 웹앱을 개발할 때 직면하게 될 몇 가지 심각한 문제를 처리하는 방법을 설명했습니다. 그러나 이제 더 고급 수준에서 작업하므로 더 정교한 도구가 필요합니다. 이 섹션에서는 웹앱의 화면 레이아웃 문제와 JavaScript의 논리 오류를 수정할 때 매우 유용한 도구인 "Chrome Inspector"를 소개합니다(이 시리즈의 뒷부분에서 볼 수 있듯이 그 외에도 훨씬 더 많은 기능이 포함되어 있음).</p>
<p>Inspector는 웹앱 페이지에서 페이지를 마우스 오른쪽 버튼으로 클릭하고 '검사' 옵션을 선택하면 실행됩니다. 출력 예는 다음과 같습니다.</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173277644070139.jpg" alt="NgSysV.Creating a simple Reactive Svelte webapp"></p>
<p>이 스크린샷에는 다음이 포함되어 있습니다.</p>직접 시도해 보면 제목에 컬러 그래픽이 추가된 것을 알 수 있습니다. 이는 텍스트에 추가된 여백, 테두리 및 패딩의 크기와 위치를 보여줍니다. 오른쪽 검사 패널에서 자세한 내용을 확인할 수 있습니다. 메뉴에서 계산된 탭을 클릭하면 다양한 요소의 색상 코딩과 자세한 크기를 설명하는 그래픽이 표시됩니다. "스타일" 탭을 클릭하면 텍스트에 첨부된 스타일의 세부정보를 볼 수 있습니다. 목록의 첫 번째 항목 세트는 태그의>를 사용하여 명시적으로 설정된 스타일을 확인합니다.
이 패널의 장점은 관리자를 사용하여 스타일 변경 및 추가 효과를 확인할 수 있다는 것입니다. 예를 들어 제목에 빨간색 글꼴을 사용해 보고 싶다면 패널 상단에 있는 element.style 항목의 아무 곳이나 클릭하고 color: red를 입력합니다. 이제 제목이 빨간색으로 바뀌었습니다. 자동 완성을 사용하여 다양한 색상을 시험해 볼 수 있는 기회를 놓치지 마세요.
중요한 점을 강조하고 싶지는 않지만 이 시설이 어떻게 레이아웃 문제를 조사하고 수정하기 위한 정확하고 직관적인 도구를 제공할 수 있는지 알아보기 시작해야 한다고 생각합니다. 자세한 내용은 DevTools의 검사기에 대한 Google 문서를 확인하세요.
이 문제에 상당한 시간을 할애할 준비를 하세요. Inspector는 복잡한 도구이므로 자신 있게 사용할 수 있으려면 시간이 좀 걸립니다. 하지만 이번 시간은 알차게 보낼 것입니다. Inspector를 사용하면 소스 코드 설정에 대한 수많은 맹목적인 실험 시간을 확실히 절약할 수 있습니다. 검사기의 그래픽 디스플레이를 통해 요소 너비, 여백 및 패딩의 모든 숨겨진 속성을 볼 수 있습니다.
또한 Inspector를 사용하면 소스 코드를 보고 실행을 중단하려는 줄에 "중단점"을 설정할 수 있으므로 논리 오류를 찾는 데 도움이 될 수 있습니다. 웹앱을 새로 고친 후(Inspector가 계속 열려 있는 상태에서) 각 중단점에서 필드 값을 검사할 수 있습니다. 다음은 Inspector의 작동 스크린샷입니다.
이 스크린샷의 내용은 다음과 같습니다.
이 모든 결과로 웹앱이 "코드 디버그" 모드로 전환되었습니다. 지금 저는 웹앱의
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
