4장. 스타일링 1) 인라인 스타일링 2) 클래스 스타일링 3) 여러 개 스타일 적용 - 여러 개 스타일 - 인라인 스타일과 혼용 4) 외부 스타일 이용하기 App.js에서 import { viewStyles, textStyles } from './style

핵심: "이 사이트가 얼마나 빠른가?"설명: 앞서 설명한 FCP, LCP, TBT 등이 포함된 영역입니다. 브라우저가 콘텐츠를 얼마나 빨리 렌더링하고, 사용자의 입력에 얼마나 기민하게 반응하는지를 측정합니다.개선 포인트: 이미지 압축, 코드 분할(Code Splitti

브릿지 main thread : UI담당 shadow thread : 레이아웃 계산 native module : 각 모듈에 자체 스레드가 있다. 안드로이드 = 스레드 폴을 공유 JSX xml과 매우 유사하다. UI작업을 할 때 가독성을 준다. 바벨을 사용하여 자바스

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

리액트를 사용하는 이유Vanilla JS : 순수하게 자바스크립트만을 이용해 개발한 것Markup : HTML 언어로 정적인 화면을 구성하는 것HTML = HyperText Markup LanguageRendering : 웹 브라우저에서 읽어들인 웹 문서(HTML, C