LUVIT 새로운 웹 개발의 시작 스벨트

들어가며

이 포스트는 오시내님의 「LUVIT 새로운 웹 개발의 시작 스벨트」 1장부터 7장까지 읽고 개인적으로 학습한 내용을 정리한 글입니다.

• 책: LUVIT 새로운 웹 개발의 시작 스벨트
• 저자: 오시내
• 출판사: 제이펍
• 챕터: 1장 ~ 4장

핵심 내용 정리

공부 계기

• 백엔드라 부르고 풀스택인 SI 사람으로서 Jquery는 항상 숙명이었고, 그나마 Vuejs로 만든 프론트엔드 프레임워크는 가짜에 가까웠음
• 마침 주변에 프론트엔드 개발자분이 스벨트가 쉽다고 해서 흥미가 돋아 시작해보고 있음
• 자바스크립트 내부적인 부분까진 몰라도 기본 함수나 개념은 얼추 알고 있음

스벨트

• Frameworks without the framework
  • 자바스크립트를 통한 간편한 웹 개발을 모토로 삼은 프레임워크

스벨트의 장점

• Write less code : 다른 프레임워크보다 적은 코드
• No virtual DOM : 가상 DOM 없이 구현
• Truly reactive : 진정한 반응성

Write less code : 다른 프레임워크보다 적은 코드

• 스벨트는 매우 간편한 코드를 가진다 ```javascript

Hello {nane}

### No virtual DOM : 가상 DOM 없이 구현
- 스벨트는 번들 컴파일을 통해 가상 DOM 없이 순수한 자바스크립트로 구현 가능

### Truly reactive : 진정한 반응성
- 메인 이벤트가 발생했을 때 나머지 이벤트들이 반응할 수 있도록 함
```javascript
<script>
    let num = 0;
    $: square = num * num;
    const incrementCount = () => num = num + 1;

</script>
<button on:click={incrementCount}>
    클릭횟수 : {num}
</button>
<p> 제곱 값: {square}</p>

2장 스벨트 개발 환경 구축

• nodejs, Visual Studio Code 설치 ( 이미 설치되어 있음)
• VSC 에서 Svelte for vs code, Svelte 3 Snippet 설치

• 스벨트의 playground에서 download app 해서 다운로드 받고, 프로젝트 에서 npm install 실행

degit을 통한 깃허브 저장소 사용

• degit 설치 및 bundler 설치

    npm install -g degit
    npm degit sveltejs/template 폴더명
  

스벨트 버전 업그레이드

    npx svelte-migrate@latest svelte-4

스벨트 기본 폴더 구조

3장 컴포넌트 기본 사용법

DOM의 문제점

• HTML로 페이지 구현 시 페이지 변경 때마다 내용을 재구성해야함
• 컴포넌트를 통해 매 변경 시 일어나는 재구성을 재사용함

스벨트 컴포넌트 활용

• 컴포넌트 재사용 이유
  • 관리 효율성 : 컴포넌트를 분리해 쉽게 관리
  • 개발 효율성 : 재사용을 통한 효율적 진행

컴포넌트 제작

• 컴포넌트 기본 구조

// 스크립트 영역
<script>

</script>

// 태그 영역
<태그명>

</태그명>

// 스타일 영역
<style>

</style>

기본 컴포넌트 제작하기

• Footer.svelte - Header,Main도 동일한 구성

<h1>푸터 구역</h1>

• MainPage - ProductPage도 비슷한 구성

<script>
    import Header from "./Header.svelte";
    import Footer from "./Footer.svelte";
    import Main from "./Main.svelte";
</script>

<Header/>
<Main/>
<Footer/>

• App.svelte

<script>
	import MainPage from "./MainPage.svelte";
	import ProductPage from "./ProductPage.svelte";
</script>

<MainPage/>
<hr/>
<ProductPage/>

페이지 결과물

4장 상탯값 관리

• 텍스트값 상태 처리

<script>
    let name = 'ossam' ;
</script>

<h1>Hello {name} </h1>

• 태그 속성값 처리

<script>
    let url = 'https://svelte.dev/favicon.png';
</script>

<img src={url} alt="스벨트로고" > </img>

• 상태값의 태그 문자열 인식

<script>
    let str = '안녕하세요! <strong> 테스트 </strong> 입니다.';
</script>

<p> { @html str} </p>

• 스벨트 이벤트 처리 방법

<script>
    let num = 0;

    const increaseNumber = () => num++;

    const decreaseNumber = () => num--;
</script>

<button on:click={increaseNumber}>+</button>
<button on:click={decreaseNumber}>-</button>
<hr/>
<h1> 숫자값 : {num}</h1>

• 객체를 상태값으로 활용

<script>
    let language = {
        name : '스벨트',
        release: 2016,
        src: 'https://svelte.dev/favicon.png'
    }
</script>

<h3>이름 : {language.name}</h3>
<h3>배포 연도 : {language.release} 년 </h3>
<img src= {language.src} alt = {language.name} width = "100"/>

• 객체 비구조화 할당 적용

<script>
    let language = {
        name : '스벨트',
        release: 2016,
        src: 'https://svelte.dev/favicon.png'
    }
    let {name , release, src} = language
</script>

<h3>이름 : {name}</h3>
<h3>배포 연도 : {release} 년 </h3>
<img src= {src} alt = {name} width = "100"/>

• each 블록을 통한 상태값이 배열 시 반복문 예시

<script>
    let langs = [
        {
            name : 'svelte',
            release : 2016,
            src: 'https://svelte.dev/favicon.png'
        } ,
        {
            name : 'react',
            release : 2013,
            src: 'https://ko.legacy.reactjs.org/favicon.ico'
        },
        {
            name : 'vue',
            release : 2013,
            src: 'https://v2.ko.vuejs.org/images/logo.png'
        }
    ];
</script>

{#each langs as lang}
    <h3>이름 : {lang.name}</h3>
    <h3>배포 연도 : {lang.release} 년 </h3>
    <img src="{lang.src}" alt="{lang.name}">
{/each}