분류 전체보기73 TypeScript - Enum, Interface Enum(열거형) JavaScript에서는 기본적으로 열거형을 지원하지 않지만, TypeScript에서는 문자형 열거형과 숫자형 열거형을 지원한다. 열거형은 숫자형과 문자열형, 혹은 이 둘의 조합으로 정의될 수 있다. 디폴트 값으로는 숫자형을 사용하며 각 값은 자동으로 0부터 시작하여 1씩 증가한다. 다음과 같이 수동으로 값을 지정할 수도 있다. enum Color { Red = 1, Green = 2, Blue = 4, } let c: Color = Color.Green; let greenValue: number = Color.Green; let blueValue: number = Color.Blue; console.log(c); // 출력: 2 console.log(greenValue); // 출력:.. 2023. 5. 31. TypeScript - 타입, 함수, 연산자 활용 타입 TypeSciprt? TypeScript는 마이크로소프트에서 개발한 JavaScript의 상위 집합 언어이다. JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어로, JavaScript가 밟전하면서 생긴 단점을 보완하기 위해 등장하게 되었다. TypeScript는 정적타입 검사 기능을 제공하며, 코드의 가독성과 유지 보수성을 높여준다. 이를 통해 개발자는 런타임 에러를 최소화하고, 코드 작성 시간을 단축하며, 협업 시 코드의 가독성을 높일 수 있다. TypeScript의 타입 Boolean let isShow: boolean = true; let isDone: boolean = false; Number let number1: number = 5; le.. 2023. 5. 30. TypeScript 프로젝트 환경 구성하기 TypeScript 프로젝트 환경 구성하기 1. 프로젝트 폴더를 만든 후 `npm init -y`로 npm을 사용할 준비를 한다. 2. `npm install typescript --save-dev`로 TypeScript를 설치한다. 3. 프로젝트 루트 디렉토리에 tsconfig.json 파일을 생성한 후 밑의 내용을 붙여 넣는다. //tsconfig.json //compilerOptions 내의 속성은 자유롭게 커스텀 할 수 있습니다. { "compilerOptions": { "target": "es6", "module": "commonjs", "sourceMap": true, "outDir": "./dist" }, "include": [ "src/**/*" ] } TypeScript ESLint와 P.. 2023. 5. 30. React - useCallback useCallback이란? useCallback 또한 useMemo와 마찬가지로 메모이제이션 기법을 활용한 Hook이다. useMemo는 값의 재사용을 위해 사용하는 Hook이라면, useCallback은 함수의 재사용을 위해 사용하는 Hook이다. function Calculator({x, y}){ const add = () => x + y; return {add()} ; } 해당 컴포넌트가 리렌더링 되더라도 그 함수가 의존하고 있는 값인 x와 y가 바뀌지 않는다고 가정해보자. 그렇다면 함수 또한 메모리 어딘가에 저장해 뒀다가 다시 꺼내서 쓸 수 있다. /* useCallback를 사용하기 전에는 꼭 import해서 불러와야 합니다. */ import React, { useCallback } from .. 2023. 5. 23. React - useMemo Hook이란? Hook은 React 16.8에 새로 추가된 기능이다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다. Hook을 사용할 때는 두 가지 규칙을 준수해야만 한다. 1. 리액트 함수의 최상위에서만 호출하여야 한다. 2. 오직 리액트 함수 내에서만 사용되어야 한다. useMemo useMemo는 특정 값(value)을 재사용하고자 할 때 사용하는 Hook이다. function Calculator({value}){ const result = calculate(value); return {result} ; } 위의 컴포넌트는 props로 넘어온 value 값을 calculate라는 함수에 인자로 넘겨서 result 값을 구한 후, 엘리먼트로 출.. 2023. 5. 22. React - Diffing Algorithm 1. 각기 서로 다른 두 요소는 다른 트리를 구축한다. 2. 개발자가 제공하는 key 프로퍼티를 가지고, 여러 번 렌더링을 거쳐도 변경되지 말아야 하는 자식 요소가 무엇인지 알아낼 수 있다. React는 위의 두 가정을 가지고 새로운 휴리스틱 알고리즘(Heuristic Algorithm)을 구현해내었다. 실제 이 두 가정은 거의 모든 실제 사용 사례에 들어맞게 됩니다. 여기서 React는 비교 알고리즘(Diffing Algorithm)을 사용한다. *휴리스틱(Heuristic)이란 불충분한 시간이나 정보로 인하여 합리적인 판단을 할 수 없거나, 체계적이면서 합리적인 판단이 굳이 필요하지 않은 상황에서 사람들이 빠르게 사용할 수 있게 보다 용이하게 구성된 간편한 추론의 방법을 뜻한다. Diffing Alg.. 2023. 5. 22. 이전 1 ··· 3 4 5 6 7 8 9 ··· 13 다음
