인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

jinbekim님의 프로필 이미지
jinbekim

작성한 질문수

Svelte.js 입문 가이드

2. Svelte 특징 분석

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

작성

·

597

1

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

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

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

 

답변 1

1

HEROPY님의 프로필 이미지
HEROPY
지식공유자

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

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

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

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

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

jinbekim님의 프로필 이미지
jinbekim
질문자

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

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

jinbekim님의 프로필 이미지
jinbekim

작성한 질문수

질문하기