1

화면 내비게이션, 리액트 라우터새로고침하지 않고, 애플리케이션 내에서 이동할 때 브라우저 URL을 새로고침할 수 있어서 가장 중요한 도구 중 하나이다.https://vitejs.dev/https://reactrouter.com/en/main리액트 라우

함수 컴포넌트에서 클래스와 생명주기 메서드를 작성할 필요 없이 리액트 기능을 사용하기 위해 도입됐다.대규모 애플리케이션에서 전역 state를 관리하기 위해 주로 리덕스, 리코일(Recoil), Mobx 같은 서드파티 라이브러리를 사용한다.useContext, useRe

리액트란? 리액트를 선택하는 이유? 빠른 속도, 선언형 프로그래밍, 높은 성능, SEO 친화적, 크로스 플랫폼, 쉬운 테스트, 강력한 커뮤니티 지원리액트의 주요 기능 무엇인가?자바스크립트 XML(JSX) 구문을 사용한다. 자바스크립트의 확장 구문으로 개발자들가상 DOM

1) 파일 시스템 기반 라우팅2) 사전 렌더링 기능src/pages 폴더 구조 기반 라우팅 npx create-next-app@15.2.3 즉시 실행, 앱생성, 버전타입스크립트 사용 ? YEsLint 사용 ? YTailwindCSS 사용 ? YJS코드를 src 디렉토리

많은 용량 차지 페이지 로딩 속도 + 사용자 경험Webp, AVIF 등 차세대 이미지 포맷으로 변환 (브라우저 지원 확인)사용자 화면에 맞게 이미지 크기 조절 불필요한 데이터 로드 최소화스크롤을 올리거나 내려야 보이는 이미지는 나중에 필요할 때 불러오는 기법최적화 과정

병렬 라우트, 가로채기 라우트라는 고급 라우트 기법하나의 화면에서 여러 페이지를 병렬로 렌더링하는 기능이다.레이아웃이 복잡하거나 멀티태스킹이 필요한 UI를 구현할 때 매우 유용하다.하나의 화면에 여러 개의 페이지 컴포넌트를 동시에 렌더링한다.기존의 렌더링 방식 단순히

로그인, 회원 가입, 로그아웃 등 서버에서 이루어지는 작업을 쉽고 간단하게 구현할 수 있다.서버에서 실행되는 비동기 함수 가운데 클라이언트가 직접 호출할 수 있는 함수를 말한다.로그인, 회원 가입, 데이터 생성처럼 서버에서 이루어지는 작업을 쉽고 간단하게 구현할 수 있

특정 UI요소를 스트리밍 방식으로 렌더링하는 기능을 제공, 렌더링 가능한 요소부터 먼저 표시하기 때문에 사용자를 필요 이상으로 오래 기다리지 않게 할 수 있다.용량이 크거나 준비하는 데 오랜 시간이 걸리는 데이터를 보다 효과적으로 전송하기 위해 고안된 방식이다.데이터를

한 입 크기로 잘라 먹는 Next.js 책 스터디 내용앱 라우터 버전에서 페이지를 캐시해 성능을 최적화하고 사용자의 요청에 빠르게 응답하는 방법을 살펴본다.서버와 클라이언트에서 페이지를 각각 캐시한다. 풀 라우트 캐시란?next.js 서버에서 사전 렌더링 결과로 생성한

서버 컴포넌트 도입으로 변경된 데이터 페칭 방식라우터 버전이 갖는 한계를 극복하기 위한 것SSR : getServerSidePropsSSG, ISR : getStaticProps서버 컴포넌트 사용하여 문제 해결서버 컴포넌트이기 때문에 async/await 으로 비동기적

1) 폰트 파일 프로젝트에 추가 .ttf src/assets/fonts 폴더에 저장한다. 2) CSS에서 폰트 불러오기 @font-face사용 3) 컴포넌트에서 사용하기 style={{ fontFamily: 'SummerFont, sans-serif'

타입을 변수처럼 다루는 기능이다. 값이 아니라 타입을 나중에 정할 수 있게 해주는 문법타입을 나중에 주입할 수 있는 재사용 가능한 코드를 만드는 것이다. 코드를 한 번 작성, 다양한 타입과 함께 안전하게 사용할 수 있도록 하기 위해서이다.제네릭이 없을 때= 중복이 많고

숫자 enum 열거형 열거형은 첫 번째 값을 초기화 0하고 각 추가 값에 1을 더한다. 각 열거형 값에 고유한 숫자 값을 할당할 수 있다. 값이 자동으로 증가하지 않는다. 숫자 대신 이름으로 의미를 표현할 수 있다. Type 사용자 정의 이름으로 유형을 정의할 수

어떤 유형의 데이터가 전달되는지 이해 어려움 -> 함수 매개변수와 변수에 아무런 정보가 없음코드 내에서 전달되는 데이터 유형을 지정할 수 있다. 유형이 일치하지 않을 때 오류 보고 가능= 코드 실행 전에 지정된 유형이 일치하는지 확인string = "Hello, Typ

두가지 방법대로 하면 설치가 완료된다.init -p는 굳이 안해도 된다.css파일에 @import "tailwindcss"; 만 선언하고 사용해도 됌

1) readme.sohttps://readme.so/editor2)https://github-profile-readme-editor.netlify.app/3) https://www.easy-me.com/d easy-me

useParams URL의 동적 파라미터 (경로 변수)를 가져올 때 사용한다. } /> 와 같이 요청이 들어오면 동적 id값을 가져오고자 할때 useParams를 사용한다. movie/:id는 동적인 값을 나타낸다. 동적인 값 id를 가져오고 싶을 때 usePara

링크 -> 더 많은 것을 찾아볼 수 있또록 더 많은 정보를 확인할 수 있도록..//object를 보면 fetch http 요청을 보내기 위해 사용하는 web api데이터를 가져오기 위한 기본 도구 GET, POST fetch는 Promise를 반환한다.async-awa

part 1 part2 ['there', 'are', 'you', 'are', 'how', 'hello!'].map((item) => item.toUppderCase()) ['THERE', 'ARE', 'YOU', ARE', 'HOW', 'HELLO!']가 ret