전체 글

오늘은 제가 전직장, 현직장에서도 유용하게 썼던 라이브러리 React Hook Form을 소개해보려고 합니다 ! Form 처리 다들 어떻게 하시나요 ? 간단하게 이메일과 비밀번호를 받는 회원가입 페이지를 만들어볼게요. function SignUpPage() { return ( 회원가입 ); } export default SignUpPage; 좋습니다 ! 하지만 이렇게만 하면 저 이메일 input과 비밀번호 input의 value를 가져올 수 없습니다. useState를 추가해서 값을 받아오게 처리해보겠습니다. useState로 처리하기 import { useState } from "react"; function SignUpPage() { const [email, setEmail] = useState(""..

Suspense는 React 16.6에서 추가된 기능이에요. 처음에는 코드 스플리팅(lazy)을 위해서만 사용됐으나 나중에는 데이터 Fetching을 기다릴수도 있고 SSR Streaming이라는 기능도 제공되게 기능이 확장되는 중이에요.Suspense란 무엇일까 ? Lazy Data Fetching waterfall Suspense 안써도 똑같은데요 ? 안쓰면 안댐 ? 관심사 분리와 선언형 단순히 코드만 깔끔해지나 ? Suspense를 써도 Waterfall이 발생하는데요 ? useQueries prefetch SSR Streaming Suspense란 무엇일까 ? React Beta 문서에 나온 내용을 보면 Suspense lets you display a fallback until its child..

개요 SSR 관해서 회사 면접을 준비하며 이론을 살짝 검색해서 암기하고 있었습니다. 하지만 실재로 사용하본적이 없고 첫페이지 로딩에 대해서 CSR에 비해 빠르다..!, 검색엔진최적화가 잘되어 있다..! 라고 알고만 있었지 실재로 확인을 해본적이 없어 이번에 진짜 빠른게 궁금해서 테스트를 해보려고 합니다. 간단한 CSR, SSR 설명 CSR CSR은 서버로부터 빈 html파일과 js파일을 받아서 js파일을 이용해 html을 클라이언트에서 처리해 채우는 방식을 의미합니다. 이 동작은 첫 화면에서 유저가 흰화면을 오래 볼 가능성이 있으며 빈 html을 받기 때문에 SEO가 좋지 않습니다. SSR SSR은 서버로부터 완성된 html을 받으며 동작과 관련된 js파일을 따로 받아 브라우저가 js파일을 읽는 동안 유..