console.log(myDataItem);

let myDataItem;

//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>