오쌤의 니가스터디

** 요일 배열

let weekdays = ['일','월','화','수','목','금','토'];

** 야구 순위 배열

let teams = ['LG 트윈스','KT 위즈','SSG 랜더스','NC 다이노스','두산 베어스','KIA 타이거즈','롯데 자이언츠','삼성 라이온즈','한화 이글스','키움 히어로즈'];

** 배열 객체 데이터

let langs = [
    {
        id: 1,
        name: '스벨트(Svelte)',
        release: 2016,
        src: 'https://svelte.dev/_app/immutable/assets/svelte-logo.5c5d7d20.svg',
    },
    {
        id: 2,
        name: '리액트(React)',
        release: 2013,
        src: 'https://ko.legacy.reactjs.org/favicon.ico',
    },
    {
        id: 3,
        name: '뷰(Vue.js)',
        release: 2013,
        src: 'https://v2.ko.vuejs.org/images/logo.png',
    }
];

ch08_EachBlock.zip

Chapter 09. Input Binding : https://youtu.be/fnu3C9cJALg

ch09_InputBinding.zip

Chapter 10. Select Binding : https://youtu.be/wns9o7pSQdE

** 포털사이트 배열

let portals = [
    { name: '사이트선택', url: null },
    { name: '네이버', url: 'https://naver.com' },
    { name: '다음', url: 'https://daum.net' },
    { name: '구글', url: 'https://google.com' }
];

** 분식점 메뉴 배열

let foods = ['떡볶이','순대','오뎅','튀김'];

ch10_SelectBinding.zip

ch11_EachBlockBinding.zip

Chapter 11. Each Block Binding : https://youtu.be/0CbfIMwOGbE

** 버킷리스트 배열

let buckets = [
    { chk: false, text: '웹프론트엔드개발자되기' },
    { chk: false, text: '유럽여행가기' },
    { chk: false, text: '영국가서 손흥민 축구보기' }
];

Chapter 12. Media Element Binding : https://youtu.be/diEz2HJ-y_0

** 마크업

<h1>Caminandes: Llamigos</h1>
<p>From <a href="https://studio.blender.org/films">Blender Studio</a>. CC-BY</p>
<video
	poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
	src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
	width="500"
>
	<track kind="captions" />
</video>
<br />
<button>재생</button>
<button>멈춤</button>
<button>초기화</button>
<p>총 재생시간 : ???초</p>
<p>현재 재생위치 : ???초</p>

ch12_MediaBinding.zip

Chapter 13. This Binding : https://youtu.be/eNPggq9ygO0

ch13_ThisBinding.zip

Chapter 14. 기타 바인딩 : https://youtu.be/CwoNMfLD-SM

** Dimension 코드

<script>

</script>

<p>슬라이드바로 글자 크기를 변경해보세요.</p>
<input type="range" min="10" max="100" />
<p>글자 크기 : ???px</p>
<div>
    <span>글자</span>
</div>
<ul>
    <li>가로 폭 : </li>
    <li>세로 높이 : </li>
</ul>

<style>
    div{ display: inline-block; border: 3px solid black; }
</style>

** Child.svelte

<script>
    export let childValue;
    const double = () => childValue *= 2;
</script>

<button on:click={double}>두배구하기</button>
<p>자손 값 : {childValue}</p>

** Parent01.svelte

<script>
	//Props전달의 문제점이 있는 코드
    import Child from "./Child.svelte";
    let parentValue = 1;
</script>

<Child childValue={parentValue} />
<p>부모 값 : {parentValue}</p>

ch14_EtcBinding.zip

Chapter 15. Slot :

- slot01 : https://youtu.be/aXGRixrRt6o

- slot02 : https://youtu.be/x50RXXkHQdk

** Child01.svelte

<div class="box">
    
</div>

<style>
    .box{
        width: 200px; padding: 10px;
        border: 2px solid black; margin-bottom: 20px;
    }
</style>

** SlotParent01.svelte

<h4>이름 : 스벨트(Svelte)</h4>
<p>배포년도 : 2016년</p>
<img src="https://svelte.dev/_app/immutable/assets/svelte-logo.5c5d7d20.svg" alt="스벨트(Svelte)" height="50" />

<h4>이름 : 리액트(React)</h4>
<p>배포년도 : 2013년</p>
<img src="https://ko.legacy.reactjs.org/favicon.ico" alt="리액트(React)" height="50" />

** SlotParent03.svelte - 스타일

<style>
    .active{
        background-color: #000;
        color: #fff;
        cursor: pointer;
    }
</style>

ch15_Slot.zip

Chapter 16. Life Cycle : https://youtu.be/41ADQtYP53U

** LifeCycle01.svelte의 스타일

<style>
    .comments {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 8px;
    }
</style>

ch16_LifeCycle.zip

Chapter 17. update응용 - elizabot : https://youtu.be/jP6rDUVtKH0

** 스타일

