📌 목록 Introduction DOM events DOM modifiers Component Event Conclusion Reference 📌 Introduction 안녕하세요. 오늘은 svetle의 events에 대해서 알아보겠습니다. 📌 DOM events 이전에 한번 다뤘듯이 :on으로 event를 listen 할수 있습니다. HELLO또한 inline으로도 할수 있어요. { console.log('HELLO') }}>HELLO📌 DOM modifiers event modifiers의 기본적인 사용방법은 다음과 같아요. { console.log('HELLO') }}>HELLO총 7가지 modifiers가 존재합니다. preventDefault -> handler를 호..
📌 목록 Introduction Await Block Short version Conclusion Reference 📌 Introduction 안녕하세요. 오늘은 svelte의 await block에 대해서 알아보겠습니다. apollo의 기능과 유사하긴 해요. 그럼 한번 알아볼까요? 📌 Await Block 기본적인 문법은 이렇습니다. {#await promise} {:then vale} {:catch error} {/await} 처음에 apollo에서 이러한 문법을 봤을땐 정말 신기하긴 했는데 이제 더이상 loading처리를 각각 해주지 않아도 좋은거 같아요. 그럼 한번 jsonplaceholder에서 값을 받아와 볼까요? {#await promise} ...LOADING {:then} {#each u..
📌 목록 Introducion Each Key Conclusion Reference 📌 Introduction 안녕하세요. 오늘은 svelte에서 어떻게 iteration을 하는지에 대해서 알아보겠습니다. vue에서는 마치 v-for 같은 아이가 있어요. 📌 Each Each라는 키워드를 사용하게 됩니다. {#each cats as cat} {/each} 그럼 한번 예제를 볼까요? STUDENTS {#each students as student, i} {i}: {student.name} {/each} 혹은 이렇게 destructuring을 할수 있습니다. {#each students as {name}, i} {i}: {name} {/each} 📌 Key each 키워드 옆에 ()로 key를 설정 할 수 ..
📌 목록 Introduction Logic - if Logic - else Logic - else if Conclusion Reference 📌 Introduction 안녕하세요. 오늘은 svelte에서 어떻게 if, else if, else 같은 것들을 어떻게 처리하는지에 대해서 한번 알아보겠습니다. 📌 Logic - if 먼저 간단하게 if에 대해서 알아보겠습니다. 아래와 같은 방식으로 선언을 할수 있어요. {#if} {/if} 그럼 이제 한번 간단하게 count가 짝수 일때 count is even이라는 문구를 출력해보도록 하겠습니다. COUNT: {count} {#if count % 2 === 0} count is even {/if} PLUS
📌 목록 Introduction Declaring Props Spread Props $$props and $$restProps Conclusion Reference 📌 Introduction 안녕하세요. 오늘은 svelte에서 props를 어떻게 다루는지에 관해 알아보겠습니다. 📌 Declaring Props 이건 좀 처음에 당황스러운 방식이긴합니다만 export를 사용하면 됩니다. {title} 📌 Spread Props 만약 이런 props를 받는다고 생각해볼게요. 이런식으로 축약을 할수도 있습니다. 📌 $$props and $$restProps $$props는 모든 props의 접근이 가능합니다. $$restProps는 export로 선언되어지지 않은 props만을 가져옵니다. 📌 Conclusio..
📌 목록 Introduction Assignments Declarations Statements Updating arrays and objects Conclusion Reference 📌 Introduction 안녕하세요. 오늘은 가장 중요한 reactivity에 대해서 알아보겠습니다. 되게 javascript 스럽더라구요. 직관적이기도 합니다. vanila javscript를 짜는 느낌이 많이 강하게 들었던거 같아요. 그럼 한번 볼까요? 📌 Assignments 일단 먼저 간단하게 counter를 구현해볼게요. reactivity를 확인하기 위해서 click event를 사용하게 됩니다. {count} + - let 키워드를 간단하게 바로 이렇게 해줄 수 있어요. 📌 Declarations vue에서의..
📌 목록 Introduction Adding Data Dynamic Attribute Styling Nested components HTML tags Conclusion Reference 📌 Introduction 안녕하세요. 오늘은 지난번에 이어 svetle에 기본적인 부분에 대해서 한번 알아보겠습니다. 많은 부분 vue에서 영향을 받은 것 같은 느낌이 드네요. 📌 Adding Data 일단 간단하게 hello world을 그려보겠습니다. Hello {name} 여기서 신기한건 이렇게 해도 동일하게 동작을 합니다. Hello {name} 위치는 딱히 상관이 없어보여요. 이걸 토대로 눈치를 챌수 있는 부분은 단순 javascript 형식으로만 compile을 하는게 아닌거 같아요.(아직 확실 한건 아니지..
목록 Introduction Set Up Conclusion Reference 📌 Introduciton 안녕하세요. 오늘은 요즘 한창 뜨고 잇는 svelte에 대해서 알아보겠습니다. 사실 이걸 접하게 된 계기는 실제로 svelte에 contribution을 해보고 싶어서 svelte을 공부하게 되었습니다. 아마 마지막 챕터에서는 실제로 contribute을 해보는 그런 단계가 이 블로그에 적혀있으면 좋겠네요. 그럼 이제 한번 시작해볼게요. 📌 Set Up Svelte을 시작하는 방법에는 두가지 방법이 있습니다. 하나는 REPL이라는걸 이용하는 건데요. 이걸 이용하면 codebox처럼 인터넷에서 svelte을 사용할수 있어요. 두번째 방법은 digit을 이용하는 방법입니다.(CRA나 vue-cli같은 툴..
