웹언어/Svelte (12) 썸네일형 리스트형 [Svelte강좌] 3강 State(상태값) - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. 1. 기본개념 - https://youtu.be/m7wrjrUf4oE 2. 확장개념 - https://youtu.be/o8sYNrUD6QM 1. State(상태 값)란? - State란 컴포넌트가 어떤 값을 관리할 때 사용하는 것을 말합니다. - 상태 값은 컴포넌트로 표현할 값의 상태나 목록이 되기도 하며, 이벤트를 통해 발생된 마우스나 키보드의 데이터도 상태 값이 될 수 있습니다. 즉, 프런트엔드를 구성하는 모든 데이터가 상태 값입니다. - 리액트(React)에서는 useState()라는 함수를 통해 값을 관리하는데, 스벨트(Svelte)는 자바스크립트에서는 변수처럼 사용하고, 마크업에서는 중괄호({ })를 사용하여 상태 값을 표현합니다. 1) 텍.. [Svelte강좌] 2강 컴포넌트 - 기본사용법 - 오쌤의 니가스터디 ** 영상으로 보실 분은 아래 주소를 클릭해주세요. https://youtu.be/zM29Sf0ncck 1. src 폴더 파일 구조 - 지난 강좌에서 Svelte 설치 폴더 구조를 확인했습니다. - 여기에 src폴더에 있는 2개의 파일 구조를 보도록 하겠습니다. 1) App.svelte - [ App.svelte ]는 최상위 컴포넌트 파일입니다. - Svelte에서는 컴포넌트 확장자가 [ js ]가 아닌 [ svelte ]으로 된다는 것을 잘 기억해주시면 됩니다. ## 설치된 처음 코드 보기 Hello {name}! - 처음엔 간단히 이렇게 작성되어 있습니다. ## 컴포넌트 구역 확인하기 //script 영역 //markup 영역 //style 영역 - 컴포넌트는 3가지 구역으로 나눕니다. 3개의 작성 .. [Svelte강좌] 1강 스벨트 개발환경 구축(설치) - 오쌤의 니가스터디 ** 영상으로 보실 분은 아래 주소를 눌러 클릭하세요! https://youtu.be/kxGsmwVGoO0 1. REPL(Read-Eval-Print-Loop) - Svelte는 공식 사이트에서 REPL을 통해, 별도의 설치 과정이나 컴파일 없이 코딩하고 바로 결과를 확인할 수 있는 서비스를 제공하고 있습니다. - 이 기능은 코딩은 좀 해봤다면 들어 본, CodeSandbox같이 코드만 입력해도 바로 결과가 보입니다. 1) Svelte사이트 접속 - 우선 아래 주소를 클릭해서 Svelte사이트에 접속해주세요. https://svelte.dev/ Svelte • Cybernetically enhanced web apps Svelte is a radical new approach to building use.. [Svelte강좌] 인트로- 스벨트는 무엇인가? - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/9Pzvu1IKmDc 1. Svelte의 현 위치 - 아직까지 웹프론트엔드 프레임워크의 대세는 react입니다. - 위의 트렌드 그래프에서도 보다시피 주황색 라인인 react조회수가 월등한 것을 확인할 수 있습니다. - 그 다음이 vue, 그리고 angular, svelte 순서로 볼 수 있습니다. - 그럼에도 불구하고 제가 Svelte강의를 열게 된 것은 easy, easy, easy하기 때문입니다. - 웹프론트엔드를 처음 배우거나, 웹퍼블리셔에서 프런트엔드 개발자로 넘어갈 때 React부터 한다면 매우 어렵게 느껴질 것입니다. - 좀 쉬운 Svelte로 웹프론트엔드 프레임워크들을 이런 것이구나를 익히도 다른 언어를.. 이전 1 2 다음
