스페이스 루미

모듈(module) 모듈이란, 서로 연관있는 데이터나 함수를 하나로 묶은 단위이다. 모듈은 코드와 선언 둘 다 포함될 수 있으며, 재사용성, 고립성, 번들링을 위해 사용된다. 모듈을 사용하게되면 다른 파일에서 선언한 것들을 가져와 사용할 수 있다. ts 파일을 하나 만들고, 변수선언을 해주면 아래와 같은 에러가 발생한다 ex) test1.ts cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module. test1.ts 파일을 모듈로 만들려면 import, expor..

Partial T의 모든 프로퍼티를 옵셔널로 만드는 타입. interface Product{ id: number; name: string; } const updateProduct(product:Product, updateProduct:Partial){ return {...product, ...updateProduct}; } const product1 = { id:1; name:'new desk'; } const product2 = updateProduct(product1, {name:'old desk'}); updateProduct 함수는, 첫번째 매개변수를 두번째 매개변수로 덮어씌우는 함수다. product2는 product1에 name을 'old desk' 로 변경했다. 는 인 셈이다. Readonl..

리터럴 타입 좁히기 const sayGoodBye = "Goodbye World!" // "Goodbye World!"로 타입을 지정 let sayBye = "Bye World!" // 문자열로 타입을 지정 const 로 선언한 객체는 변하지 않기 때문에 타입스크립트는 이 문자열 타입을 "Goodbye World!"라는 단 하나의 타입으로 지정한다. 이것을 문자열 타입 좁히기라고 한다. 문자열 리터럴 타입 문자열 리터럴타입은 유니언타입, 타입 가드, 타입별칭과 잘 결합된다. type Size = "small" | "large" | "xlarge"; const thisSize = (size:Size) => { console.log(`this phone is too ${size}`); } thisSize("..

함수 타이핑 const typeFunc = (x: number, y: number): number => { return x + y; } 인자로 들어올 x, y의 타입과 반환타입을 선언해줄 수 있다. 반환되는 값의 타입은 return문을 보고 추론할 수 있으므로 생략이 가능하다. 전체 타입 작성하기 let allTypeFunc: (a: number, b: number) => number = function(x: number, y: number): number { return x + y; }; let noTypeFunc = function(x, y){return x+y}; 위 코드를 보면 allTypeFunc 변수는 number 타입을 가진 a와 b를 인자로 받고, number를 리턴해주는데, 이걸 함수에 ..

