프론트엔드42 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. React - Virtual DOM React는 UI의 상태를 추적하고 변화가 일어난 요소들을 빠르게 업데이트할 수 있도록 Virtual DOM이라는 가상의 DOM객체를 활용한다. 이는 실제 DOM의 사본 같은 개념으로, React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 후를 비교하고 바뀐 부분을 적용한다. Virtual DOM은 Real DOM의 가벼운 사본과 같다. Real DOM은 Browser에서 생성되는 Document Object Model을 가리키는 용어이며, Virtual DOM과 구분하기 위해 이 용어를 사용한다. Real DOM (DOM) DOM은 Document Object Model의 약자로, 뜻을 그대로 풀어보면 문서 객체 모델을 의미한다. 여기서 문서 객체란 브라우.. 2023. 5. 22. 이전 1 2 3 4 5 ··· 7 다음
