📌 목록 Introduction Bar Chart 만들기 Conclusion 📌 Introduction 안녕하세요. 오늘은 지난번 소개 했던 d3 의 기본을 통해 bar chart를 한번 간단하게 만들어 보겠습니다. 📌 Bar Chart 만들기 먼저 data를 소개 할게요. data는 csv파일에 저장이 되어있습니다. "month","revenue","profit" "January","13432","8342" "February","19342","10342" "March","17443","15423" "April","26342","18432" "May","34213","29434" "June","50321","45343" "July","54273","47452 이제 정식적으로 코드를 한번 볼까요? cons..
📌목록 Introduction Scale min, max, extent Axes Conclusion 📌 Introduction 안녕하세요. 오늘은 d3에서의 scale과 axes에 대해서 알아보겠습니다. scale 같은 경우 svg보다 넓거나 높은 값이 나오면 효율적으로 대응을 해주게 됩니다. 퍼센트와 비슷한 개념이라고 보시면 좋을거 같아요. 그럼 한번 시작해보곘습니다. 📌 Scale 먼저 scale은 참 많은 scale을 가지고 있어요. Linear Scale Logarithmic Scale Time Scale Ordinal Scale Band Scales 차례대로 알아 보겠습니다. 1. Linear Scale 기본적인 scale의 문법에 대해서 알기 전에 domain과 range에 대해서 알아야 해요..
📌 목록 Introduction Adding svgs with d3 Selection and data joins Loading external datas Conclusion 📌 Introduction 안녕하세요. 오늘은 d3의 기초적인 부분에 대해서 한번 알아보겠습니다. 그럼 한번 알아볼까요~~!? 📌 Adding svgs with d3 이제 svg를 통해 다양한 도형들을 그려보도록 하겠습니다. // ⭐️ d3.select를 통해 dom을 지정할 수 있어요. 그리고 항상 method chaining이 가능합니다. const svg = d3.select("#chart-area").append("svg") .attr("width", 400) .attr("height", 400) // 이제 생성된 svg를 통..
📌 목록 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..
