게으른 나에게

MUI(material-UI) 라이브러리리액트 UI 도구디자인이 미리 적용되어 완성된 UI 컴포넌트 사용 가능사용자화 가능한 테마 통해 일관된 스타일 적용빈응형 디자인 지원 및 다양한 기능, 유틸리티 제공https://mui.com/ MUI: The React component library you always wantedMUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design.mui.com  라이브러리 설치yarn add @mui/material @emotion/react @emotion/styled mui ..

CORS (Cross-Origin Resource Sharing)교차 출처 리소스 공유브라우저에서 발생하는 오류 출처(Origin)URL에서 프로토콜(Protocol), 도메인 이름(Domain Name), 포트(Port)          ->      "출처" =>  이것이 다르면 CORS 오류  다른 출처간의 통신을 막아놓은 이유는 보안 때문  해결 방법1. 프론트엔드에서 해결하는 방법Proxy 서버 설정 브라우저와 서버간의 통신에서 출처 교차브라우저에서 요청 -> 바로 백엔드 요청 보내는 것 X브라우저에서 요청 -> 현재 프론트엔드 서버에서 요청 O프론트엔드 서버 -> 백엔드 서버 요청package.json에서 수정"proxy": "백엔드 서버"fetch(도메인이 생략된 형태)fetch('/')  ..

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는 가능한 많은 타입을 유추하려고 함. 변수에 저장된 값, 문자열해당 값의 자료형을 이 변수의 타입으로 여기고 사용