keywords for learn keywords for learn

if blocks Else blocks Else-if blocks Each blocks keyed each blocks Await blocks if blocks - HTML은 조건문과 반복문과 같은 논리적인 표현식을 가지지 않습니다. Svelte 도 그렇습니다. - 몇몇 마크업을 조건에따라 렌더링 하기 위해서 if 블록 안에서 감싸줍니다. - 버튼 클릭을 통해서 컴포넌트의 상태를 업데이트 할 수 있습니다. {#if user.loggedIn} Log out {/if} {#if !user.loggedIn} Log in {/if} Else blocks - 토글형식으로 true/false 형식으로 상호 배타적인 경우 다른 블록을 사용하여 구성요소를 단순화 할 수 있습니다. - Else blocks 을 사용시 코..

Declaring props Default values Spread props Declaring props - svelte에서도 하나의 컴포넌트의 children 으로 보낼 필요가 있습니다. - 그렇기 때문에 "Props" 라고 불리는 properties 를 선언할 필요가 있습니다. - svelte에서는 export 키워드를 사용합니다. - $: , export 같은 것은 현재는 어색할 수 있지만 JS 모듈이기에 작동이 가능하며 시간이 지나면 자연스럽게 사용이 가능할 것 같습니다. // App.svelte // Props.svelte The answer is {answer} Default values - 기본값을 사용하는 방법은 간단합니다. - 기본값을 설정하고자하는 default values를 해당파일..

구조 분해 할당 배열 분해하기 객체 분해하기 '...' 나머지 객체 중첩 구조 분해 구조 분해 할당 - 키를 가진 여러개의 데이터를 하나의 엔티티에 저장 시 객체를 사용합니다. - 데이터를 순서대로 저장 시 배열을 사용합니다. - 함수, 변수에 객체나 배열을 전달해야 하는 경우가 있는데 전체 데이터가 아닌 일부만 필요시 "구조 분해 할당" 문법을 사용할 수 있습니다. 배열 분해하기 - 인덱스 접근없이 변수로 사용이 가능합니다. - 할당 값이 없다면 undefined로 취급됩니다. - 반환 값이 배열인 메서드를 활용도 가능합니다. (ex.. split과 같은 메서드) let arr = ["JH","SON"] // 구조 분해 할당 방식 // 첫 번째 배열에는 JH, 두 번째 배열에는 SON이 할당됩니다. l..

Assignments Declarations Statements Updating arrays and object Assignments - Svelte의 중심에는 DOM 어플리케이션의 상태 동기화하는 강력한 반응성 시스템(예를들어,, 이벤트의 응답하기 위함과 같은,,,)을 가지고 있습니다. - 아래의 코드에서 함수안에서 우리가 필요한 모든것은 count의 값을 변경합니다. - button 태그가 onclick 이벤트를 실행합니다. Clicked {count} {count === 1 ? 'time' : 'times'} Declarations - Svelte는 상태를 변경시 DOM을 자동적으로 업데이트 해줍니다. - 컴포넌트의 몇몇 상태는 다른 곳에서 계산된 부분이 필요하거나, 변경 될 때 계산된 부분들이 필..

함수형 프로그래밍 - 순수 함수를 만들어 모듈화 수준을 높이는 프로그래밍 패러다임을 말합니다. 부수 효과 - 외부의 상태를 변경, 함수로 들어온 인자의 상태를 직접 변경하는 것을 의미합니다. 순수 함수 - 부수효과가 없는 함수를 의미합니다. - 어떤 함수에 동일한 인자를 주엇을 때 항상 같은 값을 리턴하는 함수를 의미합니다. 순수함수, 비 순수함수 - 순수함수 - 어디에서 실행을 해도 리턴 값은 30이며 외부 상태를 변경하지 않습니다. function add(a,b){ return a+b; } console.log( add(10,20) ); - 비 순수함수 - 함수내에서 외부의 변수 값이 변하면 결과값도 달라집니다. - 만약 c가 상수라면 add() 함수는 순수함수입니다. let c = 10; funct..

Basics Adding Data Dynamic attributes Styling Other Component HTML tag Basics Svelte 무엇인가? - Svelte는 Web Application을 빠르게 제작할 수 있는 Javascript framework 입니다. - Javascript framework 에는 React와 Vue 등이 있습니다. - Svelte는 기존의 React, Vue에 비해서 코드의 실행속도가 빠르게 동작합니다. - Virtual DOM의 사용대신 Svelte는 Application의 state가 변경되었을 경우 DOM을 외적으로 업데이트하는 코드를 작성합니다. Svelte 실행환경 셋팅 -Visual Studio Code tool을 기반으로 설정하겠습니다. 1. 사..

Optional chaining(옵셔널 체이닝) - ES11(ECMA2020)에서 추가된 연산자입니다. - ?. 을 사용하면 프로퍼티가 없는 중첩 객체를 에러없이 안전하게 접근가능합니다. - 좌항의 피연산자가 null 또는 undefined인 경우, undefined를 반환하고 그렇지 않은 경우에 우항의 프로퍼티를 참조합니다. let chaning = {}; console.log( chaining?.opt?.optional ); // undefined let chaining = null; console.log(chaining?.opt); //undefined console.log(chaining?opt.optional); //undefined Optional chaining 주의사항 옵셔널 체이닝 남용금..

Javascript 타입 종류 JS 메모리 주소 공간 동적 타입 원시 타입 참조 타입 JS 메모리 주소 공간 - 프로그램이 실행될 때 자바스크립트 엔진은 세 개의 메모리 공간을 가집니다. - Code Area: 실행 예정인 JS 코드를 저장하는 공간입니다. - Call Stack: 실행 중인 함수를 찾아 계산을 수행하고, 지역 변수를 저장합니다. 변수들은 LIFO(Last In First Out)형식으로 저장되며, 원시 타입들이 이 곳에 저장됩니다. - Heap: 참조 타입들이 이 곳에 할당됩니다. Heap의 메모리 할당은 LIFO 형시에 따르지 않고 랜덤하게 들어갑니다. 동적 타입 - JS는 타입이 유연한 동적언어입니다. - JS의 변수는 특정 타입과 연결되지 않으며 모든 타입의 값으로 할당 및 재할당..