Svelte Explained in 10 Min
HTML-код
- Опубликовано: 9 сен 2024
- 개발자에게 완전 사랑받는 스벨트 그 비결은? 리액트와의 차이점은? 실제로 어떻게 작동하는지? 누구나 배워도 되는것일까? 이 모든걸 몽땅 설명해드림!
#Svelte #스벨트 #frontend #프론트엔드
-
0:55 스벨트가 리액트와 다른 점은?
4:00 개발자들이 스벨트를 좋아하는 이유?
4:52 어떻게 스벨트 코드가 작동하는지?
7:57 누가 스벨트를 배워야하는지?
-
📌 니콜라스와 무료로 Next.JS 공부하기
bit.ly/34jw5gY
📌 니콜라스와 무료로 Next.JS 공부하기
bit.ly/34jw5gY
12:04 "우리가 사용하는 도구들이 최대한 언어와 가깝다면, 도구가 없어져도. 배운 것을 잃어버리진 않을꺼야."
계속해서 급변하는 프론트엔드 에서 기억하면 좋을 이야기.
와… 다른 것보다 이걸 돌리기 위해 뭔가 다른 걸 추가로 다운로드 시킬 필요가 없다는 점이 제일 매력적인 듯;
현대 사회에 중간기술이 의미없는 경우가 생각보다 많아서...스프링을 한다고해서 과거의 서블릿을 이해하고 다룰 수 있는것이 시각에 따라 큰 의미가 없을 수도 있듯이...아직은 규모가 작지만 커지는것은 금방이 될수도 있지 않을까요? 생태계만 받쳐준다면 기업은 더 나은 생산성을 위해 얼마든지 바꿀 수도 있다고 생각해요!
일본의 한 스타트업에서 타입스크립트와 함께 스벨트를 사용해서 6개월 정도 프로젝트 진행해봤는데 html태그 내에서 타입변환이 안된다던지 import할때 type을 안적어주면 컴파일 에러가 생기던지 하는 부분이 있긴 했지만 기본적으로 타입스크립트 호환도 잘 되고 무엇보다 코드 양이 줄면서 리뷰하기도 편하고 개인적으로는 너무 좋았습니다
사실 얼마전에 지인이 스벨트 한번 살펴보라해서 봤는데 진짜 신기하게 간편하게 나왔더라구요.
그래서 리액트까지 공부 하고 나서 천천히 익히려구요.
기업입장에서는 배우기 쉽고 생산성만 좋다면 스벨트로 고고
로직이 섞임이라고 하봐야 loop문 정도인데 디자이너도 할 수 준이고...
리액트, 뷰로 개발하지 않은 기업은
스벨트 굳
9:30 열심히 자막 따라 듣다가 "한국어" 또렷이 들려서 너무 귀엽네용. 니꼬가 좋아하고 잘 할 수 있는 한국말은 이렇게 더 많이 말해주면 듣기에 재밌을 것 같아요. 앙드레 니꼬
성능과 개발편의성을 향상시키려고 만든것이 라이브러리라는 관점에서 보았을 때는 스벨트가 매우 합리적으로 느껴지는 군요. 좋은 비교 감사합나다.
니콜님은 정말 진정으로 개발자를 생각하는 마음이 느껴지네요 고맙습니다.
저희 회사는 스벨트 도입을 준비 중입니다. 그 무엇보다도 개발자의 생산성이 너무나 중요해서요.
리액트는 빵을 벌어다 주는 도구라는 부분이
참 와닿네요 ㅋㅋ
스벨트가 리액트보다 빵을 더 잘 벌어다줄 수 있는
분야가 생기면 점유율이 올라갈 수 있을 거 같습니다
규칙을 알아야지 틀을 깰 수 있다는 문구가 인상적입니다
바닐라 자바 스크립트를 알아야하는건 몰라도 즈벨트가 더욱더 발전하면 굳이 리액트를 배울 필요가 있을까요. 그런 식이면 어셈블리어도 배워야..
언어에 최대한 가깝게 있는게 좋다고 생각한다는 부분 참 와닿네요!! 기본을 제대로 알아야 뭐든 쉽게 응용할 수 있는 것 같아요
음...이번 설명은 특별히 엄청 좋네요. 코드가 직관적이다에 손을 들겠습니다. 그게 엄청 좋은 거 같네요. 마법사에 도전해보겠습니다. 저는 초보자들은 쉬운 거부터 해라는 편에 서겠습니다. 문턱은 낮을 수록 좋다고 생각합니다.
스벨트가 엄청 깔끔하고 매력적인데 아직 나이가 어리고 커뮤니티가 부족한게 유일한 단점이죠.
그래서 실업에서 사용하기가 애매해요.( 개인프로젝트면 괜찮을 듯)
현재의 시점에서 리액트와 뷰라는 산이 너무 커서 어느 정도 견줄 위치가 될려면 꽤 시간이 필요할 듯요.
이 영상을 퇴근길에 보고 집에 가서 한번 직접 써봤는데 진짜 개쩔더라구요.
Vue로 웹 만들고 React Native로 앱을 종종 만드는 개발자인데, Vue에 가까운 코드 스타일이지만 지나치게 Svelte에 의존하는 형태로 작업하지 않고 "아 대충 이렇게 만들면 되겠지?" 하면서 만들면 다 만들어지는게 진짜 혁신이였음
저도 서버 개발자라 가끔 프론트로 툴 같은거 만들어야 할 때 있으면 편한 vue 자주 사용했는데 svelte 도 관심이 가긴 하네요 ㅋㅋㅋ
react, vue 모두 다 사용해봤고 최근에는 거의 vue를 사용하고 있었습니다.
한 2달전쯤부터 svelte의 존재를 알아 자료도 찾아보고 migration도 해보았는데 확실히 매력이 있는 툴이라 생각합니다. 제가 vue에 익숙해서 더 쉽게 접근 가능했던것도 있고요.
C언어 부터 자바까지 백앤드만 개발한 늙다리 개발자지만 덕분에 프론트앤드까지 재밌게 배우고 있습니다. 항상 좋은 영상 감사합니다.
리액트하다가 스벨트하면 레알 세상편함.. 생각하는대로 이루어지는 느낌이랄까
스벨트킷 너무 좋습니다 개발생산성 최고 공부도 개쉬움
I will be waiting for svelte to grow up.
I'm still satisfied with react community.
-
왜 개발자들이 좋아할까? 개발 경험 때문
컴파일러에 가까움 유저는 리액트도 다운 받아야 함,
"스르륵 사라지는 마법의 ui 프레임워크": 브라우저가 이해할 수 있는 js코드로ㅋㅋ
바닐라 js와 같은 스피드를 보임
리액트js, 뷰 경험이 있다면 배우기도 쉽고 직관적!
스크립트 태그
스타일 태그
원하는 html
※코드가 읽기 편함, 시간을 절약해주는 요소가 많음,
※튜토리얼 좋다 참조하자!
"프로처럼 규칙을 배워야 예술가 처럼 규칙을 깰 수 있다!"
리액트js는 먹고 살 수 있는 도구이고, 스벨트는 예술에 가깝다!
기술에 대한 내용도 너무 훌륭한데 초보 개발자를 위한 너무너무 명쾌한 선택까지 해줘서 감동했습니다 👏👏
stay healthy stay hungry eat kimchi i love you bye bye 캄사함니다!!
리액트와 뷰에 비해 자바스크립트가 가장 직관적이라는 느낌이 좋기는 하더라고요. 다만, 역시 영상 내용대로 가능성은 높아보여도 아직 커뮤니티가 너무 작고 경쟁자가 쟁쟁한 점이 최우선으로 배우기에는 망설여지기는 합니다 😂
1. jsp, php 느낌의 if 태그 (가독성 업) 2. react 느낌의 이벤트 (가독성 업) + 3. vuejs의 바인딩 (장점 싸그리 모아옴) + 심플함, 마치 C언어 같은 복잡한 언어보다 복잡한 문법 상태관리 다 무시하고 파이썬으로 심플함을 보여주는 느낌 / 커뮤니티 커지면 난리날 지도 모르겠당.. 사기캐 그자체여... 물론 깊게 먹어보진 못하고 이 영상만 봤을 때 소감을 적어보았습니다.. 니꼬형 사랑합니다
항상 좋은 정보 제공해주셔서 감사합니다
스벨트 이번 영상으로 처음 접해보게 되었는데
정말 신기한 녀석이군요 🤩
리액트보다 확실히 뚝딱뚝딱 빨리 뭔가 만들 수 있을 것 같은 녀석..!
리액트 공부중인데 커뮤니티 커지고 더 발달되면 스벨트도 고려해봐야겠네요 좋은 정보 감사합니다~~
Blazor is much more clear to read I think. And using c# agains js.
백엔드를 더 효율적으로 사용하기 위해 서브로 프론트엔드를 빨리빨리 사용하는 입장에선... 스벨트같은 매직은 굿입니당.
니꼴라스님 저기 리액트로 앱을 만드는데 용량이 200메가정도 나오는거 같은데 설치용량이나 만들은 용량은 어떻게 줄이나요?
This is a very useful video. thank you.
Do you have any plans to explain the css in react? Or I would like to hear your opinion about the result of “state of css 2021”
스벨트를 영상처럼 컴파일러라고 정의할 수도... 혹은
js의 또다른 형태의 슈퍼셋이라고 볼 수도 있겠네요.
또 마지막 워딩이 틀린 말은 아니지만,
svelte : javascript
인터프리터 언어 : 기계어
js도 기계어를 쓰기 어려운 인간에게 제공된 도구의 하나죠. 하이레벨 언어 다 그렇듯.
근데 이 영상 리액트 홍보가 목적인 듯. next js 강의 ㅎㅎ
mucha gracias nico! 새해 복 많이받으세요~!!
유용한 강의 또다시 감사합니다
항상 좋은 정보 알려주셔서 감사합니다!
키보드 리뷰가 너무 궁금합니다. 기다릴게요..!
주여 오늘 또 공부해야될 것이 하나 더 생겼습니다...
잘듣고 갑니다.
영상에서 Svelt가 컴파일을 자동으로 하기 때문에 용량이 확연히 줄어든다고 되어있는데 어떤식으로 자동으로 컴파일을 처리하는건가요?
스벨트는 빌드 결과물이 바닐라js입니다
리액트는 작성한 코드+리액트 라이브러리
바로 달려왔습니다 🏃♂️
저는 초보자도 스벨트를 배우는게 낫다고 봅니다. 초보자가 리액트로 힘들게 만들며 지쳐 포기하기 보단, 스벨트로 코딩에 대한 재미도 느끼면서 빠르게 자기가 만들고 싶은걸 만든다면 그게 성공인 것입니다.
동감합니다. svelte kit나 tailwind css도 써보고 상태관리(onmount, ondestory 등), 양방향 바인딩(:bind, vue에서의 v-model) 반응형 문법(vue에서의 watch, computed문법)이나 ssr 개념, npm 라이브러리 관리, url라우팅이라든지 전역 상태 store 관리(vue에서의 vuex) 등등을 익히면서 확실히 이해에 도움이 되는 것 같아요. 특히나 next.js(vue에서의 nuxt.js)같은 ssr를 왜 쓰는지 이해를 못 했다가, 개발해보면서 무조건 필요하다는 것도 느껴보구요. 단순히 쉽다는 것이 중요한 게 아니라, 초보자에게는 이해의 폭을 더 쉽게 넓힐 수 있도록 도와줄 수 있는 도구가 될 수 있을 것 같다는 생각이 들더라구요.
저는 Vue 를 쓰고 있슴니다
팀에서 Vue를 쓰고 있기 때문입니다.
이 영상에서 Svelte 가 무엇인지 잘 알 수 있었습니다.
감사합니다. 노마드 코더스
I appreciate to you that you make this useful video. Thank you nico teacher
영상보고 궁금해서 스벨트 + 파이어스토어로 작업해서 고객한테 데모 했는데 굿입니다.
블레이저랑 비슷해서 쉽게 터득했습니다
오늘도 너무재미있네여.. 스벨트는 아트에 가깝다는 니꼬의 통찰이 재미지고 신기한 영상이었습니다 늘 감사합니당!
뷰개발자로서, 가끔 바닐라자바스크립트로만 플젝할때 이렇게 간단하게 사용하면 좋은데 싶은 생각이 들었는데, 그게 스벨트네요. 딱 내가 생각했던 그 방법! 리액트 사용하면서 뷰랑 다르게 자바스크립트랑 더 가까이 있다고 느꼈고, 스벨트 보면서 이건 너무 쉬어서 크게 되기 어렵지 않나 라고 생각했는데 같은 의견입니다.
좋은 영상이네요
좋은 영상 감사합니다 :)
최근에 관심있던건데 영상 감사합니다
언제나 언제나 감사합니다.
항상 감사합니다
오 재밌어보이네용 처음인데 익숙한 느낌이고 ㅋ
근뎅 컴파일 해야 JS 파일이 생성되고 그걸 브라우저에서 실행한다면 개발단계에서 작성한 코드의 실행화면을 확인하려면 그때마다 컴파일을 해야 할것 같은데 안해도 되는 방법이 있을까용?? 컴파일 시간은 어느정도 걸릴까용? 경우에 따라서 오래 걸리기도 할까용??
npm run dev라는 명령어를 사용하면 컴파일을 하지 않고, 바로 실행해서 볼 수 있습니다. 핫 리로딩이라서 소스 바꾸면 자동적으로 변경내용이 적용이 되는 방식일 거에요. npm run build라는 명령어를 사용해서 컴파일을 하면 네이버 클라우드 서버 기준 길어야 1분 내외인 것 같은데, 컴파일 시간은 프로젝트 규모에 따라 다를 것 같네요. 저 같은 경우는 소규모 홈페이지라 오래 안 걸렸던 것 같기도 하구요.
@@fourdiza 오 좋은 정보 고맙습니다
쉽게 설명해주셔서 감사해요 니꼬!! 스벨트는 꼭 써보고 싶은 기술인 거 같아요*
ReactJs를 배워볼까 싶기도 하면서 Svelte가 너무 궁금했는데...
궁금증이 풀렸습니다! 고마워요 니꼴라스
니콜라스님 개발에 관심이 생겨 전문적으로 공부를 하고싶습니다 어디서부터 시작 해야할지 알려주실수있나요?
백엔드 분야에 취직하려고 공부중입니다. 하지만 회사 이력서로 완성된 홈페이지 형태의 포트폴리오를 요구하기 때문에 프론트도 조금은 공부할 계획입니다.
저 같이 프론트를 깊게 파지 않을 사람들에게는 리액트, 뷰 같은 것들보다는 스벨트처럼 쓰기 쉬워 보이는 프레임워크를 쓰는 게 좋을 거라 생각합니다.
저도 서버 개발자인데 리액트는 좀 어려워보여서 뷰 공부해봤는데 이것도 편하더라구요. 몇 일만 공부하면 바로 쓸만한 웹 만들 수 있는 수준으로 접근성이 좋아서 뷰도 나쁘지는 않아요
리액트 쓰면서 js를 더 공부하고 싶다는 생각이 강해졌는데 이유가 다 있었군요 ㅋㅋ 예술과 법칙 비유 👍
좋은 요약 좋은 비유 정말 감사합니다~~ 클라스가 느껴지는 영상이네요 ㅎㅎ 좋은 영상 잘 보고있습니다. 항상 응원합니다!
강의가 생긴다면 꼭 들어보고 싶어요!!👀🗯
니콜라스샘의 스벨트 강의 기대합니다.
Please open buying course from nomad-coders from outside of south Korea!! Please, Waiting for a long time to buy one.
So it looks like Sevelte is almost like Vue except it's faster. I may be biased but I still think Vue syntax is the best and React syntax is the worst.
똥같은 리액트보다 훨씬 간편하고 좋은듯...리액트 개쉣..
일백퍼센트 공감
하지만 스벨트가 더 커지고
표준으로 자리 잡아간다면
많은 부분에서 달라지겟죠
피스 ~
프론트는 진짜 스택이 금방금방 갈아치워지는 것 같습니다.
Your videos are awesome and I love them! About the Svelte, please don't forget in comparsion with React, take care about the SSR, about the setup, configuration etc. Svelte doesn't need anything like that... is it right?
요즘 스벨스벨 하는 이유가 있었구나…ㅎ
이 집 영상은 좋아요를 안 누를수가 없자너..👍
스벨트가 핫해서 왜 유명한지 궁금했는데 정말 구체적으로 알려주셔서 감사합니다! 강의 영상 보고나니... 역시 스벨트 보다는 리액트로 선택하길 잘한듯 합니다.
항상 다양하고 좋은 정보 얻어갑니다! 감사해용
typescript 를 어떻게 잘 적용될 수 있을지... 상태관리를 어떻게 할 수 있을지 궁금하네요.
영상에서 보여주신 binding 이나 if/else 구문 , increase 시키는 함수 만들기 등은 뷰도 충분히 쉬워서요...
그러게요. 예제에서 볼 때 뷰와 차이점은 script 쪽에 좀 더 형식이 없는 것 뿐인거 같긴 하네요.
형식이 없다는 것도 때에 따라서는 단점이 될 수도 있는거라서 좀 더 찾아보면 좋은 점들이 있겠죠?
저는 취업을 위해 공부하는 분야가 따로 있어서
취미로 웹개발 하기엔 스벨트가 좋은 선택인 것 같네요 ㅎㅎ
Vue나 Svelte를 하고 싶어도 8:31 ... 실제로 미국의 유명 IT 기업들에서도 Vue보단 React가 아직까지는 압도적... Svelte는 말할것도 없구요 ㅋㅋ
Once 같은 문법이 편하기도 하겠지만, html부분에 로직이 들어간다는 점에서, html과 로직을 구분하기 힘들것 같기도 하네요...
뜬금없지만 노마드코더에서 쓰는 데이터베이스가 뭔지 알 수 있을까요?
Super insightful analogy regarding junior devs using Svelte vs React and taking portability of the underlying concepts into consideration - loved the video.
장고 플라스크 패스트api 등 파이썬 백엔드 개발자인데 , 리액트 넥스트 리믹스 뷰 스벨트 모두 사용해본 입장으로 리액트는 예전의 앵귤러 느낌이드네요.
스벨트 킷을 엄청나게 기다리던 사람 중 한명입니다.
스벨트가 훨씬 진보한 기술인 것 같습니다 ㅎㅎ
저도 개인용 프로젝트에 tailwind css랑 svelte kit을 이용하여 구현해봤는데, 소규모로 구현할 때는 확실히 간단하고 좋은 것 같아요.
저도 신규프로젝트에 스벨트를 적용하려고 준비중이에요
바로 webassembly 로 나오는 기술은 없나요..? 블레이저 뿐인가요?
SolidJS 도 다뤄주세요!
뷰, 리액트, 스벨트 다 써봤습니다. 취업할거면 리액트, 빠르게 나만의 무언가를 개발할거면 스벨트 추천드립니다
뷰는 어떤가요? 스벨트가 너 좋을까요?
뷰랑 비슷한것 같네요!!!
react 든 svelte 든 먼저 js를 배워야 둘 중 하나를 공부 할 수 있는게 맞죠?
built with 확장앱을 썼을때 해당 웹사이트가 어떤 자바스크립트 라이브러리를 썼는지 감지할수 있는게 이래서였네
I really loved you giving opinions both for beginner and advanced users. This helped me a lot, or else I might have learned svelte even if I’m a beginner. Thanks again!!! Your explanatios are awesome.
Perfect!
레일즈부터 시작했기 때문에 매직의 위험을 알고 있습니다. 개발 경험은 정말 좋은데, 프레임워크 룰을 벗어나면 아무것도 모르는 그런 상태.. 언어에 가깝다면 진정 배우게 됩니다.
Do remix next time please !!!! 🔥
thnk u!
As always Nikolai I think your evaluation is right on
thank you!!
1인개발 하기엔 쉬워서 괜찮아 보이는데 퍼블리싱 코드에 로직이 꼭 들어가야 하는건 디자인과 프로그래밍 코드의 분리가 불가능해서 매우매우 심각한 단점으로 보여.... 협업시엔 좀 골치 아플거 같음. 각종 기업에서 주류가 되긴 힘들듯함.
Your course on ReactJS is amazing.
vue 배우고 있는데 비슷한 점이 많네요.
프론트엔드 프레임워크는 백엔드에 비해발전이 빠른거 같아요
Nico!!! We need a new lecture of building with NestJS + NextJS!! Thank you always!! Noice content
매번 영상만 보다가 svelte의 마법적 요소 부분에서 정말 크게 공감하였습니다.
그 부분과 관련해서 평소에도 많이 생각했었는데
분명 보다 새로운 무언가를 만들려고 프로그래밍을 하는 건데 저런 마법적 요소를 가진 것들만
사용하다보면 분명 본질적인 것에서는 멀어질 수 있다고 생각이 드네요.
(프로그래밍을 하는게 아니라 어느정도 만들어진 키오스크 인터페이스에서 코드를 짜는 느낌)
svelte는 분명 그 자체로 훌륭하지만 진지하게 앞으로 프로그래밍을 업으로 삼으려는 초심자들이
처음 시작하는 단계에서 배우게되면 부정적인 영향도 일부 생기지 않을까 염려됩니다.
선댓글 후감상!
map의 경우, svelte의 예는 foods가 변경되면 매직처럼 화면에 바로 적용 된다는 거... (맞죠? 1년전에 svelte 잠깐 봐서 자신 없음. 그리고 난 백엔드 개발자임..)
드디어 소개가 된걸 보니 이제 슬슬 토이프로젝트에서 사용해도 될만해졌나보네요. ㅋㅋ