Beginner 8회차 1 (8/6) | 디바운스(Debounce)와 쓰로틀(Throttle), DefinitelyTyped, 타입 단언, 양방향 데이터 바인딩과 단방향 데이터 바인딩, git hub flow

디바운스(Debounce)와 쓰로틀(Throttle)

Throttle: 반복 실행에 부하(저항)을 주기 (10번 실행 --> 5-6번 실행)
Debounce: 마지막에 한 번만 실행하기

 

 

import "./style.css";
document.querySelector<HTMLDivElement>("#app")!.innerHTML = /* html */ `
<div>
<h1>Hello World</h1>
  </div>
`;

window.addEventListener("scroll", (event) => {
  console.log(event);
});

스크롤할 때마다 너무 많은 함수가 호출됨

 

호출이 stack됨(=하나씩 쌓임)

콜스택: 호출하는 함수를 쌓아놓고 하나씩 처리하는 것

--> 콜스택이 초과되면 스택 오버플로우(stack overflow)라는 오류 발생

함수 호출이 너무 많이 중첩되어 콜 스택의 용량을 초과할 때 발생 --> 오류메세지 발생

RangeError: Maximum call stack size exceeded

 

 

쓰로틀(Throttle)

많이 호출되는 함수를 시간으로 조절하여 적게 호출하게끔 조절하는 기능

성능 향상과 메모리 부담을 적게 해주기 위해서 !

 

lodash-es를 이용해서 throttle을 가지고 와서 사용. 0.4초의 부하를 줌

 

 

0.4초의 저항이 생겨서 함수를 적게 호출하고 있음

 

 

디바운스(Debounce)

자주 발생하는 이벤트를 제어하여 특정 시간이 지난 후에 한 번만 실행되도록 하는 기술

주로 성능 최적화를 위해 사용되며, 예를 들어 사용자가 입력 필드에 텍스트를 입력할 때, 각 입력마다 이벤트 핸들러가 호출되는 대신 일정 시간 동안 입력이 멈추면 한 번만 호출되도록 할 수 있음

 

scroll 예제

throttle 덕분에 부하가 걸리긴 했지만 위로 스크롤, 아래로 스크롤 할 때 같은 함수가 계속 호출되고 있음

lodash에서 debounce 가지고 와서 사용

 

스크롤 움직일 때는 콘솔 창에 출력하지 않다가 멈추고 1초 뒤에 실행되는 모습

 

검색창 예제

한 글자 한 글자 다 호출이 되는 현상.

 

--> 너무 서버와 통신이 잦음 !

디바운스를 이용해서 원하는 검색어를 다 타이핑 한 후 마지막 한 번만 네트워크 통신하도록 !

 

위와 달리 딱 한번만 호출되는 모습

 

--> throttle로 사용해도 되긴함 (주의: 마지막을 보장해주지는 않음)

 

타입 단언

 

--> 타입 단언을 해주면 됨

타입스크립트가 정확한 타입 추론을 하기 어려울 때, 개발자가 '괜찮아 ! 내가 타입이 확실하다는 것을 단언할게 !'라고 확신하는 것

but 이는 아주 확실할 때 사용, 남발하면 안됨 (사람은 실수를 할 수 있으므로)

 

 

--> event.target(=inputEl)을 HTMLInputElement 타입으로 선언.

이를 통해 TypeScript는 event.target이 HTMLInputElement임을 알고 해당 타입의 속성에 안전하게 접근할 수 있게 됨 !

 

DefinitelyTyped

lodash-es 패키지와 함께 제공되는 타입 선언 파일을 의미

TypeScript 커뮤니티에서 관리하는 타입 선언 파일의 저장소로, JavaScript 라이브러리에 대한 타입 정보를 제공함

 

DT가 무엇인가요?
• DT: “DefinitelyTyped”의 약자입니다.
• 목적: JavaScript 라이브러리를 TypeScript에서 사용할 때 타입 정보를 제공하여 코드의 안정성과 오류를 줄입니다.

