클로저 활용하여 디바운싱과 스로틀링 구현하기

이벤트 그룹화여러 이벤트가 짧은 시간 간격으로 연속해서 발생하는 경우, 이러한 이벤트에 바인딩한 이벤트 핸들러가 과도하게 호출될 경우 성능에 문제를 일으킬 수 있다. 디바운싱(Debouncing)과 스로틀링(Throttling)은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법이다.디바운싱디바운싱는 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 한다. 즉, 디바운싱은 짧은 시간 간격으로 발생하는 이벤트를 그룹화해서 마지막에 한 번만 이벤트 핸들러가 호출되도록 한다. (예: 검색어 자동 완성)스로틀링스로틀링은 짧은 시간 간격으로 이벤트가 연속해서 발..

• format_list_bulleted 위키
• · 2025. 10. 19.

유난한 도전을 읽고

밑줄긋기울라블라의 실패를 인정하고 서비스를 접기까지는 1년 4개월이 걸렸다. 자본금 5000만원짜리 비바리퍼블리카는 인거비를 포함해 이 앱에 2억 2000만원을 썻다. 개발 과정에서 팀원이 8명까지 늘어났지만 이태양외에 모두 떠났다. ‘그동안 하고 싶었던 일 마음껏 하게 해줘서 고맙다’고 인사하는 사람은 없었다. ‘실패했지만 좋은 기억도 있어서 다행’이라고 하는 사람도 없었다. ‘힘들 때 의지할 수 있었다’고 말하는 사람도 없었다. 모두 침묵 속에 짐을 쌌다. 결과보다 과정이 중요하다는 말은 새빨간 거짓말이었다. 실패라는 결과는 고통스러워서, 서로 아이디어를 나누고 희망에 부풀어 일했던 기억마저 지워버렸다.p.26“상인은 자기가 파는 물건의 품질과 그것을 생산하는 수단을 철저히 이해하고, 물건을 완벽한 ..

• format_list_bulleted 후기
• · 2025. 8. 27.

클래스로 리액트 상태관리하기? (클래스 컴포넌트 아님)

class로 상태 관리하기?최근 학점은행제 플래너 웹앱을 React와 TypeScript로 만들었다. 앱의 핵심 로직은 사용자가 입력한 학점은행제 플랜을 복잡한 규칙에 따라 검증하는 것이었다. 개발 초기 필요한 데이터와, 자료구조, 입출력 타입이 정해지지 않은 상황에서, class로 서비스 로직을 분리하고 클래스 인스턴스로 상태를 관리하는게 어떨까라는 생각이 들었다. 하위 클래스를 만들어 모듈화할 수 있고 테스트 코드를 작성하기도 용이하다고 생각했다. 물론 클래스 인스턴스를 리액트 상태로 관리하는 것이 까다롭고 권장되지 않는다는 것도 어렴풋이 알고 있었으나. UI 작업 이전에 class로 서비스 로직을 구현할 필요성을 느꼈다.열띤 토론해당 방식으로 개발하며 이러한 방식의 장단점을 느껴볼 수 있었고, 개발..

• format_list_bulleted 회고
• · 2025. 8. 16.

TCP 세그먼트의 최대 크기와 OSI 7 계층

개요스택오버플로우에서 TCP의 전송 크기 한계에 관한 흥미로운 질답을 발견해서 이를 정리하고 공유해본다.질문TCP 연결에서 ‘패킷’의 최대 크기는 얼마인가요?by informatik01답변 1애플리케이션 계층에서, 애플리케이션은 TCP를 스트림 지향 프로토콜로 사용합니다. 그리고 TCP는 ‘세그먼트(segment)’를 가지고 있으며, 신뢰할 수 없는 IP 패킷을 다루는 세부 사항을 추상화합니다(숨겨줍니다).TCP는 ‘패킷’ 대신 ‘세그먼트’를 다룹니다. 각 TCP 세그먼트는 TCP 헤더 안에 포함된 시퀀스 번호(sequence number)를 가집니다. TCP 세그먼트로 전송되는 실제 데이터의 크기는 가변적입니다.일부 OS에서 지원하는 getsockopt의 TCP_MAXSEG 라는 값을 사용하여 최대 T..

• format_list_bulleted 위키
• · 2025. 8. 12.

콜백 함수, 익명 함수(람다), 클로저

콜백 함수(Callback Function)콜백 함수란 인수(argument)로 다른 함수에 전달되는 함수를 말한다. 일종의 루틴이나 동작을 완료하기 위해 외부 함수 내부에서 호출된다.콜백함수의 용도비동기 처리 : 어떤 작업이 완료되었었을 때 후속 처리를 하기 위해 사용된다.const fs = require('node:fs');fs.readFile('/Users/joe/test.txt', 'utf8', (err, data) => { if (err) { console.error(err); return; } console.log(data);});이벤트 핸들러 : 이벤트가 발생했을 때 실행할 함수를 등록할 때 사용된다.// HTML: 클릭하세요const myButton = document.ge..

• format_list_bulleted 위키
• · 2025. 7. 28.

브라우저의 렌더링 과정

HTML 파싱과 DOM 생성브라우저의 요청에 의해 서버가 응답한 HTML 문서는 기본적으로 텍스트이다. 브라우저의 렌더링 엔진은 HTML 텍스트를 파싱하여 DOM(Document Object Model)을 생성한다. DOM이란 브라우저가 문서를 이해할 수 있도록 트리구조로 이루어져 있다.CSS 파싱렌더링 엔진은 HTML을 한 줄씩 순서대로 파싱하며 DOM을 생성한다. 이때 CSS를 로드하는 나 태그가 나오면 DOM 생성을 일시 중지하고 CSSOM을 생성한다.CSSOM에는 CSS의 상속(inheritance) 규칙이 적용된다. 예를 들어, 부모 요소에 적용된 color 속성은 자식 요소에도 동일하게 적용된다.렌더트리 생성DOM과 CSSOM이 모두 만들어지면, 렌더링 엔진은 이 두 가지를 결합하여 렌더 ..

• format_list_bulleted 위키
• · 2025. 7. 21.