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의 초기 홍보문구..

🧐 React Hook Form? React Hook Form은 React에서 Form을 쉽게 만들기 위한 라이브러리로 공식문서에 적혀있는 그대로 성능이 좋고 유연하며 유효성 검사에 아주 탁월합니다. 장점 적은 코드로 더 좋은 퍼포먼스를 낼 수 있다. 다른 라이브러리 혹은 React에 비해 Re-render 수가 적다. Fast Mounting (로딩속도가 빠름) TS를 기본으로 지원함단점 잘 모르겠음... How to use? 먼저 React Hook Form을 사용하기 위해 yarn 혹은 npm을 사용하여 설치합니다. npm install react-hook-form yarn add react-hook-form 설치가 되었으면 React Hook Form을 사용하기 위해 Form을 만들어 보겠습니다...

🧐 Tailwind CSS? Tailwind CSS는 이름에서 부터 알 수 있듯이 CSS Framework 입니다. 하지만 Bootstrap과 같은 다른 CSS 프레임 워크들과는 다르게 Tailwind CSS는 디자인의 커스터마이징이 아주 편합니다. 공식문서에 있는 예제를 하나 들고 와서 설명해보겠습니다. 원래는 디자인을 하기위해 다음과 같이 긴 CSS를 사용했지만 Tailwind CSS를 사용한다면 저렇게 길었던 CSS를 다음과 같이 줄일 수 있습니다. 코드가 놀랍도록 줄어들었지만 class 이름이 좀 많이 더러워 보입니다. 하지만 Tailwind CSS는 이러한 문제도 이미 해결해 두었습니다. @apply라는걸 사용하면 되는데 @apply에 대해서는 뒤에 자세히 설명하도록 하겠습니다. 설치 Tailw..

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