강의 실습159 타입스크립트 템플릿 소개 1. 타입스크립트 템플릿 타입스크립트로 리액트 프로젝트를 시작할 때 가장 빠르게 시작할 수 있는 도구를 소개한다. Create React App 의 공식문서 페이지에서 확인할 수 있다. 참고링크 : https://create-react-app.dev/docs/adding-typescript Adding TypeScript | Create React AppNote: this feature is available with react-scripts@2.1.0 and higher.create-react-app.dev 리액트 앱을 템플릿으로 만들고 어떻게 구동되는지 살펴본다.section-final 폴더를 생성한 뒤, 타입스크립트 템플릿을 갖는 리액트 앱을 설치한다.터미널에서 'npx create-react-ap.. 2024. 12. 30. 외부 라이브러리 사용하기 1. 외부 라이브러리 사용하기 외부 패키지를 설치하고 타입 오류없이 사용하는 방법을 알아본다. npm 사이트에서 외부 패키지 사용시, 타입스크립트 환경에서는 라이브러리 코드도 타입 검사를 실행하기 때문에, 라이브러리 코드들에 대한 타입 정보가 제공되지 않은 상황에서는 타입 검사가 제대로 이루어지지 않기 때문에 오류가 발생하여 바로 사용하기가 어렵다. react-router-dom 과 같이 타입스크립트 코드로 작성된 라이브러리는 설치하자마자 바로 사용 가능하다. 참고링크 : https://www.npmjs.com/package/react-router-dom react-router-domDeclarative routing for React web applications. Latest version: 7.1... 2024. 12. 30. Context API 1. Context API 리액트의 Context API 를 타입스크립트 환경에서 사용해본다. App 컴포넌트에서 todo 아이템들의 모든 상태관리 기능을 다 전담하고 있는 상황이다. 2개의 컨텍스트를 만들어서, 하나의 컨텍스트에는 todos state 를 공급하게 만들고, 나머지 하나의 컨텍스트에서는 onClickAdd, onClickDelete 와 같은 상태변화 함수들을 공급하도록 만든다. - /src/App.tsximport React, { useState, useRef, useEffect, useReducer, useContext } from 'react';.../* context */// todos state 공급 컨텍스트export const TodoStateContext = React.cre.. 2024. 12. 29. 상태관리와 Props 2 1. Todo 리스트 앱 제작 - 리스트 랜더링, 개별 아이템 삭제 1) 리스트 랜더링 todos state 에 저장된 여러개의 배열 아이템들을 리스트로 랜더링한다. - Terminalnpm start- /src/App.tsx... return ( Todo children {todos.map((todo) => ({todo.content}))} );...div 태그 안에 랜더링되는 todo 아이템을 컴포넌트로 분리한다. 여러 컴포넌트에서 공통으로 사용되는 타입을 유지해야 할 때, 별도의 타입스크립트 파일을 만들.. 2024. 12. 28. 상태관리와 Props 1 1. useState 와 Props 타입스크립트에서 사용하기 : Todo 리스트 앱 제작 터미널에서 'npm run start' 명령어를 입력하여 리액트 앱을 실행한다. - Terminalnpm run start > section11@0.1.0 start > react-scripts start D:\개발\인프런\한 입 크기로 잘라먹는 타입스크립트(TypeScript)\onebite-typescript\section11\node_modules\resolve\lib\sync.js:113 throw err; ^ Error: Cannot find module 'typescript' from 'D:\개발\인프런\한 입 크기로 잘라먹는 타입스크립트(TypeScript).. 2024. 12. 27. 타입스크립트 리액트 시작하기 한 입 크기로 잘라먹는 타입스크립트 - 타입스크립트와 리액트 (React With TypeScript) 1. 리액트 앱 설치 section11 폴더를 생성한 뒤, 리액트 앱 설치를 위해 터미널에서 'npx create-react-app .' 명령어를 입력한다. 명령어에서 .의 의미는 새로운 폴더를 생성하지 말고 section11 폴더 아래 리액트 앱을 바로 생성하라는 의미이다. - Terminalnpx create-react-app . Creating a new React app in D:\개발\인프런\한 입 크기로 잘라먹는 타입스크립트(TypeScript)\onebite-typescript\section11. Installing packages. This might take a couple .. 2024. 12. 26. 조건부 타입 기반의 유틸리티 타입 - Exclude, Extract, ReturnType 한 입 크기로 잘라먹는 타입스크립트 - 조건부 타입 기반의 유틸리티 타입들 (Exclude, Extract, ReturnType) 1. Exclude T에서 U를 제거하는 타입. - chapter3.ts/** * Exclude * -> 제외하다, 추방하다 * -> T에서 U를 제거하는 타입 *//* 원본 유틸리티 타입type Exclude = T extends U ? never : T;*/// 직접 만들기 : 조건부 타입(유니온 타입 전달시 분산적인 조건부 타입)type Exclude = T extends U ? never : T;// 1 단계// Exclude |// Exclude// 2 단계// string |// never (공집합)// 최종// stringtype A = Exclude;2. Ext.. 2024. 12. 25. 맵드 타입 기반의 유틸리티 타입 2 - Pick, Omit, Record 한 입 크기로 잘라먹는 타입스크립트 - 맵드 타입 기반의 유틸리티 타입들 2 (Pick, Omit, Record) 1. Pick 객체 타입으로부터 특정 프로퍼티만 딱 골라내는 타입. - chapter2.ts/** * Pick * -> 뽑다, 고르다 * -> 객체 타입으로부터 특정 프로퍼티만 딱 골라내는 타입 */// 블로그 게시글 객체interface Post { title: string; tags: string[]; content: string; thumbnailURL?: string;}/* 원본 유틸리티 타입type Pick = { [P in K]: T[P];};*/// 직접 만들기 : 맵드 타입, 인덱스드 액세스 타입, 조건부 타입type Pick = { // K e.. 2024. 12. 24. 맵드 타입 기반의 유틸리티 타입 1 - Partial, Required, Readonly 한 입 크기로 잘라먹는 타입스크립트 - 맵드 타입 기반의 유틸리티 타입들 (Partial, Required, Readonly) 1. Partial 타입 변수로 전달된 특정 객체 타입의 모든 프로퍼티를 선택적 프로퍼티로 바꿔주는 타입. - chapter1.ts/** * Partial * -> 부분적인, 일부분의 * -> 특정 객체 타입의 모든 프로퍼티를 선택적 프로퍼티로 바꿔주는 타입 */// 블로그 게시글 객체interface Post { title: string; tags: string[]; content: string; thumbnailURL?: string;}/* 원본 유틸리티 타입type Partial = { [P in keyof T]?: T[P];};*/// 직접 만들.. 2024. 12. 23. 이전 1 2 3 4 ··· 18 다음
