TypeScript는 JavaScript에서 보았던 ||(OR) 연산자나 && (AND)와 같은 연산자를 이용하여 타입을 정할 수 있습니다. ' | ' 연산자를 이용한 타입을 유니온(Union) 타입이라고 하며, $ 연산자를 이용한 타입은 인터섹션(Intersection) 타입이라고 부른다. 🔑 유니온 타입( ' | ') 타입을 지정할 때, 하나의 데이터에 하나 이상의 타입을 지정할 수 있게 해준다. ' | '연산자를 이용하며, 자바스크립트의 || (OR) 연산자와 같이 “A이거나 B이다”라는 의미의 타입이다. function getMessage(value: number | string) { console.log(value); } getMessage(100); // 100 getMessage("hello..
💡 TypeScript란? TypeScript는 마이크로소프트에서 개발한 JavaScript의 상위 집합(Superset) 언어입니다. JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어로, JavaScript가 발전하면서 생긴 단점을 보완하기 위해 등장하게 되었습니다. TypeScript를 사용했을 시 장점 TypeScript는 정적타입 검사 기능을 제공하며, 코드의 가독성과 유지 보수성을 높여준다. 이를 통해 개발자는 런타임 에러를 최소화하고, 코드 작성 시간을 단축하며, 협헙 시 코드의 가독성을 높일 수 있다. TypeScript는 ES6의 문법을 포함한 최신 JavaScript 문법을 지원하며 인터페이스(Interface), 제네릭(Generi..
React Hook은 렌더링 최적화를 위한 Hook도 존재하며 그 역할을 하는 Hook이 바로 useCallback과 useMemo이다. useCallback Hook에 대하여 알아보고, useMemo 와 useCallback의 차이에 대하여 작성해보았다. useCallback 이란? useCallback 또한 useMemo와 마찬가지로 메모이제이션 기법을 이용한 Hook이다. useCallback은 함수의 재사용을 위해 사용하는 Hook이다. useCallback만 사용해서는 useMemo에 비해 괄목할 만한 최적화를 느낄 수는 없다. 왜냐하면 useCallback은 함수를 호출을 하지 않는 Hook이 아니라, 그저 메모리 어딘가에 함수를 꺼내서 호출하는 Hook이기 때문이다. 따라서 단순히 컴포넌트 ..
컴포넌트는 기본적으로 상태가 변경되거나 부모 컴포넌트가 렌더링이 될 때마다 리렌더링을 하는 구조로 이루어져 있다. 하지만 너무 잦은 리렌더링은 앱에 좋지 않은 성능을 끼친다. React Hook은 함수 컴포넌트가 상태를 조작하고 및 최적화 기능을 사용할 수 있게끔 하는 메서드이며 그 중 렌더링 최적하를 위한 Hook이 존재하는데, useCallback과 useMemo가 바로 그 역할을 하는 Hook이다. useMemo란? useMemo은 특정 값(value)을 재사용하고자 할 때 사용하는 Hook이다. useMemo를 호출하여 이전에 구축된 렌더링과 새로이 구축되는 렌더링을 비교해 value 값이 동일할 경우에는 이전 렌더링의 value 값을 그대로 재활용할 수 있게 된다. 이는 메모이제이션(Memoiz..
Diffing Algorithm React 의 Render 함수는 jsx 문법에 맞는 React Element 를 반환합니다. 이때 상태가 변하거나 프로퍼티가 변해서 DOM을 업데이트해야 하는 경우에 변경된 부분만 감지해서 바뀐 부분만 업데이트 하는 방식을 취하게 되는데, 이 변경된 부분을 감지하는 방법을 Diffing Algorithm 이라고 합니다. 여기서 "비교"란 Virtual DOM 끼리의 비교를 의미하며, React는 이전상태와의 비교를 위해 항상 이전 상태의 Virtual DOM의 사본을 유지한다. React 가 DOM 트리를 탐색하는 방법 React는 기존의 가상 DOM 트리와 새롭게 변경된 가상 DOM 트리를 비교할 때, 트리의 레벨 순서대로 순회하는 방식으로 탐색한다. 즉 같은 레벨(위..
Virtual DOM 이란? Virtual Dom은 Real DOM 의 가벼운 사본과 같다. JavaScript 객체로 이루어진 가상의 DOM 트리를 사용하여 실제 DOM 조작을 최소화하고 성능을 최적하는 기술 Real DOM DOM 은 Document Object Model의 약자로, 문서 객체 모델을 의미한다. DOM 은 브라우저가 HTML 문서를 조작할 수 있도록 트리 구조화한 객체 모델이다. DOM 의 조작 속도가 느려지는 이유? DOM 은 계층적 형태의 트리 구조로 구성되어 있다. 자료구조 중에서도 특히 트리는 "데이터 저장"의 의미보다는 "저장된 데이터를 더 효과적으로 탐색" 하기 위해 사용되므로, 빠른 자료 탐색 성능이 장점인 자료구조라고 볼 수 있다. 트리 구조로 된 DOM은 JavaScr..
이번에 프로젝트를 하면서 git에 대해 처음 다뤄보았다. branch 생성하기 push 하기 등 내가 branch를 push 할 때 기본적으로 알고 있어야 하는 명령어를 정리해보았다. 1. git init git intit을 하게 되면 해당 폴더에 .git 이라는 파일이 생성된다. 2. git remote add origin [GitHub 주소] GitHub 주소와 연결해준다. 3. git branch "브랜치명" 브랜치를 생성한다. 4. git checkout "브랜치명" 현재 main 브랜치에서 생성한 브랜치로 이동하려면 checkout 명령어를 사용한다. 5. git checkout -b "브랜치명" 브랜치 생성과 체크아웃을 한번에 하려면 git checkout -b "브랜치명" 을 입력한다. 새로..
리액트에서 컴포넌트는 하나의 기능 단위로 구분된 코드 모음, 즉 데이터 + 화면이 같이 존재한다 . 따라서 컴포넌트 내부 조직은 데이터가 변경되면 화면이 바뀌는, 데이터 중심으로 동작한다. 컴포넌트에서 외부로부터 받아오는 데이터는 props, 컴포넌트 안에서 바뀌는 데이터는 state로 구분할 수 있다. props란? 더보기 prpos란 컴포넌트의 프로퍼티(properties)를 의미한다. 자바스크립트에서 함수를 생각하면 이해를 하기 쉽다. 함수를 전달 인자와 함께 호출하면, 호출된 함수 내부에서 그 전달 인자를 매개변수로 받아와 접근할 수 있듯이, 상위 컴포넌트에서 호출된 하위 컴포넌트에 속성 값을 전달하면, 그 속성 값 props라는 객체를 하위 컴포넌트에서 접근 할 수 있다. 실제 함수를 호출할 때..
🧐 웹 표준이란? W3C(World Wide Web Consortium)에서 권고하는 '웹에서 표준적으로 사용되는 기술이나 규칙' 으로, 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있다. 크롬, 엣지, 사파리, 오페라, 파이어폭스 등 최신 웹 브라우저들은 모두 웹 표준을 지원합니다. 따라서 웹 표준에 맞추어 웹 페이지를 작성하면 어떤 브라우저를 사용하든 동일한 결과물을 얻을 수 있습니다. 웹 표준의 장점 1. 유지 보수의 용이성 웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리하기 이전에는 구조, 표현, 동작이 뒤섞인 코드도 많았습니다. 그러다 보니 어느 한 부분을 수정하려면 전부 뜯..
고차 함수란? 1. 다른 함수를 인자로써 전달받는 함수를 의미한다. 이 때 전달이 되는 함수는 콜백함수이다. 2. 다른 함수를 결과로써 리턴하는 함수 이런 함수를 커링 함수라고 부른다. 🧐 왜 고차 함수가 중요할까? 시야가 트이고 생산성이 증가하기 때문이다. 추상화라는 것은 복잡한 자료, 모듈, 시스템으로 부터 핵심적인 개념 즉 에센셜을 추출해 내는 것으로 이해할 수 있다. 정확한 내부 동작을 몰라도 이해하고 사용할 수 있기 때문에, 문제를 더 쉽고 빠르게 해결할 수 있다는 장점이 있다. 추상화의 관점에서 바라보면, 함수도 사고 혹은 논리의 모음이다. 자주 사용하는 기능들을 모아서 함수를 하나의 모듈처럼 만들어서 계속 재사용한다. 복잡한 모든 로직을 일일이 짜지 않아도 미리 만들어두면 가져다 쓸 수 있기..