인터페이스 (interface) interface ProductModel { // 인터페이스 선언 id: number; } // productModel 인터페이스를 타입으로 갖는 product 객체를 받아 콘솔로 찍음 const printProduct = (product: ProductModel) => { console.log(product); }; let myProduct = { id: 10, productName: "my first product" }; printProduct(myProduct); // {id: 10, productName: "my first product"} 인터페이스는 정의된 프로퍼티가 있는지와, 이 프로퍼티의 타입이 맞는지만 검사한다. 정의되지 않은 프로퍼티는 검사하지 않고, 프..

타입스크립트 기본 타입 타입스크립트에는 다양한 기본타입들이 있다. boolean, number, string, Array, object, tuple, enum, any, void, null, undefiend, never, unknown 에 대해서 알아보자. 불리언(Boolean) true, false 값 관례로 앞에 is~ 를 붙인다. (ex: 모달 열려있니?) const isOpenModal:boolean = true; 숫자(Number) 16진수, 10진수, 2진수 8진수 리터럴값을 지원하는 부동소수값. const integer: number = 100 const hex:number = 0xefef; // 61423 문자열(String) 텍스트 데이터타입. 큰따옴표("), 작은따옴표 ('), 백틱(..

ESLint Next.js는 바로 사용할 수 있는 통합 ESLint 환경을 제공합니다. package.json에 next lint를 스크립트로 추가하세요: "scripts": { "lint": "next lint" } 그런 다음 npm 실행 린트 또는 실 린트를 실행합니다: yarn lint 애플리케이션에 ESLint가 아직 구성되지 않은 경우 설치 및 구성 프로세스를 안내합니다. 다음과 같은 메시지가 표시됩니다: ? ESLint를 어떻게 구성하시겠습니까? 기본 구성 + Core Web Vitals 규칙 세트(권장) 기본 구성 없음 다음 세 가지 옵션 중 하나를 선택할 수 있습니다: 엄격: 보다 엄격한 코어 웹 바이탈 규칙 세트와 함께 Next.js의 기본 ESLint 구성을 포함합니다. ESLint를 ..

타입스크립트 Next.js는 React 애플리케이션을 구축하기 위한 TypeScript 우선 개발 환경을 제공합니다. 필요한 패키지를 자동으로 설치하고 적절한 설정을 구성하기 위한 TypeScript 지원이 내장되어 있습니다. 또한 에디터용 TypeScript 플러그인도 제공됩니다. 시청하기: 기본 제공 TypeScript 플러그인에 대해 알아보기 → YouTube(3분) 새 프로젝트 create-next-app은 이제 기본적으로 TypeScript와 함께 제공됩니다. npx create-next-app@latest 기존 프로젝트 파일 이름을 .ts / .tsx로 변경하여 프로젝트에 TypeScript를 추가하세요. next dev 및 next build를 실행하여 필요한 종속성을 자동으로 설치하고 권장..

애널리틱스 Next.js 속도 인사이트를 사용하면 다양한 메트릭을 사용하여 페이지의 성능을 분석하고 측정할 수 있습니다. vercel 배포에서 아무런 구성 없이 실제 경험 점수 수집을 시작할 수 있습니다. 이 문서의 나머지 부분에서는 Next.js 속도 인사이트에서 사용하는 기본 제공 릴레이에 대해 설명합니다. 웹 바이탈 웹 바이탈은 웹 페이지의 사용자 경험을 파악하기 위한 유용한 지표 세트입니다. 다음과 같은 웹 바이탈이 모두 포함되어 있습니다: 첫 바이트에 도달하는 시간(TTFB) 첫 번째 콘텐츠 페인트(FCP) 최대 콘텐츠 페인트(LCP) 첫 번째 입력 지연(FID) 누적 레이아웃 시프트(CLS) 다음 페인트(INP)로의 인터랙션(실험 중) (실험적) 첫 바이트에 도달하는 시간 첫 바이트까지의 시간..

지연 로딩 Next.js의 지연 로딩은 route를 렌더링하는 데 필요한 JavaScript의 양을 줄여 애플리케이션의 초기 로딩 성능을 개선하는 데 도움이 됩니다. 이를 통해 클라이언트 컴포넌트와 가져온 라이브러리의 로딩을 지연시키고 필요할 때만 클라이언트 번들에 포함할 수 있습니다. 예를 들어 사용자가 클릭하여 모달을 열 때까지 로딩을 지연시키고 싶을 수 있습니다. Next.js에서 지연 로딩을 구현하는 방법에는 두 가지가 있습니다: next/dynamic과 함께 동적 임포트 사용 Suspense와 함께 React.lazy() 사용 기본적으로 서버 컴포넌트는 자동으로 코드 분할되며, 스트리밍을 사용하여 서버에서 클라이언트로 UI 조각을 점진적으로 전송할 수 있습니다. 지연 로딩은 클라이언트 컴포넌트에..

정적 자산 Next.js는 이미지와 같은 정적 파일을 루트 디렉터리의 public이라는 폴더 아래에 제공할 수 있습니다. 그러면 기본 URL(/)에서 시작하는 코드에서 public 내부의 파일을 참조할 수 있습니다. 예를 들어 public에 me.png를 추가하면 다음 코드가 이미지에 액세스합니다: import Image from 'next/image'; function Avatar() { return ; } export default Avatar; 이 폴더는 robots.txt, favicon.ico, Google 사이트 인증 및 기타 정적 파일(.html 포함)에도 유용합니다! 디렉터리 이름이 public인지 확인하세요. 이 이름은 변경할 수 없으며 정적 자산을 제공하는 데 사용되는 유일한 디렉토리입..

메타데이터 Next.js에는 SEO 및 웹 공유성을 개선하기 위해 애플리케이션 메타데이터(예: HTML 헤드 요소 내부의 meta 및 link 태그)를 정의하는 데 사용할 수 있는 메타데이터 API가 있습니다. 애플리케이션에 메타데이터를 추가하는 방법에는 두 가지가 있습니다: 구성 기반 메타데이터: 정적 메타데이터 객체 또는 generateMetadata function을 layout.js 또는 page.js 파일로 내보냅니다. 파일 기반 메타데이터: 정적 또는 동적으로 생성된 특수 파일을 route 세그먼트에 추가합니다. 이 두 가지 옵션을 모두 사용하면 Next.js가 페이지에 대한 관련 요소를 자동으로 생성합니다. ImageResponse 생성자를 사용하여 동적 OG(OpenGrpah) 이미지를 생..

스크립트 최적화 : 레이아웃 스크립트 여러 routes에 대한 third-party(타사) 스크립트를 로드하려면 next/script 가져와서 레이아웃 구성 요소에 직접 스크립트를 포함하세요: // app/dashboard/layout.tsx import Script from 'next/script'; export default function DashboardLayout({ children, }: { children: React.ReactNode; }) { return ( {children} 또는 dangerouslySetInnerHTML 를 사용합니다: 경고: Next.js가 스크립트를 추적하고 최적화하려면 인라인 스크립트에 id 속성을 할당해야 합니다. 추가 코드 실행 이벤트 핸들러는 스크립트 컴..

데이터 캐싱 Next.js는 요청별(권장) 또는 전체 route 세그먼트에 대한 데이터 캐싱을 기본적으로 지원합니다. 요청별 캐싱 fetch() 기본적으로 모든 fetch() 요청은 캐시되고 자동으로 중복 제거됩니다. 즉, 동일한 요청을 두 번 수행하면 두 번째 요청은 첫 번째 요청의 결과를 재사용합니다. // app/page.tsx async function getComments() { const res = await fetch('https://...'); // The result is cached return res.json(); } // 이 함수는 두 번 호출되지만 결과는 한 번만 가져옵니다. const comments = await getComments(); // cache MISS // 두 번째..

데이터 가져오기 알아두면 좋습니다: 이 새로운 데이터 Fetching 모델은 현재 React 팀에서 개발 중입니다. 서버 컴포넌트에 비동기/대기(async/await)를 도입하고 클라이언트 컴포넌트에 새로운 use() 훅을 도입하는 약속에 대한 지원 React RFC를 읽어보시길 권장합니다. 사용해 볼 수는 있지만 아직 안정적이지 않습니다. 최신 개발 사항을 반영하기 위해 이 문서를 계속 업데이트할 예정입니다. React와 Next.js 13에는 애플리케이션에서 데이터를 가져오고 관리하는 새로운 방법이 도입되었습니다. 새로운 데이터 불러오기 시스템은 app 디렉토리에서 작동하며 fetch() 웹 API 위에 구축됩니다. fetch()는 프로미스를 반환하는 원격 리소스를 가져오는 데 사용되는 웹 API입니..

Edge 및 Node.js 런타임 Next.js의 맥락에서 '런타임'은 코드가 실행되는 동안 사용할 수 있는 라이브러리, API 및 일반 기능의 집합을 의미합니다. Next.js에는 애플리케이션 코드의 일부를 렌더링할 수 있는 두 가지 서버 런타임이 있습니다: Node.js 런타임 엣지 런타임 각 런타임에는 고유한 API 세트가 있습니다. 사용 가능한 API의 전체 목록은 Node.js 문서 및 Edge 문서를 참조하세요. 두 런타임 모두 배포 인프라에 따라 스트리밍을 지원할 수도 있습니다. 기본적으로 app 디렉토리는 Node.js 런타임을 사용합니다. 하지만 경로별로 다른 런타임(예: Edge)을 선택할 수 있습니다. 런타임 차이점 런타임을 선택할 때 고려해야 할 사항이 많습니다. 이 표는 주요 차이..

정적 및 동적 렌더링 Next.js에서 경로는 정적 또는 동적으로 렌더링할 수 있습니다. 정적 경로에서는 컴포넌트가 빌드 시점에 서버에서 렌더링됩니다. 작업 결과는 캐시되어 후속 요청에서 재사용됩니다. 동적 경로에서는 요청 시점에 컴포넌트가 서버에서 렌더링됩니다. 정적 렌더링(기본값) 정적 렌더링(기본값)은 모든 렌더링 작업이 미리 수행되고 사용자와 지리적으로 가까운 CDN(콘텐츠 전송 네트워크)에서 제공될 수 있으므로 성능이 향상됩니다. layout이나 page에서 동적 함수 또는 동적 데이터 가져오기를 사용하여 동적 렌더링을 선택할 수 있습니다. 이렇게 하면 요청 시점에 Next.js가 전체 경로를 동적으로 렌더링합니다. 이 표에는 동적 함수와 정적 데이터 가져오기(캐싱)가 경로의 렌더링 동작에 어떤..

국제화 (다국어 지원) Next.js를 사용하면 여러 언어를 지원하도록 콘텐츠 라우팅 및 렌더링을 구성할 수 있습니다. 사이트를 다양한 locale에 맞게 조정하려면 번역된 콘텐츠(로컬라이제이션)와 국제화된 경로가 포함됩니다. 용어 Locale: 언어 및 서식 기본 설정 집합에 대한 식별자입니다. 여기에는 일반적으로 사용자가 선호하는 언어와 해당 지역이 포함됩니다. en-US: 미국에서 사용되는 영어 nl-NL: 네덜란드에서 사용되는 네덜란드어 nl: 네덜란드어, 특정 지역 없음 라우팅 개요 브라우저에서 사용자의 언어 기본 설정을 사용하여 사용할 locale을 선택하는 것이 좋습니다. 기본 언어를 변경하면 애플리케이션으로 들어오는 Accept-Language 헤더가 수정됩니다. 예를 들어 다음 라이브러리..

Next.js beta문서가 공식문서랑 병합 되었다. 미들웨어 미들웨어를 사용하면 요청이 완료되기 전에 코드를 실행할 수 있습니다. 그런 다음 들어오는 요청에 따라 request 또는 response header를 재작성, 리디렉션, 수정하거나 직접 응답하여 response를 수정할 수 있습니다. 알아두면 좋은 사항 미들웨어는 캐시된 콘텐츠보다 먼저 실행되므로 정적 파일과 페이지를 개인화할 수 있습니다. 미들웨어의 일반적인 예로는 인증, A/B 테스트, 로컬라이즈된 페이지, 봇 보호 등이 있습니다. 미들웨어는 app 라우터 또는 page 라우터보다 먼저 실행되므로 미들웨어 동작은 동일합니다. 12.2 이전 버전의 미들웨어를 사용 중인 경우 업그레이드 가이드를 참조하세요. 미들웨어 사용하기 미들웨어 사용을..

Rendering : Fundamentals - 렌더링 : 기초 렌더링은 작성한 코드를 사용자 인터페이스로 변환합니다. React 18과 Next.js 13에는 애플리케이션을 렌더링하는 새로운 방법이 도입되었습니다. 이 페이지는 렌더링 환경, 전략, 런타임의 차이점과 이를 선택하는 방법을 이해하는 데 도움이 될 것입니다. 렌더링 환경 애플리케이션 코드를 렌더링할 수 있는 환경은 클라이언트와 서버 두 가지가 있습니다. 클라이언트는 애플리케이션 코드에 대한 요청을 서버에 보내는 사용자 디바이스의 브라우저를 말합니다. 그런 다음 서버의 응답을 사용자가 상호 작용할 수 있는 인터페이스로 변환합니다. 서버는 애플리케이션 코드를 저장하고, 클라이언트로부터 요청을 받고, 일부 연산을 수행한 후 적절한 응답을 다시 보..

병렬 Route 병렬 라우트를 사용하면 독립적으로 탐색할 수 있는 하나 이상의 페이지를 동일한 화면에서 동시에 렌더링할 수 있습니다. 소셜 사이트의 대시보드 및 피드와 같이 앱에서 매우 동적인 섹션의 경우 병렬 라우트를 사용하여 복잡한 라우팅 패턴을 구현할 수 있습니다. 규칙 병렬 라우트는 명명된 slots을 사용하여 생성됩니다. 슬롯은 @folder 규칙으로 정의됩니다. 예를 들어, 다음 파일 구조는 비디오 분석 대시보드에 대한 두 개의 명시적 슬롯, 즉 @audience와 @views를 정의합니다: 위의 폴더 구조는 이제 /dashboard/layout.js 컴포넌트에서 @audience 및 @views 슬롯을 prop으로 받아들이고 children prop과 함께 병렬로 렌더링할 수 있다는 의미입니..

Routing - Route Handlers / 라우트 핸들러 라우트 핸들러를 사용하면 웹 요청 및 응답 API를 사용하여 지정된 경로에 대한 사용자 지정 요청 핸들러를 만들 수 있습니다. 알아두면 좋습니다: 라우트 핸들러는 앱 디렉토리 내에서만 사용할 수 있습니다. 라우트 핸들러는 페이지 디렉터리 내의 API 경로와 동일하므로 API 경로와 라우트 핸들러를 함께 사용할 필요가 없습니다. 규칙: 라우트 핸들러는 app 디렉터리 내의 route.js|ts 파일에 정의됩니다: // app/api/route.ts export async function GET(request: Request) {} 라우트 핸들러는 page.js 및 layout.js와 유사하게 app 디렉터리 내에 중첩될 수 있습니다. 하지만 ..

Routing - Loading UI: 로딩 UI Next.js 13에는 새로운 파일 규칙인 loading.js가 도입되어 React Suspense로 의미 있는 로딩 UI를 만들 수 있습니다. 이 규칙을 사용하면 경로 세그먼트의 콘텐츠가 로드되는 동안 서버에서 즉시 로딩 상태를 표시할 수 있으며, 렌더링이 완료되면 새 콘텐츠가 자동으로 교체됩니다. 즉시 로딩 상태 즉시 로딩 상태는 탐색 시 즉시 표시되는 fallback(대체) UI입니다. 스켈레톤, 스피너와 같은 로딩 표시기를 미리 렌더링하거나 표지 사진, 제목 등과 같이 향후 화면에서 작지만 의미 있는 부분을 미리 렌더링할 수 있습니다. 이를 통해 사용자가 앱이 응답하고 있음을 이해하고 더 나은 사용자 경험을 제공할 수 있습니다. 폴더 내에 loa..

Routing - Linking and Navigating : 연결 및 탐색 Next.js 라우터는 클라이언트 측 네비게이팅과 함께 서버 중심 라우팅을 사용합니다. 즉각적인 로딩 상태와 동시 렌더링을 지원합니다. 즉, 탐색이 클라이언트 측 상태를 유지하고, 비용이 많이 드는 재렌더링을 피하며, 중단이 가능하고, 경쟁 조건을 일으키지 않습니다. route 사이를 탐색(navigate)하는 방법에는 두 가지가 있습니다: 컴포넌트 useRouter 훅 이 페이지에서는 , useRouter()를 사용하는 방법을 살펴보고 네비게이팅이 어떻게 작동하는지에 대해 자세히 알아볼 것입니다. 컴포넌트 는 HTML 엘리먼트를 확장하여 경로 간 프리페칭과 클라이언트 측 탐색을 제공하는 React 컴포넌트입니다. Next.js..

Routing - Pages and Layouts : 페이지와 레이아웃 Next.js 13의 App Router에는 페이지, 공유 레이아웃 및 템플릿을 쉽게 만들 수 있는 새로운 파일 규칙이 도입되었습니다. 이 페이지에서는 Next.js 애플리케이션에서 이러한 특수 파일을 사용하는 방법을 안내합니다. 페이지 페이지는 route에 고유한 UI입니다. page.js 파일에서 컴포넌트를 내보내 페이지를 정의할 수 있습니다. 중첩 폴더를 사용하여 route를 정의하고 page.js 파일을 사용하여 route에 공개적으로 액세스할 수 있도록 합니다. app 디렉터리 내에 page.js 파일을 추가하여 첫 번째 페이지를 만듭니다: // `app/page.js`는 루트 `/` URL의 UI입니다. export def..

Routing - Defining Routes : 라우팅 정의 이 페이지에서는 Next.js 애플리케이션에서 경로를 정의하고 구성하는 방법을 안내합니다. Routes 만들기 app 디렉토리 내에서 폴더는 경로를 정의하는 데 사용됩니다. 각 폴더는 URL 세그먼트에 매핑되는 route 세그먼트를 나타냅니다. 중첩된 route를 만들려면 폴더를 서로 중첩할 수 있습니다. route 세그먼트를 공개적으로 액세스할 수 있도록 하기 위해 특별한 page.js 파일이 사용됩니다. 이 예제에서는 /dashboard/analytics URL path에 해당하는 page.js 파일이 없기 때문에 공개적으로 액세스할 수 없습니다. 이 폴더는 구성 요소, 스타일시트, 이미지 또는 기타 함께 배치된 파일을 저장하는 데 사용할..

Next.js 라우팅 기본사항 Next.js 13에서는 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 새로운 App Router가 React 서버 컴포넌트 위에 구축되었습니다. 이 페이지에서는 새로운 라우팅 모델의 기본 개념을 소개합니다. 용어 문서 전체에서 이러한 용어가 사용되는 것을 볼 수 있습니다. 다음은 간단한 참조입니다: Tree: 계층 구조를 시각화하기 위한 규칙입니다. 예를 들어 부모 및 자식 컴포넌트가 있는 컴포넌트 트리, 폴더 구조 등이 있습니다. Sub Tree: 트리의 일부로, 새 루트(첫 번째)에서 시작하여 잎(마지막)에서 끝나는 트리의 일부입니다. Root: 루트 레이아웃과 같은 트리 또는 하위 트리의 첫 번째 노드입니다. Leaf: 하위 트리의 노드 중 자식이 없..

Next 공식문서 한글번역 스터디 공부용으로 Next.js beta문서 번역을 시작합니다. DeepL 번역기를 적극 사용 할거고, 가독성을 위해 생략,수정 혹은 의역한 부분이 있을 수 있습니다. Next.js beta 원문 링크는 https://beta.nextjs.org/docs 입니다. 오역된 부분이 있거나, 문제 발생시 dnjfdnjf22@gmail.com 혹은 https://open.kakao.com/me/100rumi 으로 연락주세요. Getting Started : 시작하기 Next.js 문서는 두 개의 사이트로 나뉘어져 있습니다: Next 13 앱 라우터(베타) 문서(이 문서): React 서버 컴포넌트, 스트리밍, 새로운 데이터 불러오기 등을 사용해 보세요. Next 13 (안정) 문서: ..

리액트 공식문서 스터디 리액트 공식 문서를 교재로 삼아 시작한 스터디. 리액트 공식문서 한글번역을 병행하면서 문장다듬고, (사실 번역기가 다함) 정리하면서 공부하는 방식으로 진행했다. 현생이 바빠서 아슬아슬하게 광탈당할 뻔 했는데, 스터디원분들 합의하에 한주 미뤄져서 (6주차에 끝날 예정이였던것을 7주차로) 다행히 완주 할 수 있었다. 또 감사합니다. 기존의 리액트 공식문서로 하려다가, 회사동료가 리액트 Beta 문서를 추천해줘서, 문서의 퀄리티를 보고 이걸로 해야겠다고 결정했다. 스터디 도중에 Beta가 공식문서로 전환되었고, 유의미한 결과를 얻을 수 있었다. 이전 공식문서에서는 클래스형 컴포넌트가 포함돼있었는데 우리가 학습한것에는 없었기 때문. 시간도 절약되고 좋았다. 처음에는 시중에 있는 리액트 도..

Escape Hatches : 커스텀 Hook으로 로직 재사용하기 React에는 useState, useContext, useEffect와 같은 몇 가지 내장 Hook이 있습니다. 때로는 데이터를 가져오거나, 사용자가 온라인 상태인지 추적하거나, 채팅방에 연결하는 등 좀 더 구체적인 목적을 위한 Hook이 있었으면 좋겠다는 생각이 들 때가 있습니다. React에서 이러한 Hook을 찾지 못할 수도 있지만 애플리케이션의 필요에 따라 자신만의 Hook을 만들 수 있습니다. 학습 내용 커스텀 Hook의 정의와 직접 작성하는 방법 컴포넌트 간에 로직을 재사용하는 방법 커스텀 Hook의 이름을 지정하고 구조화하는 방법 커스텀 Hook을 추출해야 하는 시기와 이유 커스텀 훅: 컴포넌트 간 로직 공유 대부분의 앱이 ..