inflearn logo
강의

Course

Instructor

Svelte.js Beginner's Guide

2. Svelte feature analysis

cdn지원과 프론트엔드 프레임워크는 무슨 상관관계가 있나요?

786

jinbekim

1 asked

1

cdn이 네트워크 속도를 빠르게 하기 위해서 물리적으로 가까운 서버를 제공하는 것이라고 알고 있습니다.

근데 svelt에서 지원하는 것과 별개로 만들어진 동적, 정적파일의 위치를 조정하는 것에 불과한 것이라고 생각이 듭니다.

여기서 svelt가 지원하지 않는다는 게 무슨 의미인지 궁금합니다. 제가 잘못 알고 있는 게 있다면 알려주시면 감사하겠습니다.

 

svelte cdn

Answer 1

1

HEROPY

안녕하세요 :D
최대한 이해하기 쉽게 정리해 볼게요.

React나 Vue 프레임워크를 사용해 작성한 코드는 별도의 처리 없이 브라우저에서 바로 동작할 수 있습니다.
처음부터 그렇게 설계되어 만들어졌고, 그러니 기본적으로는 프레임워크를 CDN으로만 연결해도 전혀 문제 없이 잘 동작합니다.

하지만, Svelte 프레임워크를 사용해 작성한 코드는 브라우저에서 바로 동작할 수 없고 동작이 가능하도록 한 번 변환해 줘야 합니다. Svelte는 그 과정을 '컴파일'이라고 부르고, 그 변환된 결과 파일이 브라우저에서 동작하는 겁니다.

혹시, '변환을 브라우저에서 하면 되지 않느냐' 라고 생각하실 수 있는데요.
Svelte는 브라우저에서 동작하는 결과를 이렇게 따로 만들어 제공하는 방식을 쓰기 때문에, React나 Vue보다 훨씬 간단한 문법을 제공하고 메모리도 적게 사용하니 훨씬 빨라질 수 있습니다.
(개발하는 코드가 따로 있고, 동작하는 코드가 따로 있는 거죠)
대신 CDN을 사용할 수 없다는 불편함도 있지만, 사실은 이게 더 발전된 개발 방식이라고 볼 수 있습니다.
참고로 React나 Vue도 SFC같이 Svelte와 유사한 컴파일 방식의 개발을 '지원'하고 있습니다.
(Svelte가 먼저 시작한 방식은 당연히 아니고, '컴파일 방식의 장점을 최대한 활용해 만들어진 프레임워크' 라고 이해하시면 쉽습니다)

여러 프레임워크가 기본 원리는 비슷한데, 이렇게 서로 조금씩 다른 장단점을 가지고 있습니다.

0

jinbekim

답변 감사합니다.
제 질문은 프레임워크의 파일을 cdn을 통해서 제공하는 것을 cdn을 지원한다라고 한다라는걸 모르는데에서 비롯 되었습니다. ㅎㅎ

내가 내 서버를 구성해서 cdn 제공하는거랑 무슨 상관이지 하고 있었네요. ㅎㅎ

프로젝트 실행이 되지 않아 menu API 테스트가 불가합니다 ㅠ

0

134

9

프론트 api.js의 요청 headers 옵션의 cors 관련 설정 질문

0

61

2

중급 homework 과제

0

94

2

모듈 버전이 안맞아서 발생하는 문제 같습니다;;;

0

188

2

meteor 버전 때문에 실행이 안됩니다.

0

161

2

graghQL의 transaction 처리속도가 궁금합니다.

0

112

2

질문있습니다.

0

108

2

화면 구성 설명용 도구 이름

0

158

1

Meteor 실행 오류 문의 드립니다.

0

184

1

영호 좋아요 버튼이 콘솔에는 잘 찍히지만 화면에 렌더링 되지 않습니다.

0

130

2

영화목록 component 만들기 에서 질문이 있습니다.

0

209

3

div에 on:click 이벤트 붙일 때 on:key와 관련된 이벤트를 같이 사용해야하나요?

1

907

1

안녕하세요

1

492

1

todo 예제에서 스토어를 사용하실때 따로 stores.js 를 사용하지 않고 바로 App.svelte에서 스토어 객체를 생성하신 이유가 있나요

1

365

1

다른 라이브러리와 통합 또는 외부 라이브러리를 svelte로 불러오는 법.

1

1133

1

스벨트 + 백엔드는 어떻한 형태로 구성을 많이 하나요?

1

1790

1

스토어객체를 왜 굳이 props로 쓰는건가용

3

326

1

props 기본값이 true인가요?

1

288

1

혹시 에코시스템에 대한 질문을 해도 괜찮을까요?

2

300

1

화살표 함수 관련 질문입니다.

2

348

1

bind 와 on:input, value 의 차이점에 대해 질문드립니다.

2

548

1

설치가 자꾸 실패해요ㅠㅠ

1

694

2

강의감사합니다

3

237

1

Windows 사용자는 npx 명령어 전 'git'을 설치하셔야 합니다.

3

759

1