타입 정보가 왜 필요한가요?
JavaScript는 동적 타입 언어입니다. 즉, 변수나 함수의 타입을 명시적으로 지정하지 않습니다. 이로 인해 런타임 오류가 발생할 수 있습니다. 반면, TypeScript는 정적 타입 언어로, 타입 정보를 명시하여 컴파일 단계에서 오류를 잡을 수 있습니다. 타입 정보를 제공하면 개발할 때 타입 관련 오류를 미리 잡을 수 있어 코드의 안정성이 높아집니다.

DefinitelyTyped가 하는 일
DefinitelyTyped는 JavaScript 라이브러리용 TypeScript 타입 정의 파일을 모아 놓은 저장소입니다. 이 파일들은 JavaScript 라이브러리를 TypeScript에서 사용할 때 그 라이브러리가 어떤 타입을 사용하는지 알려줍니다.

 

타입스크립트로 만들어져 있어서 별도 설치 안해도 됨

타입스크립트로 만들어지지 않았지만 타입 지칭할 수 있는 별도 패키지가 있어서 설치를 해주면 됨 !

 

// DT가 붙은 모든 것 같은 방법으로 설치하면 됨
// 별도 타입 설치하는 방법
npm i -D @types/lodash-es

 

 

양방향 데이터 바인딩과 단방향 데이터 바인딩

--> 패턴 암기하기 !!! ★★★

 

양방향 데이터 바인딩

--> 데이터의 흐름이 양방향

데이터를 입력하면 화면에 표시되고 화면에 표시되는 데이터를 수정하면 데이터가 수정되는 것

ex. input, button, select, textarea, checkbox 등에서 많이 사용됨

 

import { useState } from 'react'

export default function App() {
  const [text, setText] = useState('')

  return (
    <>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <h2>{text}</h2>
    </>
  )
}

 

--> title이라는 데이터를 통해 input 요소에 값을 넣는 것도 가능하고

input 요소에서 입력한 값이 title을 갱신하여 값이 변경되는 것도 가능함 ! 양방향 데이터 바인딩

 

단방향 데이터 바인딩

--> 데이터의 흐름이 단방향

 

 

--> title이 div 요소로 들어가는 것은 되지만 div요소에서 title을 갱신하는 것은 안됨 (단방향 데이터 바인딩)

 

---

 

* 잘 모르는 기술 등을 검증해보는 것은 완전히 백지상태에서 해보기
진행 중인 프로젝트에서 테스트하면 주변 환경이 오염됨.
주변 환경 영향을 최소화시켜서 테스트해보고 프로젝트에 적용해보는 방식으로 !

* 프로젝트 초기화하고 싶을 때 (숨겨져 있는 .git 파일 찾아서 삭제하기)

// 버전 관리 초기화
rm -rf .git​

*

npm i lodash-es

• ES 모듈 형식: lodash-es 패키지는 ES 모듈 형식으로 작성되었습니다. 이는 모던 JavaScript 번들러(예: Webpack, Rollup, Vite)에서 사용하기에 적합합니다.

• Tree Shaking 지원: ES 모듈 형식이므로, 모던 번들러에서 Tree Shaking을 지원하여 사용하지 않는 코드를 제거할 수 있습니다.

* main으로 병합하는 방법

// 혼자 개발할 때, 중요하지 않은 프로젝트일 때 (실무에서는 잘 안씀)
git merge setTodo​

--> 실무에서는 PR(pull request) 방법을 주로 이용 !
리뷰 기능, 테스트 기능, 병합에 권한 부여해서 최종 병합 처리자 지정 가능 등의 기능이 있기 때문
= git hub flow

pr 생성

리뷰 작성 가능

병합 성공

로컬 저장소에 업데이트

git switch -c feature/createTodo​

feature: 기능을 만드는 브랜치임을 명시해주는 것

branch 삭제하는 명령 'git branch -D'

* 개발공부
장기적인 관점에서 바라보고 어떤 패턴으로 공부할건지에 대한 패턴 구축 필요

 

프로젝트 전체에서 찾아서 이름 바꾸기

 

 

 

https://www.heropy.dev/p/PcUkdT#h2_%EC%B4%88%EA%B8%B0%ED%99%94_Init

Git 핵심 명령어 모음

https://www.heropy.dev/p/OidQSe

React 핵심 패턴