게으른 나에게

fetch('API주소').then((response) => response.json()).then((data) => console.log(data)); fetch함수Response 객체로 데이터를 가져옴.실제 필요한 json 본문 데이터를 추출해주기 위해 json( ) 메서드를 사용해 변환 필요.Promise비동기 작업이 완료, 실패 했을 때 처리하기 위한 객체.자바스크립트에 기본적으로 내장되어 있는 객체.'대기' '이행' '거부' 상태로 표현 fetch 함수Promise 인스턴스(then, catch, finally) then 메서드Promise 상태가 이행, 거부 상태가 되었을 때 실행. => 비동기 작업이 처리되었을 때 실행 동기화를 하는 시점은 데이터를 불러오는 데 성공했을 때fetch('/pr..

function Todos (props) { return( );}여기 있는 상수 Todos가 리액트 함수 컴포넌트를 가지고 있음.상수 Todos에 타입 지정.react에서 React 가져오기.'.FC' 추가. (리액트 패키지'@types/react'에 정의된 타입) => 이 자체가 제네릭 타입리액트 패키지에 내장된 타입 정의.이 함수가 함수형 컴포넌트로 동작함을 명시. import React from 'react';const Todos: React.FC = (props) => { return( );}  React.FC에 정의된 타입 T.제네릭 타입을 사용해 FC라는 제네릭 타입의 용도에 맞게 사용할 하나의 타입을 명시적으로 설정.FC은 제네릭 타입. 여기에 집어넣을 값..

React 프로젝트가 TypeScript 사용하도록 설정해야 함.Create-React-App(CRA) 사용. 1. create react app 검색2. 'Create React App Docs' 문서 페이지https://create-react-app.dev/docs/getting-started/ Getting Started | Create React AppCreate React App is an officially supported way to create single-page Reactcreate-react-app.devCreate-React-App 사용법, 타입스크립트와 통합하는 방법 ... 등등 3. Building your App(앱 빌드) 선택 -> Adding TypeScripthttps:..

새로운 배열 만듦.직접 만든 유틸리니 함수, 헬퍼 함수호출하기만 해도 배열에 새로운 값 추가 가능 (기존 배열 유지한 상태로)새로운 배열 생성 타입을 any로 지정했기 때문에 number만 들어온 것을 인식 x 제너릭 함수 이름과 매개변수 목록 사이에 홑화살괄호() 추가제너릭 타입 정의: 함수 안에서만 사용할 수 있는 타입보통 Type의 로 사용, 어떤 식별자 사용해도 상관 x 인수의 정확한 값 파악 가능첫번째 인수는 숫자로 구성된 배열, 두번째 숫자  => checkArray 숫자 배열배열을 구성하는 값들의 타입 = value 값의 타입  제너릭 장점1. 유연성2. 타입 안정성

타입을 가진 함수함수는 매개변수를 가짐매개변수에 타입 지정 가능타입 추론 부분return 값 반환, 반환 값 타입 알 수 있음  => "함수 타입 추론 가능"  함수의 반환타입 직접 지정 가능 함수 타입 사용시 고려할 점1. 매개변수 타입2. 반환 값 타입  특별한 반환 타입: voidreturn문이 없을 때null, undefined와 비슷 항상 함수와 결합해서 사용

동일한 타입 반복해서 정의하는 일.코드 중복을 줄이기 위함. 타입 별칭(Type Alias)type 원하는 이름 = 타입 정의- 배열 형태 바꿔서도 가능

모든 변수가 타입 1개만 갖고 있음.1개의 변수 - 1가지 자료형  유니온 타입1개의 변수 - n가지 자료형

파일 생성name.ts JS 데이터 타입number, String, Boolean, 자료형(array, objects), 함수, 매개변수  TS 기본형 타입Number, String, Boolean, null, undefined 변수선언 (타입은 소문자)형태 -> 변수: 타입(해당 변수에 저장할 자료형 지정) number 값 할당, 숫자형이면 모두 가능 String Boolean 자료형  - 배열(array)  - 객체형 (objects)any (어떤 값이든 저장) -> 예비적 사용 타입 타입형   - 배열 + 객체형  타입 추론TS는 가능한 많은 타입을 유추하려고 함. 변수에 저장된 값, 문자열해당 값의 자료형을 이 변수의 타입으로 여기고 사용

자바스크립트에서 확장된 언어, superset 언어자바스크립트의 기본적인 문법, 코드 작성법, if문, for 반복문, 객체 사용법 그대로 사용JS는 원래 동적 타입(dynamically typed) 언어 -> TS는 정적 타입(statically Typed)의 특징  JS는 원래 동적 타입(dynamically typed) 언어 함수 선언 시점에 자료형 특정 짓지 않음. (미리 정해두지 않음)n개의 매개 변수를 받는다는 것만 알고 있음. 숫자형 문자형  타입스크립트 사용function add(a: number, b: number) { return a + b;}const result = add('2', '5')=> 코드 오류 발생코드 실행하지 않아도 코드 작성시 바로 오류 확인 가능

TypeScript를 설치하는 방법: 두 가지npm을 이용한 설치 (Node.js 패키지 매니저)TypeScript의 Visual Studio 플러그인 설치Visual Studio 2017과 Visual Studio 2015 Update 3는 기본적으로 Typescript를 포함하고 있음. npm을 이용한 설치 (Node.js 패키지 매니저) 1. node.js 설치https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. TypeScript 공식 웹 사이트 방문https://www.typescriptlang...