전체 글343 [JavaScript] console object The console object provides access to the browser's debugging console. The console object can be accessed from any global object. Methods console.assert() This method writes an error message to the console if the assertion is false. If the assertion is true, nothing happens. for (let i = 0; i < 4; i++) { console.assert(i % 2 == 0, `The number ${i} is not an even number.`); } console.clear() This.. 2021. 12. 6. [Svelte] Svelte Element Svelte has some useful elements. Let's take a look at it. This element allows a component to include itself, recursively. This element is useful in cases such as tree traverse. I created an object with a repeated structure and passed using props. {objs.name} {#if objs.children} {#each objs.children as objs} {/each} {/if} is the same as . This element renders a component dynamically, using the co.. 2021. 12. 5. [Svelte] Context Svelte's components can communicate with its own child components using context. The context data cannot be used in parent components or sibling components. Context doesn't act as responsibility, unlike store. That is, even if the shared context data is changed, the context data gotten through getContext() is automatically changed or the screen is not automatically updated. Context data can be a.. 2021. 12. 4. [Svelte] Action Action is functions that are called when an element is created. It is used with use: directive. Action Function Example styling function is called when div elements are displayed. The node argument is the element that is declared action. The parameters argument is the data to pass to the action. Life Cycle of Action function styling(node, parameters = { width: '50px', height: '50px', color: 'tom.. 2021. 12. 2. [Svelte] Event Handling Let's learn how to handle the event in Svelte. Event Bubbling : propagating the event from child to parent Event Capturing : propagating the event from parent to child Inline Event Handler DOM can have an inline event handler using on:click in Svelte. (text += '.')}> {text} Multiple Event Handler You can use multiple events with a single element. {count} Test Event Modifiers Svelte provides seve.. 2021. 11. 30. [Git] Tip: Cherry-pick from a Different Repository 간혹 같은 code base를 갖지만 분화되어 나눠진 별도의 repository로 운영되는 프로젝트들이 있습니다. 이 때, 서로 다른 repository에서 특정 commit을 cherry-pick 하고 싶은 경우가 있습니다. 공통적으로 적용될 수 있는 수정이나 신규 기능들을 갖고 올 경우죠. 이 때, 간단하게 다음을 통해 적용해볼 수 있습니다. Remote Repository 추가 $ git remote add Commit Fetching 처음 repository를 추가하면 자동으로 fetching을 하기 때문에, 건너뛰셔도 되는 부분이지만, 이미 추가된 repository거나 혹시 모를 상황에 대비해 remote repository의 변경 사항을 가져오는 것이 좋습니다. $ git fetch Cher.. 2021. 11. 30. [Svelte] Slot Slot allows components to have sub-elements. Simple Example Slot feature can be used via slot tag. Fallback Content slot tag gets the content from the parent. If there is not any content from a parent, the fallback content is used. Test A parent component can pass the sub-elements to a child component. Named Slot We can give a name to slot for identification. Name Age The order is important. It .. 2021. 11. 28. [Svelte] Props The data passed from parents to children is called properties (props). Example At first, let's create a child component. {name}, {age} This component gets data named as name, age from the parent component and display it. If age data aren't passed, this component will use the default value. Now, let's use this component in the parent. {#each users as user} {/each} {#each users as { name, age }} {.. 2021. 11. 27. [Svelte] Reactivity Reactivity is that other data or screens are automatically updated depending on the data change. Reactive Assignments This is a simple example of a reactive assignment. Normal Variable The screen is automatically updated since the data is updated. Name: {name} Change Name If we click the button, the value of the name variable is changed and displayed the changed value. Array Variable Now, let's .. 2021. 11. 25. 이전 1 ··· 12 13 14 15 16 17 18 ··· 39 다음
