ki hyun's 개발블로그

🚨 SvelteKit은 초기 개발 단계입니다. 따라서 버전이 1.0에 도달하기 전까지는 몇 가지 부분이 변경될 수 있습니다. - SvelteKit 공식문서 - 🚨 이 글에서 나오는 대부분의 예제 코드는 SvelteKit 공식문서에서 가져왔음을 알립니다. SvelteKit? React에 NextJS, Vue에 Nuxt가 있듯이 Svelte에는 SvelteKit이 있다. NextJS와 Nuxt와 같이 SSR, SSG 등 여러가지 다양한 기능들을 제공한다. SvelteKit의 가장 매력적인 부분은 Svelte를 사용한다는 것이다. Svlete와 Vite를 사용하여 정말 말로 할 수 없을 정도로 만족스러운 개발자 경험을 누릴 수 있다. 💡 Vite에 대해서도 글을 썻다. SvelteKit이 지원하는 기능으로는 ..

Svelte는 React 혹은 Vue와 같이 인터렉티브한 웹을 구축하기 위한 도구이지만 구축하는 방법이 완전히 다르다. 또한 Svelte는 React, Vue와 같이 프레임워크나 라이브러리가 아니다. 오히려 Svelte는 컴파일러에 가깝다고 볼 수 있다. React의 방식 만약 React로 웹 서비스를 빌드하고 배포한다면 사용자가 웹 사이트에 들어올때 2가지 종류의 코드를 다운로드 받아야한다. React 코드와 개발자가 작성한 코드이다. 이는 이때까지 표준화되어 사용되던 방식으로 jQuery를 사용한다면 사용자가 jQuery를 다운로드 받아야하듯이 React나 Vue도 같은 방식을 사용하고 있는 것이다. Svelte의 방식 하지만 Svelte는 위의 방식대로 작동하지 않는다. Svelte의 초기 홍보문구..

✍배우게 된 계기 약 1년 반 전부터 열심히 웹에 대해 배우기 시작했고 최근에는 React를 열심히 배우고 있었다. 그러다가 다른 프레임워크에도 관심이 생겨 찾아보게 된 것이 바로 Next.js였다. Next.js? 넥스트는 버샐(vercel)에서 만든 리액트 기반의 프레임워크로 개발자에게 뛰어난 생산성과 편의성을 제공한다. 리액트 기반이기 때문에 리액트에 관한 지식이 필요하다. 넥스트를 사용하는 이유? (리액트의 단점) 페이지를 불러올때 모든 자바스크립트 파일을 한번에 불러옴 (⏰시간이 오래걸림) 검색 엔진 최적화(SEO)에 좋지 못함 ✅ 해결법: 서버 사이드 렌더링(SSR)을 사용하면 해결됨. 서버 사이드 렌더링(SSR)? 장점 사이트에 접속시 렌덩링된 html을 불러온다. → 반응X but, 속도가..