DEV
-
Svelte 강의 (11) - Spread propsDEV/SVELTE 2023. 11. 16. 23:20
Svelte에서 컴포넌트에 속성을 전달하는 방법을 설명하는 파트다. 먼저 App.svelte에서 PackageInfo 컴포넌트에 pkg 객체의 속성들을 전달하는 방법을 설명하는데 output : The svelte package is blazing fast. Download version undefined from npm and learn more here 처음에는 PackageInfo에 version이 빠져 있어 밑에와 같이 version undefined라고 나온다 version = {pkg.version}을 추가하면 되고 이보다 간단한 방법으로 이렇게 객체의 속성들을 전개해서 전달하면 더 편하다고 한다. $$props 방법도 소개하고 있는데 속성들을 명시적으로 열거하지 않고 전달된 모든 속성에 접근..
-
Svelte 강의 (10) - Declaring props & Default valuesDEV/SVELTE 2023. 11. 16. 23:05
이번 파트는 스벨트에서 자식 컴포넌트에 데이터를 어떤식으로 전달하는지 설명하는 파트인데 이게 좀..부모 자식이란 말이 웃기지 않나? 난 처음 부모 자식이라고 하니까 뭔가 좀 이상했는데.. 객체지향을 배우다보면 상속(Inheritance)이란 개념이 나오는데 여기서 부모와 자식이 좀 많이 나온다.. // 부모 컴포넌트 // 자식 컴포넌트 The answer is {answer} 위의 코드에서 부모 컴포넌트는 자식 컴포넌트를 사용하면서 자식 컴포넌트의 answer라는 변수에 값을 할당하는 것인데 결과값이 The answer is undefined 라고 나온다. 다른 언어로 개발할때도 비슷한 개념이 나오는데 스벨트에서는 자식 컴포넌트의 변수에 접근하기 위해서는 자식 컴포넌트에서 export를 사용하라고 한다 ..
-
Svelte 강의 (9) - Updating arrays and objectsDEV/SVELTE 2023. 11. 16. 22:58
JS를 처음할때 배열도 let로 선언하는걸 보고 깜짝놀랐다.. 모든걸 let으로 처리해버리는 이 편의성.. {numbers.join(' + ')} = {sum} Add a number 이 코드는 addNumber라는 함수에서 numbers라는 배열에 숫자를 1 추가한다. 추가하는 숫자는 numbers.length에 1을 더해서 추가하는데 스벨트에서는 push나 slice와 같은 배열 관련 함수를 사용하면 추가적인 처리가 필요하다는 것이다. 배열에 push를 했으면 numbers = numbers; 처럼 처리해야된다는건데 그렇게 변경된 배열로 $: sum에서 numbers의 배열을 모두 합쳐서 출력한다. 근데 numbers = numbers보다 더 좋은 방법이 numbers = [...numbers, nu..
-
Svelte 강의 (8) - StatementsDEV/SVELTE 2023. 11. 16. 22:44
주로 상태 변화를 추적하고 그에 따라 특정 함수를 실행시킬때 활용하는 방법을 알아보는 파트다. Clicked {count} {count === 1 ? 'time' : 'times'} 위와 같이 console.log로 찍어볼 수 있는데 확인하는 방법은 F12를 눌러 Console 부분에 들어가면 로그를 확인할 수 있다. 나중에 많이 쓰지 않을까? 보통 디버깅할때 로그 많이 찍어보니까.. Clicked {count} {count === 1 ? 'time' : 'times'} 그리고 위의 코드를 실행시키면 count가 10이상일때 메시지가 뜨면서 count를 0으로 초기화 시켜준다.
-
Svelte 강의 (7) - DeclarationsDEV/SVELTE 2023. 11. 16. 22:36
Clicked {count} {count === 1 ? 'time' : 'times'} {count} doubled is {doubled} 이번차수는 Svelte에서 리액티브 선언(reactive declarations)을 사용해보는 예제인데 리액티브 선언이란 컴포넌트의 상태가 변경될 때 자동으로 DOM을 업데이트 해주는 기능이다. 위의 코드에서 count 변수를 선언하고 0으로 초기화 해준 뒤에 count * 2 한 값을 doubled에 할당 했는데 여기서 doubled는 "$:" 를 붙여줘서 리액티브 변수로 만들어 줬다. 이는 count가 변경될때마다 자동으로 다시 계산해주는데 컴포넌트의 상태를 효과적으로 변경될때마다 업데이트 하는데 유용하다고 한다. 유용할거 같긴 하다. 단순히 데이터타입이 숫자뿐만..
-
Svelte 강의 (6) - AssignmentsDEV/SVELTE 2023. 11. 16. 22:30
Clicked {count} {count === 1 ? 'time' : 'times'} Svelte는 DOM을 어플리케이션 상태와 동기화 하기 위해 반응성 시스템을 가지고 있다고 하는데 이는 이벤트에 대한 응답으로 DOM을 업데이트하고 유지하기 위한 기능을 말한다고 한다. 이 개념을 알아보는게 위의 예제인데.. JS에서는 함수를 function이라고 한다. 메서드, 함수 등으로 불리기도 하는데 JS에서는 함수는 1. 특정 작업을 수행하는 기능 2. 직접 호출 가능 3. 재사용 가능 이런 특징이 있다. 메서드(Method)는 객체의 프로퍼티가 함수인 경우인데 실무에서는 그냥 통틀어서 부르기도 한다 C#이나 JAVA에서는 클래스 안에 작성되는 함수는 메서드라 부르고 뭐 그러는데... 나는 따로 구분지어서 말..
-
Svelte 강의 (4) - HTML tagsDEV/SVELTE 2023. 11. 15. 22:39
{@html string} 이번편은 Svelte에서 HTML을 직접 렌더링 하는 방법을 보여주고 있는데 사용 방법은 {@html ...} 이다. 이것은 Svelte에서 제공하는 특수한 태그로 이를 사용하여 문자열 변수 string에 포함된 html을 컴포넌트에 렌더링 하는 것인데 언제 사용하는건지는 잘 모르겠다 아직.. 주의해야 할 점은 {@html ...}의 표현식이 DOM에 삽입되기 전에 어떠한 이스케이핑이나 검증도 이루어지지 않았다는건데 만약 콘텐츠가 신뢰할 수 있는 출처에서 왔따면 문제가 되지 않지만 사용자의 입력과 같이 신뢰할 수 없는 출처에서 오는 경우 수동으로 이스케이핑 수행 하지 않으면 Cross-Site Scripting(XSS)에 노출 될 수 있다는데.. 어떤 공격인지 모르겠다. XSS..
-
Svelte 강의 (3) - StylingDEV/SVELTE 2023. 11. 15. 22:31
이번편은 별게 없다. style에 대해 말해주는데 This is a paragraph. Style에서 p태그에 대해 스타일을 지정하면 에 대해서는 모두 저 스타일로 지정이 된다. 그래서 그다음 Nested components 부분까지 함께 보자. Nested components는 스벨트에서 여러 컴포넌트를 사용 하는 방법을 보여주는데 //App.svelte This is a paragraph. // Nested.svelte This is another paragraph. 위에부분은 App.svelte고 아래는 Nested.svelte이다. Nested.svelte는 그냥 한줄이고 App.svelte에서는 그걸 import 시켜 컴포넌트를 마크업에 추가 했다. 눈 여겨 볼 곳은 import 부분이다. im..