NEXT에서는 이미지를 어떻게 사용할까? - NEXT Image 알아보기 웹화면에 이미지를 띄우려면 개발자들은 html img 태그를 사용하여 이미지를 띄운다 기본 html 이미지 태그를 사용하는것도 좋지만 next를 사용한다면 next Image 컴포넌트를 사용하여 이미지를 최적화 할 수 있다 Imagenext에서는 이미지를 최적화 하여 보여줄수 있도록 Image 컴포넌트를 제공한다장점크기 최적화(Size Optimization)시각적 안정(Visual Stability)빠른 페이지 로드(Faster Page Loads)보안적 이점크기 최적화next Image 컴포넌트를 사용하면 이미지의 크기를 줄이기 위해 webp 포맷으로 변환을 한다webp 포맷을 사용하면 기존의 png, jpg와 같은 품질을 유지하지만 파일의 크기는 더 줄어들어 효율적이다※ localhost에서 테스트.. 두유노 RSC? - React Server Component 알아보기 이번에 노마드코더 강의를 들으며 server component를 사용해 보았다 사용해보면서 신세계를 경험해서 블로그를 작성해보려고 한다 React Server Component 기본적인 개념부터 알아보자 RSC는 서버에서 구동되는 컴포넌트로 서버에서 렌더링 된 후에 클라이언트로 전달된다 특징 리렌더링 X 브라우저 api나 react 훅 사용 X 서버 리소스 접근 가능 자바스크립트 번들에 포함되지 않는다 event 핸들링 X 사용하기 현재 vanilla react 만으로는 RSC를 사용하기 쉽지 않다 편하게 사용하기 위해서는 next 13버전 이상의 app router 환경에서 사용가능하다 next에서 사용하면 기본적으로 모든 컴포넌트가 RSC이고 혹시 client component를 사용하려고 한다면 ".. next redirect, rewrite 뭔데 다쓰는거야? - redirect와 rewrite를 알아보자 next redirect와 rewrite를 사람들이 많이 사용하는데 이 기능들은 무슨 기능들을 하는것일까? 두 기능 다 브라우저에서 접속이나 네트워크 요청을 보낼때 특정 path에 접근했을때 다른 path를 보여주게 하는 기능이다 하지만 두 기능은 약간씩 다르다 차이점 redirect는 특정 path에 접근한다면 다른 path로 바꿔치기 하고 rewrite는 특정 path에 접근하면 path는 그대로지만 다른 path의 내용을 보여주는 기능이다 말로 설명하니까 내가 봐도 이해가 안된다 직접 사용하면서 설명을 해주겠다 사용법 두 기능 다 next.config.js 라는 next 설정 파일에서 기능들을 추가해 사용 할 수 있다 redirect redirect는 react-router에 Navigate 컴포넌.. batching 모르면 react 개발하는거 아님 - batching 알아보기 최근에 학교 아는 선배님의 블로그를 보다가 batching을 처음봤다 여태까지 공부하면서 알지 못했던 부분이라 더 잘기억하기 위해 블로그를 쓰려고 한다 batching이란 렌더링을 최소화 하기위해 setState 작업을 하나로 묶어서 실행 시키는 것이다 코드로 확인해보자! import { useState } from "react"; function App() { const [count, setCount] = useState(0); console.log("렌더링 됨"); return ( { setCount((prev) => prev + 1); setCount((prev) => prev + 1); setCount((prev) => prev + 1); }} > +3 ); } export default App;.. react-query 찍먹 let's go react-query는 뭘까? react-query는 server state 자동으로 caching과 refetching을 해주는 비동기 상태 관리 라이브러리이다 여기서 말하는 server state는 서버로 부터 가져온 데이터의 상태를 말한다 react-query가 refetching 할 때 새 컴포넌트가 마운트 될 때 브라우저가 포커스 되었을 때 네트워크가 다시 연결 되었을 때 사용해보기 QueryClient QueryClientProvider useQuery useMutaion QueryClient QueryClient는 모든 query와 mutation에 대한 상태와 캐시를 가지고 있는 클래스이다 const queryClient = new QueryClient(); QueryClientProvid.. Context가 뭐야? context란 react에서 특정 값을 전역적(Global)으로 사용하고 싶을때 사용하는 기능이다. 언제 사용 될까? 전역적으로 사용 될때 - 한가지 값을 가지고 여러 군데에 사용되는 값 (ex. 다크 모드, 회원정보) Props drilling 방지 *Props drilling? Props drilling이란 Props를 계속 자식 컴포넌트에 전달해 사용하는것을 말한다 function App() { const [count, setCount] = useState(0); return ; } function First(props) { return ( ); } function Second(props) { return ( ); } function Third(props) { return ( ); } functi.. 이전 1 다음