<style>
    .chat {
        display: flex; flex-direction: column;
        height: 100%; max-width: 320px;
    }
    .scrollable {
        flex: 1 1 auto; border-top: 1px solid #ccc;
        margin: 0 0 0.5em 0; overflow-y: auto;
    }
    article { margin: 0.5em 0; }
    .user { text-align: right; }
    span { 
        color: black; padding: 0.5em 1em; 
        display: inline-block; 
    }
    .eliza span {
        background-color: #eee;
        border-radius: 1em 1em 1em 0;
    }
    .user span {
        background-color: #0074d9;
        color: white; border-radius: 1em 1em 0 1em;
    }
</style>

** 태그 구조

<div class="chat">
    <h1>Eliza</h1>
    <div class="scrollable">
        
    </div>
    <input type="text" />
</div>

** keydown이벤트 코드

if (e.key === 'Enter') {
    const text = e.target.value;
    if (!text) return;
    comments = comments.concat({
        author: 'user',
        text
    });

    e.target.value = '';
    const reply = eliza.transform(text);

    setTimeout(() => {
        comments = comments.concat({
            author: 'eliza',
            text: '...',
            placeholder: true
        });
        setTimeout(() => {
            comments = comments
           .filter((comment) => !comment.placeholder)
           .concat({
               author: 'eliza',
               text: reply
           });
        }, 500 + Math.random() * 500);
    }, 200 + Math.random() * 200);
}

ch17_Elizabot.zip

0.07MB

Chapter 18. 라이트사이클 - tick함수 : https://youtu.be/BDL12OA-EcU

ch18_tick함수.zip

Chapter 19. Context API : https://youtu.be/GTKeG09_VYk

** PropsGrand.svelte

<script>
    import PropsFather from "./PropsFather.svelte";
</script>

<div>
    <h1>Grand 구역</h1>
    <button>1씩 증가</button>
    <p>기본 숫자 : </p>
    <hr />
    <PropsFather />
</div>

** PropsFather.svelte

<script>
    import PropsChild from "./PropsChild.svelte";
</script>

<div>
    <h2>Father 구역</h2>
    <hr />
    <PropsChild />
</div>

** PropsChild.svelte

<script>

</script>

<div>
    <h3>Child 구역</h3>
    <p>제곱 숫자 : </p>
</div>

** DispatchGrand.svelte

<script>
    //최상위 컴포넌트
    import DispatchFather from "./DispatchFather.svelte";

    //상태값
    let num = 0;
</script>

<p>num : {num}</p>
<DispatchFather />

** DispatchFather.svelte

<script>
    //자손컴포넌트
    import DispatchChild from "./DispatchChild.svelte";
</script>

<DispatchChild />

** DispatchChild.svelte

<script>
    //후손컴포넌트
</script>

<button>1씩증가</button>
<button>2씩증가</button>

ch19_ContextAPI.zip

Chapter 20. Store : https://youtu.be/LX7isTM2UFc

ch20_Stores.zip

Chapter 21. Custom Store : https://youtu.be/lQxn5vGXEmU

ch21_CustomStores.zip

Chapter 22. Svelte CSS 제어 : https://youtu.be/8yDMJB2UShA

** Button.svelte

<script>
    
</script>

<button>첫번째 버튼</button>
<button>두번째 버튼</button>
<button>세번째 버튼</button>

<style>
    button{
        border: none; border-radius: 5px; background-color: #ededed; 
        padding: 5px 20px; cursor: pointer;
    }
    button::after{ content: ' - 비활성'; }
    .active{ background-color: cornflowerblue; color: white; }
    .active::after{ content: ' - 활성'; }
</style>

** Check.svelte

<script>
    //상태 변수 - true / false처리
    let border = false;
</script>

<h3>테두리 선택</h3>
<label>
    <input type="checkbox"> 실선
</label>
<hr />
<button>버튼</button>

<style>
    button{
        border: none; border-radius: 5px; background-color: #ededed; 
        padding: 5px 20px; cursor: pointer;
    }
    .border{ border: 3px solid green; }
</style>

** RadioButton.svelte

<script>
    //class지시문과 사용할 상태변수
    let borderSolid, borderDashed, borderDouble;
</script>

<h3>테두리 선택</h3>

<style>
    button{
        border: none; border-radius: 5px; background-color: #ededed; 
        padding: 5px 20px; cursor: pointer;
    }
    .borderSolid{ border: 3px solid green; }
    .borderDashed{ border: 3px dashed green; }
    .borderDouble{ border: 3px double green; }
</style>

ch22_Css.zip

Chapter 23. rollup을 이용한 SASS : https://youtu.be/KEFV2XJg2Us

ch23_sass.zip

Chapter 24. transition1 - fade효과 : https://youtu.be/rZmLIMBNxxI

ch24_transition-fade.zip

Chapter 25. transition2 - blur/slide : https://youtu.be/gsbWN_xLRwM

** Blur01.svelte

<script>
    let visible = false;
</script>

<label>
    <input type="checkbox" bind:checked={visible} /> 보임
</label>

