코딩을 배우는 직장인

안녕하세요 언어마다 반복구문인 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..