ki hyun's 개발블로그

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을 만들어 보겠습니다...

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