코딩을 배우는 직장인

svelte는 총 3가지 영역으로 나뉜다. script 영역: Js코드가 위치 markup 영역: html 및 컴포넌트 마크업이 위치 style 영역: css 스타일이 위치 이 3가지를 컴포넌트 라고 합니다. - (여기부터) markup 영역- {a} + {b} = {a + b} 숫자 업데이트 - (이까지) - 영역 순서가 바뀌는건 상관 없다고 합니다. 여기서 다른 svelte에서 컴포넌트를 import 하는 방법입니다. 그리고 header.svelte를 만들어 보겠습니다. 아래 코드와 같습니다. Header Space 그러면 import를 한 스벨트에서 header.svelte의 컴포넌트를 불러왔기 때문에 결과는 Header Space 이게 나오게 되겠지요. 여기서 특이한 점이 있는데요. 자바 스크립트..

안녕하세요 언어마다 반복구문인 for 구문 사용법이 조금씩 달라서 얘를 쓰고 있습니다.. python 에서는 for i in items: 로 간단히 적은 반면 Js 에서는 for(let i = 0; i > 5; i++){ } 등 다른데 스벨트는 또 for을 쓰지 않고 반복구문을 사용하네요 쓰는 방법은 {#each items as item} {item} {/each} 이런 식으로 markup 부분에 each를 적어서 사용합니다 여기서 포인트는 item 에 {} 이 괄호를 해주는 것입니다. 저 괄호를 통해 script에 작성한 스테이트를 불러 오는 것입니다.

스벨트에서는 자바스크립트의 배열조작 방법인 push, splice 등으로 변경되는 것을 인식하지 못합니다. 이럴때 스프레드 연산자를 사용하는데요. 예시코드를 적어 보겠습니다. {#each list as item} {item.content} {/each} 할일 추가 이 코드를 실행하였을때 나오는 결과는 다음과 같습니다. 근데 여기서 할일 추가 버튼을 눌러도 list에 todo 객체가 담기지 않습니다. 왜냐면 스벨트에서는 앞에 말했 듯이 자바스크립트의 배열조작 방법인 push, splice 등으로 변경되는 것을 인식하지 못합니다. 그래서 스프레드 연산자를 사용하는데요 list.push(todo); 부분을 스프레드 연산자(list = [...list, todo])로 바꾸어 줍니다 아래와 같이! {#each l..

스벨트에는 bind라는 속성이 있는데요 이것을 스크립트에 적힌 스테이트와 연동을 시켜서 값의 변환을 줄수 있습니다. 예를 들어 이런식으로 script에 textValue라고 선언한 스테이트가 있다면 그 값을 input 태그에 속성 중 하나인 value의 값에 연동을 시키는 것입니다. 예시 코드를 적어 볼께요 {textValue} 이렇게 코드를 작성한 후 결과를 보면 이렇게 text안에 적은 값이 위에 textValue에 들어가는 것을 볼 수 있습니다. 이 bind 속성을 자식 컴포넌트에 연결해서도 사용할 수 있는데 예시는 다음과 같습니다. 일단 app.svelte에 다음 코드를 적습니다. {countValue} //여기서 bind: 다음에 적은 count는 //임의로 정하는 것입니다. Child.svel..