본문 바로가기

전체 글82

[면접 질문] function Person(){}, var person = Person(), 그리고 var person = new Person()의 차이점? function Person(name) { this.name = name}var person = Person('John')console.log(person) // undefinedconsole.log(person.name) // Uncaught TypeError: Cannot read property 'name' of undefinedvar person = new Person('John')console.log(person) // Person { name: "John" }console.log(person.name) // "John" function Person(){}: 일반적인 함수 선언var person = Person(): 생성자가 아니라 Person을 함수로 호출, undefined가 반환var p.. 2024. 9. 25.
쓰로틀링(Throttling)과 디바운스(Debouncing)의 차이점 프론트엔드 개발에서는 사용자의 이벤트(스크롤, 입력 등)가 연속적으로 발생할 때, 이를 적절하게 처리하지 않으면 성능 문제로 이어질 수 있다. 이런 상황을 해결하기 위해 `쓰로틀링(Throttling)`과 `디바운스(Debouncing)`가 사용된다. 두 기법 모두 이벤트를 제한하여 성능을 최적화하지만, 동작 방식과 목적은 다르다. 1. 쓰로틀링(Throttling)이란?쓰로틀링은 특정 시간 동안 하나의 이벤트만 실행되도록 제한하는 기법이다. 이벤트가 반복적으로 발생하더라도 지정한 시간 동안 최대 한 번만 실행된다. 즉, 일정한 간격으로 이벤트를 발생시키는 것이다. 사용 사례: - 스크롤 이벤트: 사용자가 페이지를 스크롤할 때마다 이벤트가 계속해서 발생하지만, 이를 실시간으로 처리하면 성능 저하가 발생할.. 2024. 9. 24.
[백준] 24511번: queuestack 파이썬 풀이 https://www.acmicpc.net/problem/24511 큐스택 이 문제는 일단 문제를 이해하는 것 자체가 문제였다.고맙게도 다른 분이 쉽게 그림과 함께 설명해놓은 블로그 글을 보고 이해했다... 문제 설명도현이가 제안한 queuestack은 큐와 스택을 혼합한 자료구조입니다. queuestack은 N개의 자료구조(큐 혹은 스택)가 나열되어 있으며, 각 자료구조에 한 개의 원소가 들어 있다. 이 자료구조의 작동 방식은 간단하다. 새로운 원소를 첫 번째 자료구조에 삽입한 후, 이 자료구조에서 pop하여 나온 값을 두 번째 자료구조에 삽입하는 방식으로 마지막 자료구조까지 연속적으로 이어진다. 마지막 자료구조에서 나온 값을 리턴한다. 수열 C의 원소를 queuestack에 넣은 후, 리턴된 값을 출.. 2024. 9. 23.
리액트에서 `key`에 `index`를 넣으면 안 되는 이유 리액트에서 `key`는 리스트의 각 항목을 고유하게 식별하기 위한 속성이다. 이 `key`는 리액트가 DOM을 효율적으로 업데이트하는 데 중요한 역할을 한다. 하지만 리스트 렌더링 시 `index`를 `key`로 사용하는 것은 권장되지 않는다.  이 글에서 그 이유와 다른 대안을 설명하겠다. `key`의 역할리액트는 컴포넌트 리스트를 렌더링할 때, 각 항목을 추적하기 위해 `key`를 사용한다. `key`는 리액트가 어떤 항목이 변경, 추가, 또는 제거되었는지 식별하는 데 도움을 준다. 만약 `key`가 없거나 적절하지 않다면, 리액트는 변경 사항을 제대로 감지하지 못해 불필요한 렌더링을 하거나 오류가 발생할 수 있다.const items = ['Apple', 'Banana', 'Cherry'];retu.. 2024. 9. 22.

티스토리툴바