프론트엔드 개발자10 React Suspense Suspense란?React의 내장 컴포넌트로, 비동기 작업 중에 대체 UI를 표시하는 데 사용된다. 주로 데이터 패칭과 같은 비동기 작업을 수행하는 컴포넌트를 감싸서 데이터가 로드되는 동안 사용자에게 로딩 상태를 보여줄 수 있다. 주요 기능:로딩 상태 관리: 비동기 작업이 완료될 때까지 대체 UI(fallback)를 보여줄 수 있다.비동기 컴포넌트 렌더링: 컴포넌트가 필요한 데이터를 모두 로드한 후에만 해당 컴포넌트를 렌더링한다Loading...}> {/* 데이터 로딩 중에 표시할 UI */} {/* 비동기 작업을 수행하는 컴포넌트 */} 2024. 7. 23. [Next.js] Hydration와 use client 하이드레이션(hydration)이란?서버에서 렌더링된 HTML을 클라이언트 측에서 React의 상태와 이벤트 핸들러와 결합하는 과정을 말하며, 이를 통해 페이지는 초기 로드 시 빠르게 표시되며, 이후 클라이언트 측에서 동적인 동작이 가능해진다. 동작 과정아래의 과정을 통해 서버에서 렌더링된 HTML을 빠르게 클라이언트에 표시하면서, 클라이언트에서 React 애플리케이션의 상호작용을 활성화할 수 있다. 서버 사이드 렌더링────────────────────────────────────────────────────────────────────────서버1. React 애플리케이션 렌더링 -> HTML 생성 -> HTML 전달───────────────────────────────────────────────.. 2024. 7. 22. TypeScript CLASSES AND INTERFACES - 노마드코더 Chapter 4 Class타입스크립트에서는 객체 지향 프로그래밍을 지원하는 기능을 제공하고 있다. 추상 클래스와 상속을 통해 코드의 재사용성을 높이고, 구조화된 방식으로 프로그램을 설계할 수 있다. 접근 제한자를 사용하여 클래스의 속성과 메서드의 접근 범위를 제어할 수 있으며, 이를 통해 코드의 캡슐화를 구현할 수 있다.실습하기// 'Words' 타입 정의: 문자열 키와 문자열 값을 가지는 객체 타입type Words = { [key: string]: string; // 인덱스 시그니처: 키는 문자열, 값은 문자열};// 'Dict' 클래스 정의class Dict { private words: Words; // private 속성 'words', 'Words' 타입 사용 constructor() { .. 2024. 7. 21. TypeScript Functions - 노마드코더 Chapter 3 Call Signature함수의 타입을 정의하는 방법 중 하나로, Call Signature는 함수가 어떤 매개변수를 받아 어떤 타입의 값을 반환하는지 명확히 설명해준다. 이는 인터페이스 또는 타입 별칭을 사용하여 정의할 수 있도록 도와준다. Call Signature의 장점명확한 타입 정의: 함수의 입력과 출력 타입을 명확히 정의하여, 함수 사용 시 타입 안전성을 보장한다.코드 재사용성: 동일한 시그니처를 가진 여러 함수를 정의할 때 일관성을 유지할 수 있다.타입 체크: 함수 타입을 미리 정의함으로써, 함수 호출 시 올바른 타입의 매개변수를 전달하도록 강제할 수 있다.// 함수 타입 별칭 'Multiply'를 정의, // 이 타입은 두 개의 숫자 매개변수를 받아 숫자를 반환하는 함수 타입을 나타낸다.t.. 2024. 7. 20. 이전 1 2 3 다음
