분류 전체보기 (138) 썸네일형 리스트형 [Typescript] 공식문서 공부중3 Narrowing타입은 여러 종류를 함께 선언할 수 있다.이것을 if문 등으로 타입별로 분기처리를 한다면 타입가드(type guard)라는 특수한 형식의 코드로 인식된다. 배열은 객체(object) 타입이다. 그러나 null 또한 객체(object) 타입이므로 오류가 발생할 수 있음에 주의해야 한다.이 경우 값이 존재하는지를 &&를 추가하여 확인하면 의도대로 사용할 수 있다.animals 내에 어떤 항목이 있는지 확인하기 위해 in을 사용할 수 있다. instanceof로 타입 좁히기도 가능하다. 내부에 있는 인스턴스 종류에 따라 나뉜다.조건에 따라 서로 다른 값을 참조해야 할 때 ?로 optional하게 값을 만들고, !로 값이 존재한다는 조건을 달게 되면 올바르게 사용된 것이라고 볼 수 없다. !는 .. [Typescript] 공식문서 공부중2 Typescript는 구조와 타입의 가능성에 대한 것만 고려하기 때문에 구조적인 타입의 타입 시스템(structurally typed type system)이라고 한다. Everyday TypesUnion Types는 여러 종류의 타입을 사용할 수 있다.여러 종류의 타입을 사용할 경우에는 해당하는 모든 타입이 가능한 메서드만 적용이 가능하다.그중 일부에만 적용하기를 원한다면 if문 등으로 경우의 수를 나눠주어야 한다.Type Assertions타입을 할당한 것과 같이 컴파일러에 의해 제거되며 런타임에 영향을 주지 않는다.만약 그런 식으로 사용하는 것이 너무 제한적이라면 두가지를 동시에 사용할 수도 있다. 고유한 값을 설정하고 싶다면 Symbol을 사용할 수 있다.함수 등 겹치는 이름이 덮어쓰이는 상황을 .. [Next.js] Client Rendering 파일 상단에 "use client"를 정의하여 사용한다.자식 컴포넌트를 포함하여 파일로 가져온 다른 모든 모듈이 클라이언트 번들의 일부로 간주된다. 장점상호작용성: 클라이언트 컴포넌트는 상태, 효과 및 이벤트 리스너를 사용할 수 있으므로 사용자에게 즉각적인 피드백을 제공하고 UI를 업데이트할 수 있습니다.브라우저 API: 클라이언트 컴포넌트는 지리적 위치나 로컬 스토리지와 같은 브라우저 API에 액세스할 수 있습니다. client rendering 방법1. full page load: server rendering와 동일하다.2. subsequent navigation: 클라이언트 컴포넌트는 서버에서 렌더링되는 HTML 없이 전적으로 클라이언트에서 렌더링 된다. 즉, 클라이언트 컴포넌트 자바스크립트.. [Next.js] Server Components 기본적으로 Next.js는 서버 컴포넌트를 사용한다. 따라서 추가 구성 없이 서버 렌더링을 자동으로 구현할 수 있으며, 필요한 경우 클라이언트 컴포넌트를 사용하도록 선택할 수 있다. 장점데이터 가져오기: 데이터 가져오기를 데이터 소스에 더 가까운 서버로 옮길 수 있다. 즉 렌더링에 필요한 데이터를 가져오는 데 걸리는 시간과 클라이언트의 요청 횟수를 줄여 성능을 향상시킬 수 있다.보안: 토큰 및 API 키와 같은 민감한 데이터와 로직을 클라이언트에 노출할 위험 없이 서버에 보관할 수 있다.캐싱: 서버에서 렌더링하면 결과를 캐시하여 후속 요청 및 사용자 전체에서 재사용할 수 있다. 이렇게 하면 각 요청에서 수행되는 렌더링 및 데이터 가져오기 양을 줄여 성능을 개선하고 비용을 절감할 수 있다. 성능: 기본적으.. [Typescript] 공식문서 공부중1 TypeScript for JavaScript Programmers타입을 선언할 때는 type보다 interface를 선호한다. Unions는 할당할 수 있는 값을 제한하여 선언할 수 있다. The Basics코드를 실행할 때 자바스크립트 런타임은 값의 유형, 즉 어떤 종류의 동작과 기능을 가지고 있는지 파악하여 수행할 작업을 선택해야 한다.기본값 문자열이나 숫자와 같은 일부 값의 경우 런타임에 typeof 연산자를 사용하여 유형을 식별할 수 있다. 그러나 함수와 같은 다른 값의 경우 해당 유형을 식별할 수 있는 런타임 메커니즘이 없다. 자바스크립트는 함수를 실행할 수 있는 경우인지 확인할 수 없다. 가능한지 확인하는 경우는 함수를 호출하여 발생하는 일을 확인하는 것 뿐이다. 이러한 동작 방식은 코드가 .. [Typescript] 무한스크롤(Infinity scroll) 사용한 기술: Supabase, Tanstack-Query, Typescript, Next.js 무한 스크롤은 사용자가 웹 페이지를 아래로 스크롤할 때 자동으로 새 콘텐츠를 로드하고 표시하는 웹 디자인 기법이다. 이를 통해 페이지 매김이 필요 없는 무한 스크롤 환경을 만들고 끊김 없이 매끄러운 탐색 환경을 제공한다. 본래 Tanstack-Query의 Infinite Queries를 사용하려 했으나supabase에서 제공하는 데이터를 불러오는 API는 적용하기에는 부적합했다.따라서 데이터를 fetch하는 것은 API를 사용하고, Tanstack-Query는 상태 관리만 사용하였다. 아래는 무한스크롤을 구현한 로직이다.1. 초기 데이터를 fetching한다. 이 데이터는 useSuspenseQuery를 사용.. [nomadcoders] 바닐라 JS로 그림 앱 만들기 2024.06.0520% complete [Typescript] 설치한 모듈의 타입 적용 설치된 모듈의 타입을 타입스크립트가 읽을 수 없다면 설치해줘야 한다. npm i -D @types/모듈 이름 Deinitely typed 프로젝트로 생성된 데이터 타입을 적용할 수 있다. GitHub - DefinitelyTyped/DefinitelyTyped: The repository for high quality TypeScript type definitions.The repository for high quality TypeScript type definitions. - DefinitelyTyped/DefinitelyTypedgithub.com [Typescript] interface와 type 차이점 type는 같은 이름으로 생성되면 중복되지 않아야 한다고 경고한다. interface는 같은 이름으로 생성되면 객체에 추가된다. Users에서 age가 없으면 오류가 발생한다. interface로 선언하는 방법과, class로 추상화하는 방법이 있다.interface는 빌드하는 과정에서 사라지므로 더 작은 파일을 만든다.그러나 constructor를 생성하는 부분을 상속받는 class에 써줘야 하는 번거로움이 있다.또한 interface를 사용하면 public만 사용 가능하고 private, protected는 사용될 수 없다. +) 복수의 interface를 상속하고 싶다면 User, Human 처럼 사용하면 된다. [Typescript] class와 객체지향 추상화 class(abstract class)1. 다른 클래스에서 상속받을 수 있는 class다.2. new로 객체를 생성할 수 없다.3. 추상화 함수를 생성할 수 있다.(getNickName) 상속받은 class(extends)1. new로 객체를 생성할 수 있다.2. 추상화 함수는 반드시 포함하고 있으며, 함수의 형태를 정의해야 한다. 아래에서 private와 protected가 작동하는 범위를 알 수 있다. 1. 객체의 경우 대괄호[]로 타입을 한정할 수 있다.2. class로 정의한 Word도 타입으로 사용할 수 있다.3. words가 constructor의 바깥에 선언되고 안쪽에서 초기값인 this.words를 선언한 형태로 사용할 수 있다.4. 만약 접근할 수 있.. 이전 1 2 3 4 5 6 7 ··· 14 다음