{#if visible}
    <p>Svelte Blur Effect</p>
{/if}

<style>
    p{ height: 100px; background-color: orange; }
</style>

ch25_blurslide.zip

Chapter 26. transition3 - scale/fly: https://youtu.be/_E9y3SVgDD4

** Scale01.svelte

<script>
    let visible = false;
</script>

<label>
    <input type="checkbox" bind:checked={visible} /> 보임
</label>

{#if visible}
    <p>Svelte Blur Effect</p>
{/if}

<style>
    p{ height: 100px; background-color: orange; }
</style>

ch26_scalefly.zip

Chapter 27. transition4 - draw/crossfade : https://youtu.be/e6NSZ7dAqsc

** Draw.svelte

<script>
    let visible = false;
</script>

<label>
    <input type="checkbox" bind:checked={visible} /> 보임
</label> 

<svg viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg">
    {#if visible}
        <path
            d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z"
            fill="none"
            stroke="cornflowerblue"
            stroke-width="0.1px"
            stroke-linejoin="round"
        />
    {/if}
</svg>

** Crossfade.svelte

<script>
    //미완료버킷리스트
    let bid = 1;
    let buckets = [
        { id: bid++, chk: false, text: '웹프론트엔드개발자되기' },
        { id: bid++, chk: false, text: '유럽여행가기' },
        { id: bid++, chk: false, text: '영국가서 손흥민 축구보기' }
    ];
    //남은 버킷개수
    $: remainingBuckets = buckets.filter(bucket => !bucket.chk).length;

    //완료버킷리스트
    let finished = [];
    //완료된 버킷개수
    $: finishedBuckets = finished.filter(bucket => bucket.chk).length;

    //버킷리스트 추가 이벤트 함수
    const onAdd = () => {
        buckets = buckets.concat({ id: bid++, chk: false, text: '' });
    }
</script>

<h1>Bucket List</h1>
<div class="bucketBlock">
    <!-- 미완료 구역 -->
    <div class="unfinished">
        <h2>Unfinished Buckets</h2>
        {#each buckets as bucket (bucket.id)}
            <div>
                <input type="checkbox" bind:checked={bucket.chk} />
                <input type="text" placeholder="당신의 버킷리스트는 뭔가요?" style="width: 250px" bind:value={bucket.text} disabled={bucket.chk} />
            </div>
        {/each}
        <p>남은 버킷리스트 : {remainingBuckets}</p>
        <button on:click={onAdd}>새로운 버킷 추가</button>
    </div>
    <!-- 완료 구역 -->
    <div class="finished">
        <h2>Finished Buckets</h2>
        {#each finished as bucket (bucket.id)}
            <div>
                <input type="checkbox" bind:checked={bucket.chk} />
                <input type="text" placeholder="당신의 버킷리스트는 뭔가요?" style="width: 250px" bind:value={bucket.text} disabled={bucket.chk} />
            </div>
        {/each}
        <p>완료된 버킷리스트 : {finishedBuckets}</p>
    </div>
</div>

<style>
    .bucketBlock{ display: flex; }
    .unfinished{ margin-right: 40px; }
</style>

ch27_drarw와crossfade.zip

ch28_customtransition.zip

Chapter 28. Custom Transition : https://youtu.be/qnE7-RD9xRM

** Css.svelte

<script>
    let visible = false;
</script>

<label>
    <input type="checkbox" bind:checked={visible} /> 보임
</label>

{#if visible}
    <div class="centered">
        <span>transitions!</span>
    </div>
{/if}

<style>
    .centered {
        position: absolute; left: 50%; top: 50%;
        transform: translate(-50%, -50%);
    }
    span {
        position: absolute; font-size: 4em;
        transform: translate(-50%, -50%);
    }
</style>

** Javascript.svelte

<script>
    let visible = false;
</script>

<label>
    <input type="checkbox" bind:checked={visible} /> 보임
</label>

{#if visible}
    <p >안녕하세요!!! 오쌤의 니가스터디입니다.</p>
{/if}

** Bucket.svelte

<script>
    //crossfade 호출
    import { crossfade } from 'svelte/transition';
    import { quintOut } from 'svelte/easing';

    //crossfade() 내부 값 비구조화할당
    const [send, receive] = crossfade({
        duration: 400, //보내고 받을 때의 시간 지정
        easing: quintOut //보내고 받을 때의 easing함수 지정
    });
    let bid = 1;
    let buckets = [
        { id: bid++, chk: false, text: '웹프론트엔드개발자되기' },
        { id: bid++, chk: false, text: '유럽여행가기' },
        { id: bid++, chk: false, text: '영국가서 손흥민 축구보기' }
    ];
    $: remainingBuckets = buckets.filter(bucket => !bucket.chk).length;

    let finished = [];
    $: finishedBuckets = finished.filter(bucket => bucket.chk).length;

    const onAdd = () => {
        buckets = buckets.concat({ id: bid++, chk: false, text: '' });
    }

    //배열 데이터를 이동하는 함수선언
    const move = (item, from, to) => {
        //item : 선택된 요소, from : 요소의 현재 배열, to: 이동할 배열
        to.push(item);
        return [from.filter(i => i !== item), to];
    }

    //B영역의 요소를 A영역으로 보내는 함수선언
    const moveLeft = item => { 
        [finished, buckets] = move(item, finished, buckets);
    }

    //A영역의 요소를 B영역으로 보내는 함수선언
    const moveRight = item => {
        [buckets, finished] = move(item, buckets, finished);
    }
</script>

<h1>Bucket List</h1>
<div class="bucketBlock">
    <!-- 미완료 구역 -->
    <div class="unfinished">
        <h2>Unfinished Buckets</h2>
        {#each buckets as bucket (bucket.id)}
            <div in:receive={{key: bucket.id}} out:send={{key: bucket.id}}>
                <input type="checkbox" bind:checked={bucket.chk} on:change={() => moveRight(bucket)} />
                <input type="text" placeholder="당신의 버킷리스트는 뭔가요?" style="width: 250px" bind:value={bucket.text} disabled={bucket.chk} />
            </div>
        {/each}
        <p>남은 버킷리스트 : {remainingBuckets}</p>
        <button on:click={onAdd}>새로운 버킷 추가</button>
    </div>
    <!-- 완료 구역 -->
    <div class="finished">
        <h2>Finished Buckets</h2>
        {#each finished as bucket (bucket.id)}
            <div in:receive={{key: bucket.id}} out:send={{key: bucket.id}}>
                <input type="checkbox" bind:checked={bucket.chk} on:change={() => moveLeft(bucket)} />
                <input ype="text" placeholder="당신의 버킷리스트는 뭔가요?" style="width: 250px" bind:value={bucket.text} disabled={bucket.chk} />
            </div>
        {/each}
        <p>완료된 버킷리스트 : {finishedBuckets}</p>
    </div>
</div>

<style>
    .bucketBlock{ display: flex; }
    .unfinished{ margin-right: 40px; }
</style>

0.07MB

Chapter 29. 트랜지션 이벤트와 수식어 : https://youtu.be/y8bmjfm4sVI

** Event.svelte

<script>
    import { fly } from 'svelte/transition';

    let visible = false;
</script>

<label>
    <input type="checkbox" bind:checked={visible}> 보임
</label>

{#if visible}
    <p
        transition:fly={{ y: 200, duration: 2000 }}
    >Svelte Transition Event</p>
{/if}

** Modifiers.svelte

<script>
    import { slide } from 'svelte/transition';

    let showItems = true;
    let i = 5;
    let items = ['첫', '두', '세', '네', '다섯'];
</script>

<label>
    <input type="checkbox" bind:checked={showItems}> 전부 보이게 처리
</label>
<label>
    <input type="range" bind:value={i} max=5>
</label>

{#if showItems}
    {#each items.slice(0, i) as item}
        <div transition:slide>{item}번째 리스트</div>
    {/each}
{/if}

<style>
    div{ padding: 15px 0; border-top: 1px solid #ccc; }
    div:last-child{ border-bottom: 1px solid #ccc; }
</style>

ch29_트랜지션이벤트와수식어.zip

Chapter 30. Svelte Animation : https://youtu.be/BiYNrFDFY-8

** Flip.svelte

<script>
    let items = [1, 2, 3]; //초기 배열 번호

    //클릭시 버튼 번호가 랜덤한 위치로 바뀌게 처리
    const shuffle = () => {
        items = items.sort(() => Math.random() - 0.5);
    }
</script>

{#each items as item (item)}
    <div class="item">
        {item}
    </div>
{/each}
<hr />
<button on:click={shuffle}>순환</button>

<style>
    .item {
        padding: 10px; margin: 5px;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        display: inline-block;
    }
</style>

** Bucket.svelte

<script>
    import { crossfade } from 'svelte/transition';
    import { quintOut } from 'svelte/easing';

    const [send, receive] = crossfade({
        duration: 400,
        easing: quintOut, 
        fallback(node, params) { //fallback추가
            return{
                duration: 300,
                easing: quintOut,
                css: t => `
                    transform: scale(${t}); //크기변화 추가
                    opacity: ${t}; //투명도 추가
                `
            }
        }
    });
    let bid = 1;
    let buckets = [
        { id: bid++, chk: false, text: '웹프론트엔드개발자되기' },
        { id: bid++, chk: false, text: '유럽여행가기' },
        { id: bid++, chk: false, text: '영국가서 손흥민 축구보기' }
    ];
    $: remainingBuckets = buckets.filter(bucket => !bucket.chk).length;

    let finished = [];
    $: finishedBuckets = finished.filter(bucket => bucket.chk).length;

    const onAdd = () => {
        buckets = buckets.concat({ id: bid++, chk: false, text: '' });
    }

    const move = (item, from, to) => {
        //item : 선택된 요소, from : 요소의 현재 배열, to: 이동할 배열
        to.push(item);
        return [from.filter(i => i !== item), to];
    }
    const moveLeft = item => { 
        [finished, buckets] = move(item, finished, buckets);
    }
    const moveRight = item => {
        [buckets, finished] = move(item, buckets, finished);
    }
</script>

<h1>Bucket List</h1>
<div class="bucketBlock">
    <!-- 미완료 구역 -->
    <div class="unfinished">
        <h2>Unfinished Buckets</h2>
        {#each buckets as bucket (bucket.id)}
            <div in:receive={{key: bucket.id}} out:send={{key: bucket.id}}>
                <input type="checkbox" bind:checked={bucket.chk} on:change={() => moveRight(bucket)} />
                <input type="text" placeholder="당신의 버킷리스트는 뭔가요?" style="width: 250px" bind:value={bucket.text} disabled={bucket.chk} />
            </div>
        {/each}
        <p>남은 버킷리스트 : {remainingBuckets}</p>
        <button on:click={onAdd}>새로운 버킷 추가</button>
    </div>
    <!-- 완료 구역 -->
    <div class="finished">
        <h2>Finished Buckets</h2>
        {#each finished as bucket (bucket.id)}
            <div in:receive={{key: bucket.id}} out:send={{key: bucket.id}}>
                <input type="checkbox" bind:checked={bucket.chk} on:change={() => moveLeft(bucket)} />
                <input type="text" placeholder="당신의 버킷리스트는 뭔가요?" style="width: 250px" bind:value={bucket.text} disabled={bucket.chk} />
            </div>
        {/each}
        <p>완료된 버킷리스트 : {finishedBuckets}</p>
    </div>
</div>

<style>
    .bucketBlock{ display: flex; }
    .unfinished{ margin-right: 40px; }
</style>

ch30_animation.zip

Chapter 31. Svelte Motion : https://youtu.be/pHdwFqm60qU

** Tweened.svelte

<script>

</script>

<progress value="50" max="100" />
<button> 0% </button>
<button> 25% </button>
<button> 50% </button>
<button> 75% </button>
<button> 100% </button>

<style>
    progress { display: block; width: 100%; }
</style>

** Spring.svelte

<script>
    let x, y;
</script>

<svg on:mousemove={(e) => { x = e.clientX; y = e.clientY; }}>
    <circle cx={x} cy={y} r="10" />
</svg>

<style>
    svg{ width: 100%; height: 100%; margin: -8px; }
    circle{ fill: #ff3e00; }
</style>

ch31_motion.zip

Chapter 32. Svelte Action : https://youtu.be/pHdwFqm60qU

** Action02.svelte

<script>
    //상태변수 선언
    let isInput01 = false;
    let isInput02 = false;

    //이벤트함수
    const handleClick01 = () => {
        isInput01 = true;
    }
    const handleClick02 = () => {
        isInput02 = true;
    }
</script>

<button on:click={handleClick01}>첫번째입력요소활성</button>
{#if isInput01}
    <input type="text" placeholder="첫번째" />
{/if}
<button on:click={handleClick02}>두번째입력요소활성</button>
{#if isInput02}
    <input type="text" placeholder="두번째" />
{/if}

** Action04.svelte

<script>
    //상태변수 선언
    let isInput = false;
    let inputValue = '아직 없음';

    //이벤트함수
    const handleClick = (param) => {
        isInput = param;
    }

    //초점액션
    const inputFocus = (node, value) => {
        node.focus();
        node.value = value;
    }
</script>

<button on:click={() => handleClick(true)}>활성</button>
<button on:click={() => handleClick(false)}>비활성</button>
<hr />
{#if isInput}
    <input type="text" bind:value={inputValue} use:inputFocus={inputValue} />
{/if}
<h3>입력값 : {inputValue}</h3>

ch32_action.zip

Chapter 33. Svelte Action Library : https://youtu.be/DD_nokYvQYI

** DND.svelte

<script>
    let items = [
        {id: 1, name: "item1"},
        {id: 2, name: "item2"},
        {id: 3, name: "item3"},
        {id: 4, name: "item4"}
    ];
</script>

<section>
    {#each items as item(item.id)}
        <div>{item.name}</div>
    {/each}
</section>

<style>
    section {
        width: 50%; padding: 0.3em;
        border: 1px solid black;
        overflow: scroll; height: 200px;
    }
    div {
        width: 50%; padding: 0.2em; margin: 0.15em 0;
        background-color: blue; color: white;
    }
</style>

** Buckets.svelte

<script>
    import Drag from './Drag.svelte';

    let bid = 1;
    let buckets = [
        { id: bid++, chk: false, title: '웹프론트엔드개발자되기' },
        { id: bid++, chk: false, title: '유럽여행가기' },
        { id: bid++, chk: false, title: '영국가서 손흥민 축구보기' }
    ];

    let finished = [];
</script>

<h1>Bucket List</h1>
<div class="bucketBlock">
    <div class="unfinished">
        <h2>Unfinished Buckets</h2>
    </div>
    <div class="finished">
        <h2>Finished Buckets</h2>
    </div>
</div>

<style>
    .bucketBlock{ display: flex; }
    .bucketBlock > div{ width: 310px; }
    .unfinished{ margin-right: 40px; }
</style>

** Drag.svelte

<script>
    
</script>

<div class="drag">

</div>


<style>
    .drag{
        width: 100%; min-height: 180px;
        border: 1px solid #ededed;
        padding: 20px; box-sizing: border-box;
    }
</style>

ch33_actionlibrary.zip

Chapter 34. Svelte Special Element1 : https://youtu.be/fzCJtFS9cYg

ch34_special01.zip

Chapter 35. Svelte Special Element2 : https://youtu.be/qZpIwLzHbBU

** Window01.svelte

<script>

</script>

<style>
    div{
        display: flex; height: 100%; 
        text-align: center; align-items: center;
        justify-content: center; flex-direction: column;
    }
    kbd{
        background-color: #eee; border-radius: 3px;
        border: 1px solid #b4b4b4;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
        0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
        color: #333; display: inline-block;
        font-size: 0.85em; font-weight: 700;
        line-height: 1; padding: 0.2em 0.5em;
        font-size: 20px; white-space: nowrap;
    }
</style>

** Window02.svelte

<script>
    
</script>

<div></div>
<h3>스크롤바 좌표 : </h3>


<style>
    div{ height: 2000px; }
    h3{ position: fixed; left: 10px; top: 10px; }
</style>

** Document.svelte

<script>
    
</script>

<h3>이 글자를 드래그선택하면 아래 그대로 반환됩니다.</h3>
<hr />
<p>선택된 글자: </p>

** Body.svelte

<script>
    let visible = false;
</script>

{#if visible}
    <div class="centered">
        
    </div>
{/if}

<style>
    .centered {
        font-size: 20vw; position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        font-family: 'Overpass';
        letter-spacing: 0.12em;
        color: #676778; font-weight: 400;
    }
    .centered span { will-change: filter; }
</style>

ch35_special02.zip

Chapter 36. Svelte Special Element3 : https://youtu.be/Na4zJiZ5Pmw

** Options.svelte

<script>
    import Heart from "./Heart.svelte";

    let langs = [
        { id: 1, like: false, text: 'Svelte' },
        { id: 2, like: false, text: 'React' },
        { id: 3, like: false, text: 'Vue' }
    ];

    const toggle = id => {
        langs = langs.map(lang => {
            if(lang.id === id) {
                return {
                    id: lang.id,
                    like: !lang.like,
                    text: lang.text
                };
            }
            return lang;
        });
    }
</script>

{#each langs as lang}
    <Heart lang={lang} on:click={() => toggle(lang.id)} />
{/each}

** Heart.svelte

<script>
    import { afterUpdate } from 'svelte';

    export let lang;

    afterUpdate(() => {
        console.log(lang.text + ' : ' + lang.like);
    });
</script>

<button on:click>
    {#if lang.like}
        <span>♥</span>
    {:else}
        <span>♡</span>
    {/if}
    {lang.text}
</button>

** Child03.svelte

<div class="box">
    <h4>
        이름 : 
        <slot name="name">
            전달받은 이름이 없습니다.
        </slot>
    </h4>
    <p>
        배포년도 : 
        <slot name="release">
            전달받은 배포년도 없습니다. 
        </slot>
    </p>
</div>

<style>
    .box{
        width: 300px; padding: 10px;
        border: 2px solid black;   
        margin-bottom: 20px;
    }
</style>

** SlotParent03.svelte

<script>
    import Child03 from "./Child03.svelte";
</script>

<Child03>
    <span slot="name">스벨트(Svelte)</span>
    <span slot="release">2016</span>
</Child03>

<Child03>
    <span slot="name">리액트(React)</span>
    <span slot="release">2013</span>
</Child03>
<Child03></Child03>

ch36_special03.zip

Chapter 37. 외부 라이브러리 Iconify : https://youtu.be/mLVn1E6qh2s

ch37_iconify.zip

0.09MB

Chapter 38. 외부라이브러리 UUID : https://youtu.be/Ukq-NMP7Ovw

ch38_uuid.zip

Chapter 39. Bucket List :

** global.css

/* base */
*{ padding: 0; margin: 0; }
body{ background-color: #e9ecef; }

/* bucketbox */
.bucketbox{
    width: 512px; height: 768px; overflow: hidden; margin: auto;
    position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    background: #fff; border-radius: 16px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04);
}

/* bucketheader */
.bucketheader{
    padding: 48px 32px 24px; border-bottom: 1px solid #e9ecef;
}
.bucketheader h1{
    margin: 0 0 30px; color: #333; font-size: 36px; text-align: center;
}
.bucketheader h2{
    margin-top: 4px; font-size: 20px; color: #666; text-align: right;
}
.bucketheader p{
    margin-top: 10px; color: #0593d3;
    font-size: 20px; text-align: right; font-weight: bold;
}

/* bucketlist */
.bucketlist{
    padding: 20px 32px 48px;
    height: 350px; /* create후 수치조절 */
    overflow-y: auto; /* 리스트 많으면 스크롤바생성 */
}

/* bucketitem */
.bucketitem{
    position: relative; padding: 12px 0; display: flex; align-items: center;
}
.bucketitem p{ font-size: 21px; color: #495057; }
.bucketitem input[type="checkbox"]{ position: absolute; left: -999em; }
.bucketitem input[type="text"]{ width: 330px; padding: 5px 10px; }
.bucketitem .checkcircle{
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 16px; margin-right: 20px;
    border: 1px solid #ced4da; font-size: 24px; cursor: pointer;
}
.bucketitem .checkcircle > *{ color: #0593d3; display: none; }
.bucketitem input:checked + .checkcircle{ border-color: #0593d3; }
.bucketitem input:checked + .checkcircle > *{ display: block; }
.bucketitem input:checked ~ p{ color: #0593d3; text-decoration: line-through; }
.bucketitem .remove{
    position: absolute; right: 0; transform: translateY(-50%,50%);
    margin-top: 10px; color: #dee2e6; font-size: 24px;
    cursor: pointer; border: none; background-color: transparent;
    display: none; /* 안보이게 처리 */
}
.bucketitem .remove:hover{ color: #ff6b6b; }
/* 리스트에 마우스 올리면 휴지통 아이콘 보이게 처리 */
.bucketitem:hover .remove{ display: block; }

/* bucketcreate */
.createform{
    width: 100%; transition: 0.2s; 
    position: absolute; bottom: 0; left: 0;
    transform: translateY(100%);
}
.createform.active{ transform: translateY(0); }
.createform.active + .circlebox{ /* 회전되서 빨간색X */
    background: #fa5252;
    transform: rotate(45deg); /* 회전처리 */
}
.createform form{
    background: #f8f9fa; padding: 32px 112px 36px 32px;
    border-radius: 0 0 16px 16px; border-top: 1px solid #e9ecef;
}
.createform input{
    width: 100%; padding: 12px; outline: none; font-size: 16px;
    border-radius: 4px; box-sizing: border-box; border: 1px solid #dee2e6;
} 
.circlebox{
    position: absolute; right: 16px; bottom: 16px; z-index: 5; 
    width: 80px; height: 80px; cursor: pointer; 
    display: flex; align-items: center; justify-content: center;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    border-radius: 50%; border: none; outline: none;
    background: #0593d3; font-size: 60px; color: white;
    transition: 0.125s all ease-in; /* X자로 회전시 자연스럽게 처리 */
}
.circlebox:hover{ background: #36bffc; }

** bucketData.js

const initialBuckets = [
    {
        id: 1,
        text: "웹프론트엔드개발자되기",
        chk: true
    },
    {
        id: 2,
        text: "유럽여행가기",
        chk: true
    },
    {
        id: 3,
        text: "서울에 집사기",
        chk: false
    },
    {
        id: 4,
        text: "영국가서 손흥민 축구보기",
        chk: false
    },
    {
        id: 5,
        text: "스위스가서 시계사기",
        chk: false
    }
];

export { initialBuckets };

ch39_bucketlist01.zip

ch39_bucketlist02.zip

ch39_bucketlist03.zip

0.11MB

ch39_bucketlist04.zip

0.12MB

ch39_bucketlist05.zip

0.13MB

Chapter 40. Best Tour :

## global.css

*{ padding: 0; margin: 0; color: #333; }
li{ list-style: none; }
a{ text-decoration: none; }


/* bestbox */
.bestbox{
    width: 1180px; margin: 0 auto;
    padding: 10px 10px 90px; box-sizing: border-box;
    position: relative; /* +/x 자버튼 위치 컨트롤 */
}

.bestbox h2{ height: 70px; font-size: 30px; line-height: 70px; text-align: center; }
.bestbox ul{ width: 100%; overflow: hidden; margin-bottom: 30px; }
.bestbox li{ float: left; width: 270px; height: 270px; margin: 10px; }
.bestbox li a{ display: block; width: 100%; height: 100%; position: relative; }
.bestbox li a:hover .box{ opacity: 1; }
.bestbox li img{ 
	display: block; width: 100%; height: 100%;
	object-fit: cover;
}
.bestbox li .likebox{ 
	position: absolute; right: 8px; top: 8px; z-index: 100;
	border: none; background-color: transparent;
	cursor: pointer;
}
.bestbox li .likebox svg{ width: 24px; height: 24px; }
.bestbox li .likebox path{ color: #e51a92; }
.bestbox .box{
	width: 100%; height: 100%; 
	position: absolute; top: 0; left: 0;
	background-color: rgba(0,0,0,0.7);
	text-align: center;
	padding: 40px 20px; box-sizing: border-box;
	opacity: 0; transition: 0.3s;
}
.bestbox .box > *{ color: #fff; }
.bestbox .box h3{ height: 70px; font-size: 30px; line-height: 70px; text-align: center; }
.bestbox .box h4{ height: 70px; font-size: 19px; }
.bestbox .box h5{ height: 40px; font-size: 16px; }
.bestbox .box p{ font-size: 14px; }
.bestbox .box button{ 
	position: absolute; left: 0; right: 0; bottom: 20px; margin: 0 auto; 
	border: none; background-color: transparent; cursor: pointer;
}
.bestbox .box button svg{ width: 24px; height: 24px; }
.bestbox .box button path{ color: #fff; }


/* BestCreate */
.createform{ 
    position: absolute; bottom: 0; margin-bottom: 10px; 
    width: 100%; padding: 0 10px; box-sizing: border-box; 
    transform: translateY(100%) scaleY(0);
    transform-origin: center top; transition: 0.3s;
}
.createform.active{ transform: translateY(100%) scaleY(1); }
.createform.active + .circlebox{ /* 회전되서 빨간색X */
	background: #fa5252;
	transform: rotate(45deg); /* 회전처리 */
}
.createform legend{ font-size: 18px; font-weight: bold; }
.createform fieldset{ padding: 20px; }
.createform input{ 
	width: 260px; height: 30px; padding: 0 10px; 
	box-sizing: border-box; color: #000;
	margin-bottom: 20px; margin-right: 30px;  
}
.createform textarea{ width: 601px; padding: 10px; margin-bottom: 20px; color: #000; }
.createform .dlabel{ position: relative; top: -70px; margin-right: 16px; }
.createform button{ 
	display: block; margin: 0 auto; 
	width: 150px; height: 40px; 
	background-color: #e51a92; color: #fff; 
	border: none; font-size: 16px; 
	line-height: 39px; cursor: pointer; 
}
.createform input:focus, .createform textarea:focus{ 
	background-color: lightyellow; 
}

.circlebox{
    position: absolute; right: 16px; bottom: 16px; z-index: 5; 
    width: 80px; height: 80px; cursor: pointer; 
    display: flex; align-items: center; justify-content: center;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    border-radius: 50%; border: none; outline: none;
    background: #e51a92; font-size: 60px;
    transition: 0.125s all ease-in; /* X자로 회전시 자연스럽게 처리 */
}
.circlebox:hover{ background: #ff46b3; }
.circlebox path{  color: #fff; }

## bestData.js

//배열 데이터만 담을 js파일
const initialBests = [
    {
        id: 1,
        name: "[프랑스] 오르세 프리미엄투어[오후]",
        price: 20000,
        descript: "프랑스 3대 미술관 중 하나로 뽑히며, 반고흐, 마네, 모네 등의 작품을 감상",
        image:"https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fk0adz%2Fbtsydna0uHj%2F4EvYJ8EPiIOkSTazEroRQk%2Fimg.jpg",
        like: false
    },
    {
        id: 2,
        name: "[이탈리아] 피렌체투어(우피치포함)",
        price: 23000,
        descript: "꽃의 도시. 피렌체 역사 중 가장 화려했던 14세기 르네상스 시대로의 여행",
        image: "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbmakiu%2FbtsyenIDeD8%2FKGR5sLarN6EEcLBtAVLv80%2Fimg.jpg",
        like: false
    }, 
    {
        id: 3,
        name: "[헝가리] 부다페스트 야경투어",
        price: 25000,
        descript: "유럽 3대 야경 중 하나인 부다페스트 야경은 안전하고 아름답게 여행",
        image: "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fl6QZI%2FbtsynB6Vt9I%2Fq3tczSGTJaKyzPIiFlvM60%2Fimg.jpg",
        like: false
    },
    {
        id: 4,
        name: "[체코] 베스트 체스키 끄르믈로프투어",
        price: 25000,
        descript: "마치 동화에 나올 법한 빨간 지붕 중세마을이 그림처럼 소담하게 들어 앉아 있는 곳",
        image: "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbaN3Yb%2FbtsypwK3WoE%2FNtZmJDEaG93iJhyKBnRMw1%2Fimg.jpg",
        like: false
    },
    {
        id: 5,
        name: "[크로아티아] 두브로브니크 스르지산 투어",
        price: 20000,
        descript: "왕좌의 게임 촬영지, 두브로브니크 시내를 한눈에 볼 수 있는 스르지산 투어",
        image: "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcfnV8L%2FbtsyaUglYOD%2F3wDuGISkVsw106pjsn3KA0%2Fimg.jpg",
        like: false
    }, 
    {
        id: 6,
        name: "[프랑스] 루브르 프리미엄투어(소규모/오전)",
        price: 25000,
        descript: "건축 규모, 소장품 수, 역사의 시간 등 모든 부분의 세계 최고 프랑스 박물관",
        image: "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FL8rOa%2FbtsygnaTPE5%2FNPfNWgUggkVb1asF3J5s30%2Fimg.jpg",
        like: false
    }, 
    {
        id: 7,
        name: "[이탈리아] 남부환상투어(~10/27)",
        price: 70000,
        descript: "내셔널지오그래픽 트레블러 선정, 죽기 전에 꼭 가봐야할 50곳 중 1위",
        image: "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FclWmDF%2FbtsybQLxx0X%2FC4OIeCBGtFJUFSqxZIjfxK%2Fimg.jpg",
        like: false
    }
];
  
export { initialBests };

## 추가여행지텍스트.txt

프라하 워킹 투어(~10/30)
20000
https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FXJYI8%2FbtsydVFJnso%2FdYXs4KKPGLjqEvO4fTtmHK%2Fimg.jpg
골목골목, 광장 곳곳마다 긴 이야기가 깃들어 있는 작지만 알찬도시

ch40_besttour2.zip

0.11MB

Chapter 41. 라우터 :

## 지점 배열

const storeDatas = [
    {
      id: 1,
      name: '강남에비뉴점',
      addr: '서울특별시 서초구 서초대로77길 62'
    },
    {
      id: 2,
      name: '강남역신분당역사점',
      addr: '서울특별시 강남구 강남대로 396'
    },
    {
      id: 3,
      name: '강남우성점',
      addr: '서울특별시 강남구 강남대로 328'
    }
  ];

ch41_router.zip