쭈링이.log 쭈링이.log

React useState React useState 란 컴포넌트가 가질 수 있는, 또는 변할 수 있는 상태의 값이라고 한다. useState를 변수에 저장하기 위해 Distructuring 문법을 사용하여 저장할 수 있다. //useState 변수 선언 let [ 상태값 저장 변수 , 상태값 갱신 함수] = useState(상태초기값); 변수와 state의 차이점은 변수가 변경이 되면 html에 자동으로 반영이 안되지만, state는 자동으로 html이 재랜더링이 된다. // App.js import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let post = 'Restaur..

Typescript infer typescript 에서 타입에 대한 조건식을 넣어 줄때 extends와 삼항 연산자를 사용하여 타입에 들어오느 파라미터에 따라 타입을 바꿀수 있다. // extends 를 사용하여 타입을 T라는 타입이 string을 가지고 있는지 확인한다. type Age = T extends string ? string : unknown;// 삼항연산자로 조건을 만들어 타입을 선언한다. // a는 string 타입 let a: Age // a2는 unknown 타입 let a2: Age Infer infer 이란 제네릭 파라미터에 들어간 타입을 뽑아내 다른 변수에 넣어두어 타입을 선언할때 사용하기도한다. // T 에서 타입을 받아와서 R 이라는 변수에 저장한다. type Person =..

Typescript keyof Typescript keyof 란 class, interface, Object 등 타입에서 key 값들을 모두 가져와서 유니언 타입으로 선언해준다. // interface 선언 interface Person { age: number, name: string } // class 선언 class Dog { name : string; constructor(name) { this.name = name; } } // keyof 를 사용하여 Person의 속성들을 모두 가져와 유니언 타입으로 만든다. type PersonKeys = keyof Person// name | age // keyof 를 사용하여 Dog의 속성들을 모두 가져와 유니언 타입으로 만든다,. type DogKeys..

React JSX React JSX 란 Javascript 에 xml을 추가하여 확장한 문법이다 javascript 에 html 을 작성하여 react를 만드는데 효율적으로 만들 수 있다. // App.js import logo from './logo.svg'; import './App.css'; function App() { return ( // JSX 문법으로 js 파일에 html을 작성할 수 있다. Blog ); } export default App; html의 h4 태그속성이 적용되어 화면이 출력이 된다. className html 태그에 className을 부여하여 html의 class 속성처럼 사용하여 App.css 파일을 import 하여 App.css 파일에 스타일을 적용해 줄 수 있다. ..

React 설치 1) node.js 홈페이지 들어가서 다운로드 2) VSCode 설치 폴더를 하나 생성 후 폴더 경로로 react 설치하기위해 PowerShell 이나 git bash 로 연다. npx create-react-app 프로젝트명 원하는 프로젝트명을 입력 후 설치해준다. 이러한 화면이 나오면 성공적으로 설치된 것이다. 터미널을 종료 후 작업폴더를 들어가면 프로젝트명으로 생성된 리액트 프로젝트가 생성이 되어있다. VSCode를 실행 한 후 프로젝트명으로 생성된 폴더를 불러온다. 프로젝트명이 보이면 잘 불러온 것이다. 프로젝트명 아래 src폴더를 열면 App.js파일이 있는데 이 파일이 리액트의 메인페이지이다. 프로젝트를 실행하려면 VSCode 메뉴탭에 Terminal을 클릭 한 뒤 New Te..

Typescript index signatures Typescript index signatures 란 object 타입에서 각 속성마다 타입을 하나씩 정해주는 것이 아니라 한번에 타입을 지정해줄 수 있는것이다. // 기존은 속성별로 타입을 정해주었다. interface StringType { name: string, age: string, location: string } // index signature 를 사용하면 모든속성에 타입을 줄 수있다. interface StringType { [key: string]: string,//[key: string] 이란 모든 문자열로된 속성을 의미 } let user: StringType = { name: 'zelord', age: '27', location: ..

Typescript implements Typescript implements 란 부모의 메소드나 변수를 그대로 가져다가 쓰지 않고 오버라이드를 해서 사용하는것이다. implements 는 class의 interface에 만족하는지 여부를 체크할 때 사용한다. // intreface 로 타입을 선언한다. interface PetType { gender: string, age: number } // class를 선언하여 implements로 interface 타입을 불러온다. class Pet implements PetType { gender: string; age: number = 27; constructor(x: string) { this.gender = x; } } let bomi = new Pet(..

Typescript d.ts Typescript d.ts 파일이란 타입정의들을 보관하는 파일이다. d.ts파일은 자동으로 글로벌 모듈이 아니여서 다른파일이 참조하여 사용 할 수 없다. // test.d.ts // 타입들의 정의를 보관하는 파일이다. export type Age = number;// export 키워드를 사용하여 다른 타입스크립트 파일에서 사용한다. export interface Person { name: string } 모든 타입들을 정리해 놓은 레퍼런스용 d.ts 파일을 자동으로 생성하기 위해선 tsconfig.json 파일에서 옵션을 추가한다. // tsconfig.jon { "compilerOptions": { "target": "ES5", "module": "CommonJS", "..