# svelte

138개의 포스트
post-thumbnail

(님들이) 만들어쓰는 개발진스

개발진스 짤 만들어달라는 요청이 많은데...귀찮다... 자동화하자!!

7일 전
·
22개의 댓글
·

Svelte 구축할 때 경험에 의한 장단점

내가 임시 글에 장황하게 쓰다 말았는데, 원래는 내 경험에 입각하여 소개하려고 했으나, 너무 거품 쩔어서 그냥 간략하게 작성하도록 하겠다. 내 경험에 입각한 의견이 많으니, 크로스체크는 본인에 맡긴다.

2023년 3월 20일
·
0개의 댓글
·

svelte has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present

svelte로 api 요청하다가 이런 에러를 발견했을때쉽게 해결할 수 있는 방법을 찾았다export const loadMembers = () => { return fetch(baseurl, { method: 'GET', headers: { 'Con

2023년 3월 19일
·
0개의 댓글
·

Svelte/SvelteKit 리액트와의 차이는?

Svelte가 그렇게 간단한 사이트 만드는데 좋다던데... SvelteKit으로 풀스택도 지원한다던데 이참에 한번 해보기로 했다. 괜찮으면 포트폴리오를 다시 쓰는것도 좋은 생각인것 같음.먼저 가장 친숙한 react와의 비교를 해보아야 하겠다.템플릿 언어: React에서

2023년 3월 16일
·
0개의 댓글
·

store

appstore.jsstore 작성 시 writable, readable , subscribe 필요기본 fetch api 활용svelte 기본 내 {#await} {:then} {:catch} 태그 활용 가능

2023년 3월 6일
·
0개의 댓글
·

svelte:component, svelte:head, svelte:head

app.sveltechile컴퍼넌트 생성시 같은 구조로 작성될때 데이터값으로 매칭하여 작성svelte:head, svelte:body , svelte:window 등 스벨트 자체 내에서 접근 가능

2023년 3월 6일
·
0개의 댓글
·

slot

하위 요소에 지정 위치로 출력name 요소와 매칭 필요

2023년 3월 6일
·
0개의 댓글
·
post-thumbnail

[Svelte] 스벨트란 무엇일까?

Svelte란? 스벨트의 코드구조 스벨트 파일(.svelte)은 주로 다음과 같은 구조로 구성되어 있습니다. 그리고 스크립트 영역에서 외부 스벨트 파일로부터 캡슐화된 html, css, JS 코드를 import 받아서 사용할 수 있습니다. 이때 구성요소의 이름은 대문

2023년 3월 4일
·
0개의 댓글
·

svelte 스터디 #5 Events

on 지시어를 이용하여 어떤 이벤트라도 수신할수 있다고 설명한다.이벤트 핸들러를 아래 예제와 같이 인라인으로 선언도 가능하다.따옴표는 선택사항이고, 강조의 의미로 유용하다고 한다.일부 프레임워크는 성능상의 이슈로 인라인 핸들러를 지양하지만,svelte에서는 컴파일러에서

2023년 2월 28일
·
0개의 댓글
·

Svelte

프론트엔드 프레임워크react vue angular svelte"Frameworks without the framework"

2023년 2월 28일
·
0개의 댓글
·

svelte 스터디#4 Logic

{{/if}로 닫는다. 닫을때는 "{:else} 를 사용하여 else 블럭을 표현한다.{:else if 컨디션} 블럭을 사용하여 else-if 표현을 할수 있다.{{/each}로 닫는다.if 문과 규칙이 동일하다.추가로 as 뒤에 변수를 하나 추가하여 index까지 f

2023년 2월 27일
·
0개의 댓글
·
post-thumbnail

[vitest]TDD + svelteKIT 유닛테스트를 해보자

⚡️vite를 쓴다면 vitest로⚡️ unitTEST 도 빠르다!

2023년 2월 26일
·
0개의 댓글
·

svelte 스터디#3 Props

Declaring Props 지금까지는 내부상태만 다루었다. 즉, 동일 콤포넌트 내에서만 적용된다. 타 컴포넌트로 상태를 전달하기 위해서는 props라고 불리는 properties를 선언해야 한다.

2023년 2월 25일
·
0개의 댓글
·

svelte 스터디#3 Reactivity

버튼에 이벤트 핸들러를 연결하고, 변경된 값을 html에 다시 표현하는 예제이다.역시 간다하다.첫번째 예제와 비슷하다.doubled 라는 변수가 count 값이 변경되면서 같이 변경된다.이때, 간접적으로 변경된 변수도 반응성을 보이려면 $: 문법을 사용해서 변수를 선언

2023년 2월 24일
·
0개의 댓글
·

svelte 스터디#2 Introduction

svelte는 무엇인가에 대해 소개한다.But there's a crucial difference: Svelte converts your app into ideal JavaScript at build time, rather than interpreting your ap

2023년 2월 24일
·
0개의 댓글
·

svelte 스터디#1

스터디 배경 일단 백엔드 개발을 주로 하며, 프론트 알못이다. 백엔드 개발자 이지만 어드민 페이지등 프론트를 어느정도 담당하게 된다. 프론트 개발와 달리 "업무 데이터 처리" 관점에서 조회,입력,수정이 목적이다. 당연히 쉽고, 빠르고면 최고다. 그럼점에서 난 rea

2023년 2월 24일
·
0개의 댓글
·

React는 Virtual Dom! Svelte는!?

브라우저 렌더링 과정과 Virtual DOM 브라우저 렌더링 과정 크롬이나 사파리, 파이어폭스 같은 것들을 브라우저라고 한다. HTML 문서는 내가 원하는 웹페이지의 요소들과 그 구조를 마크업으로 작성하여 보낸다. body 태그 안에 header, main, foo

2023년 2월 18일
·
0개의 댓글
·

bind:this

리액트의 useRef()와 비슷한 기능

2023년 2월 18일
·
0개의 댓글
·

motion, transition, easing, animate

스벨트는 기본 적으로 전환에 대한 요소를 가지고 있다.linear 형태 보다 스무스 한 전환기본적인 요소가 있고 해당 전환 마다 option 값이 추가 적으로 있다.추가 적으로 spring, in,out 등 option값이 더 있다.ex

2023년 2월 18일
·
0개의 댓글
·

ref

bind:this 사용

2023년 2월 18일
·
0개의 댓글
·