Frontend/Svelte 검색 결과

13 개의 검색 결과가 있습니다.

Frontend/Svelte

[Svelte] 스벨트 커스텀 이벤트와 이벤트 데이터 추출하기

🌈 커스텀 이벤트 추가 및 이벤트 데이터 추출하기 Svelte.js - 완벽 가이드의 [섹션 6:: 컴포넌트에 대해 자세히 알아보기] 를 수강한 후에 정리한 내용이다. 👨‍💻 커스텀 이벤트와 데이터 추출 커스텀 이벤트에 있어 중요한 키워드는 dispatch이다. 하위 컴포넌트의 스크립트에서 createEventDispatcher를 통해 커스텀 이벤트의 이름과 전달할 데이터를 바인딩 한 메서드에 dispatch한다. Add to Cart 하위 컴포넌트에서 dispatch한 커스텀 이벤트와 데이터를 상위 컴포넌트에서 사용할 수 있게 되었다. alert(''Add to cart!)} /> 또한 하위 컴포넌트에서 전달한 이벤트의 데이터를 추출하기 위해서는 아래와 같이 하위 컴포넌트의 프로퍼티에 메서드를 바인딩한..

2023. 1. 12. 15:01

Frontend/Svelte

[Svelte] 두 가지 종류의 컴포넌트 (Container VS Presentational component)

🌈 Container (=Stateful components) VS Presentational component Svelte.js - 완벽 가이드의 [섹션 5:: 강의 프로젝트 첫 번째 단계] 를 수강한 후에 정리한 내용이다. 1️⃣ Container (=Stateful components) ◾ 데이터를 가지고 있으면서 관리하는 역할을 한다. ◾ 다른 컴포넌트에 데이터를 전달한다. ◾ 스테이트풀에서의 스테이트(=상태)는 데이터를 의미한다. ◾ 스테이트풀의 데이터는 정적일 필요가 없고, 상호작용에 의해 서버로부터 페칭(fetch)되어 변경될 수 있다. ◾ 예) App, Product ... : 데이터 관리를 위한 루트 위치 또는 메인 기능 컴포넌트 ◾ 스테이트풀 컴포넌트는 소수이다.(유지보수↑) 2️⃣ P..

2023. 1. 8. 15:45

Frontend/Svelte

[Svelte] HTML에서의 조건문과 루프 방법 정리

🌈 Svelte HTML의 조건문과 루프 작업 Svelte.js - 완벽 가이드의 [섹션 3:: 조건문 및 루프 작업]과 [섹션 4:: 반응성(Reactivity)들여다보기] 를 수강한 후에 정리한 내용이다. 1️⃣ if 스벨트의 HTML에 if 문은 중괄호와 #으로 표현할 수 있다. 또한 if문을 종료하기(/if) 전에 else문을 작성할 수 있으며 else 앞에 콜론을 붙여 사용할 수 있다. ... {#if formState === 'done'} {:else if formState === 'invalid'} Invalid input. {:else} Please Enter some data and hit the button! {/if} 2️⃣ each 스벨트의 HTML에서 반복문을 사용하기 위해서는 e..

2022. 12. 20. 16:25

Frontend/Svelte

[Svelte] 기본 구문 및 핵심 기능 정리

🌈 Svelte 기본 구문 및 핵심 정리 Svelte.js - 완벽 가이드의 [섹션 2:: 기본 구문 및 핵심 정리]를 수강한 후에 정리한 내용이다. 1️⃣ 구조 스벨트는 Vue와 비슷하게 하나의 .svelte 파일 안에 [자바스크립트 / css / html] 을 작성한다. 2️⃣ HTML의 동적 변수 사용과 바인딩 다른 작업 없이 중괄호 { } 를 사용하여 스크립트단의 변수와 연결하여 동적 변수를 만들 수 있으며, 스벨트 문법에 따라 HTML 태그 안에 변수를 바인딩할 수도 있다. 아래 코드는 스크립트단의 변수 name과 age를 html단에 바인딩한 것이며, button에 클릭 이벤트를 주어 incrementAge라는 함수를 바인딩하였다. 또한 버튼을 누를 때마다 age가 동적으로 1씩 증가하는 것을..

2022. 12. 19. 11:11

Frontend/Svelte

[Svelte - 완벽 가이드] 수강 시작!

🌈 Svelte - 완벽 가이드 최근 포트폴리오의 빈약함을 느끼고 부족한 점을 보완하기 위해 어떻게 해야 할까 생각을 해왔다. 그러던 중 스벨트(Svelte)를 기반으로 빠른 프론트 작업이 가능하다는 것을 알게 되었고, 새로운 프레임워크를 익힐 겸 독학을 하기 위한 자료를 찾던 중 유데미에서 좋은 강의를 발견하였다. 그리고 몇 개의 강의를 듣고 좋은 내용이 많아 공부 겸 관련 내용을 정리해야겠다고 생각했다. 따라서 당분간은 Svelte에 대한 강의를 수강하며 관련된 내용을 포스팅하려고 한다.

2022. 12. 14. 12:45

Frontend/Svelte

[Svelte] Svelte 개발환경 세팅 방법

🌈 Svelte 프로젝트 개발환경 세팅하기 스벨트(Svelte)는 React 또는 Vue처럼 Node를 기반으로 하기 때문에 스벨트 프로젝트를 시작하기 위해서는 먼저 node가 설치되어 있어야 한다. 또한 이번 포스팅에서는 스벨트 공식문서에서 제안하는 방법을 기반으로한 세팅 방법에 대해서 다룬다. 🙋‍♂️ 준비사항 ▪ Node ▪ Visual studio code ▪ visual studio code Extention 👨‍💻 프로젝트 생성 ~ 로컬 기동 ◾ npm create vite@latest myapp -- --template svelte myapp 부분에는 프로젝트의 이름을 입력하면 된다. ◾ cd myapp ◾ npm install ◾ npm run dev 기본 포트인 5173 포트에 스벨트 프..

2022. 12. 7. 12:46