코딩100 [Next.js] Hydration와 use client 하이드레이션(hydration)이란?서버에서 렌더링된 HTML을 클라이언트 측에서 React의 상태와 이벤트 핸들러와 결합하는 과정을 말하며, 이를 통해 페이지는 초기 로드 시 빠르게 표시되며, 이후 클라이언트 측에서 동적인 동작이 가능해진다. 동작 과정아래의 과정을 통해 서버에서 렌더링된 HTML을 빠르게 클라이언트에 표시하면서, 클라이언트에서 React 애플리케이션의 상호작용을 활성화할 수 있다. 서버 사이드 렌더링────────────────────────────────────────────────────────────────────────서버1. React 애플리케이션 렌더링 -> HTML 생성 -> HTML 전달───────────────────────────────────────────────.. 2024. 7. 22. TypeScript Functions - 노마드코더 Chapter 3 Call Signature함수의 타입을 정의하는 방법 중 하나로, Call Signature는 함수가 어떤 매개변수를 받아 어떤 타입의 값을 반환하는지 명확히 설명해준다. 이는 인터페이스 또는 타입 별칭을 사용하여 정의할 수 있도록 도와준다. Call Signature의 장점명확한 타입 정의: 함수의 입력과 출력 타입을 명확히 정의하여, 함수 사용 시 타입 안전성을 보장한다.코드 재사용성: 동일한 시그니처를 가진 여러 함수를 정의할 때 일관성을 유지할 수 있다.타입 체크: 함수 타입을 미리 정의함으로써, 함수 호출 시 올바른 타입의 매개변수를 전달하도록 강제할 수 있다.// 함수 타입 별칭 'Multiply'를 정의, // 이 타입은 두 개의 숫자 매개변수를 받아 숫자를 반환하는 함수 타입을 나타낸다.t.. 2024. 7. 20. TypeScript 작동 방법 - 노마드코더 Chapter 2 TypeScript는 어떻게 작동할까?TypeScript는 JavaScript 코드로 변환(컴파일)되어 작동한다고 한다. 하지만 JavaScript와는 다르게 정적 타입 검사가 적용되어 JavaScript에서는 런타임 시 확인할 수 있었던 에러들을 컴파일과정에서 확인할 수 있다. 아래 코드 사진을 통해 확인할 수 있다. TypeScript의 Type 선언 방식 암시적 타입 (Implicit Types)암시적 타입은 변수가 선언될 때 타입을 명시하지 않아도, 컴파일러나 인터프리터가 타입을 자동으로 추론하는 경우를 말한다.let name = "정규"; // TypeScript는 name을 string 타입으로 추론let age = 24; // age를 number 타입으로 추론 명시적 타입 (E.. 2024. 7. 19. TypeScript 시작 - 노마드코더 Chapter 1 TypeScript란?TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript의 슈퍼셋이다. TypeScript는 JavaScript의 한계를 보완하고 대규모 애플리케이션 개발을 용이하게 하기 위해 만들어졌다. 슈퍼셋은 기본 기능에 더해서 추가적인 기능을 제공하는 상위 개념을 말한다.JavaScript의 한계?JavaScript는 동적 타입 시스템을 가지고 있어, 변수나 함수의 인자 타입을 명시하지 않고 있다. 이는 간단한 스크립트 작성에는 유연성을 제공하지만, 대규모 애플리케이션 개발에서는 예기치 못한 오류를 발생할 수 있는데, 아래 2가지 예시를 통해 JS의 한계를 확인할 수 있다. 예시 1: 잘못된 타입 전달아래 코드에서 문자열 "xxxxxx"를 인자로 .. 2024. 7. 19. 이전 1 2 3 4 5 6 7 8 ··· 25 다음