전체 글 검색 결과

해당 글 191건

TIL 2022-04-20 svelte tutorial 5

Event The mouse position is {m.x} x {m.y} DOM event handling은 이런 문법으로 사용함. 또한 인라인으로 선언해도 큰 문제 없음. 다른 라이브러리들은 그렇게 선언하면 성능 문제가 생기는 경우가 있는데 Svelte는 그런거 없음 또한 once, stopPropagation 등의 문구를 붙일 수 있음. Click me passive는 touch, wheel 이벤트 성능을 개선시켜줌 preventDefault로 기본 동작 막을수 있고, stopPropagation도 있음... 굳이 함수상에서 선언안해도 인라인으로 선언할 수 있는듯. Click to say hello Dispatch란 개념이 나옴. 하위 컴포넌트에서 'message'를 dispatch하면 상위 컴포넌..
TIL 2022. 4. 20. 23:05

TIL 2022-04-19 Svelte Tutorial 1~4

리액트와 유사한 부분은 넘어가고 인상적이었던 부분만 남기자면 {@html string} 로 HTML을 직접적으로 렌더링 할 수 있음. 그러나 sanitize하지 않기 떄문에 조심해야됨. React의 dangerousInnerHTML과 동일한데 얘는 이렇게 쉽게 할 수 있음. Svelte에서는 다른 컴포넌트에서 값을 가져와야할때 export를 사용함 The answer is {answer} 이렇게 answer를 export하면 다른 컴포넌트에서 import하여 answer를 주입하여 사용할 수 있음. props라고 봐도 될 듯 {#if user.loggedIn} Log out {/if} {#if !user.loggedIn} Log in {/if} html 상에서 특정 로직을 적용할떄 svelte에서는 이런..
TIL 2022. 4. 19. 23:17

TIL 2022-04-18 Svelte

통칭 스벨트 스벨트가 공식 홈페이지에서 부터 대표적으로 내미는 것은 이것이다. Write less code 코드가 길어질수록 버그가 날 확률이 높으니 아예 코드량을 줄이자! import React, { useState } from 'react'; export default () => { const [a, setA] = useState(1); const [b, setB] = useState(2); function handleChangeA(event) { setA(+event.target.value); } function handleChangeB(event) { setB(+event.target.value); } return ( {a} + {b} = {a + b} ); }; {{a}} + {{b}} = {{..
TIL 2022. 4. 18. 23:06

TIL 2022-04-11 Docker

Docker는 컨테이너를 위한 운영체제다. 컨테이너는 VM보다 조금 더 가벼운 개념으로 VM에서는 각각의 OS가 별도로 존재하며 이를 Hypervisor로 리소스를 관리하는 느낌이라면 컨테이너는 OS까지는 동일하고 Docker Engine 위에 앱들을 올려놓은 느낌이다. Docker를 통한 이점으로는 모듈성이 강하다 변화가 있을때 이를 새로운 레이어로 만들어 계층적으로관리하여 롤백이 쉽다는 것이 있다 단점으로는 이렇게 나누어진 앱들을 통합해서 관리하기 시작하면 복잡성이 증가하며 컨테이너를 그룹화할 필요성이 생긴다. 이떄 사용하는 것이 쿠버네티스라는데 이거는 나중에 공부... Docker 데몬에도 보안 문제가 있을 수 있는데, 도커 실행하는데 가장 많이 사용하는 persist runtime인 도커 데몬을 ..
카테고리 없음 2022. 4. 11. 22:55

2022-04-04 Map, WeakMap, Array.from

Map Map은 자바스크립트에서 Key Value를 매핑할 수 있는 간단한 자료구조다. var sayings = new Map(); sayings.set("dog", "woof"); sayings.set("cat", "meow"); sayings.set("elephant", "toot"); sayings.size; // 3 sayings.get("fox"); // undefined sayings.has("bird"); // false sayings.delete("dog"); for (var [key, value] of sayings) { console.log(key + " goes " + value); } for of 를 통해서 key value를 순회할 수 있고, set, get, has, delete..
TIL 2022. 4. 4. 22:10