js (14) 썸네일형 리스트형 [ JavaScript / TypeScript ] Debounce 함수 구현 Debounce는 일정 시간 동안 이벤트가 발생하지 않았을 때 함수를 호출한다. 예시로window.addEventListener('resize', function(){ console.log('hello');}); 위의 resize 이벤트가 발생할 때마다 "hello"가 콘솔에 찍힌다고 하면 뷰포트의 크기를 조절할 때 엄청 많은 양의 콘솔이 찍히게 된다. resize 이벤트마다 코드를 실행해야 하는 경우가 있겠지만, 그렇지 않은 경우라면 매우 비효율적이다. 꼭 필요한 경우가 아니라면 Debounce를 사용해서 적절하게 함수 호출 횟수를 조절하는 게 좋다. debounce 함수의 주어진 매개변수를 보면 콜백 함수(func), 지연 시간(wait)을 가지고 있다. debounce 함수 내부에서 클로저.. [ JavaScript ] 렉시컬 스코프(Lexical Scope)와 렉시컬 환경(Lexical Environment) 클로저를 공부하는 도중 렉시컬 스코프와 렉시컬 환경은 사전 지식이기 때문에 다시 공부를 하는 겸 정리를 해보려고 한다.렉시컬 스코프다른말로 정적 스코프라고 하며 함수의 스코프를 결정할때 함수가 호출 될 때가아닌 선언이 될때 스코프를 결정한다. 이 렉시컬 스코프를 기반으로 렉시컬 환경의 외부 렉시컬 환경이 결정된다.렉시컬 환경렉시컬 환경에는 두가지 객체가 있다. 환경 레코드와 외부 렉시컬 환경이 있다.환경 레코드 - 코드 실행 전에 지역 번수, 함수, 매개변수 등이 환경 레코드에 선언이 되고 코드가 실행이 될때 변수들의 초기화가 이루어진다외부 렉시컬 환경 - 렉시컬 스코프를 기반으로 함수 선언이 될때 외부 렉시컬 환경이 결정이 된다. 함수가 코드 내에서 선언이 될때 자신이 선언된 위치의 렉시컬 환경을 참조.. [ TypeScript / JavaScript ] DOM 객체 타입 자바스크립트에서 DOM 객체는 각자 다른 타입을 가진다. querySelector : Element (HTMLElement, SVGElement 등)querySelectorAll : NodeListgetElementById : HTMLEelemtgetElementByClassName : HTMLCollectiongetElementByTagName : HTMLCollection Element:모든 DOM 요소를 나타내며, 이는 HTMLElement 또는 SVGElement와 같이 더 구체적인 요소 타입으로 좁혀질 수 있다. Element는 기본적인 DOM 메소드를 포함하고 있어, 속성 접근이나 자식 요소 관리 등이 가능하다.NodeList:querySelectorAll 메소드로 반환되며, 노드의 집합을 나.. [ JavaScript / NextJS / React ] 랜덤으로 움직이는 별들을 만들어보자 별들을 담을 컨테이너를 우선 만들어줘야 한다 ... ... 그러고 나서 해당 컨테이너에 원하는 만큼 별을 찍고useEffect(() => { const makeStars = () => { const starContainer = starRef.current; if (starContainer) { starContainer.innerHTML = ""; for (let i = 0; i 여기서 만약 브라우저의 크기가 변경될 때마다 새로 별들을 찍으려면useEffect Hook 맨 밑에 아래의 코드를 넣으면 브라우저의 크기가 줄거나 늘어나면 새로 별들의 위치를 계산해서 찍을 수 있다. .. [ JavaScript ] Prototype은 뭘까? JavaScript의 프로토타입이 무엇인지 궁금해서 MDN 사이트에 정리된 내용을 조금 더 간추려서 정리를 해보아야겠다. 프로토타입 기반 언어? JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다.— 모든 객체들이 메서드와 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또다시 상위 프로토타입 객체로부터 메서드와 속성을 상속받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메서드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다. 정확히 말하자면 상속되는 속성과 메서드들은 각 객체.. [JS / JavaScript] 전연 객체란 무엇일까? 전역 객체는 코드 실행이 되기전에 어떠한 객체보다 가장 먼저 생성이 되는 객체이다. 어떠 객체에도 속하지 않는 최상위 객체이다. 전역 객체의 이름은 브라우저, node.js 제각각이다. 브라우저 환경에서는 window, node.js 환경에서는 global이 전역 객체를 가르킨다. 하지만 ES11에서 도입된 globalThis를 사용하면 환경에 제약받지 않고 전역 객체를 가르킬 수 있다. console.log(globalThis); {/* Object [global] { global: [Circular *1], clearImmediate: [Function: clearImmediate], setImmediate: [Function: setImmediate] { [Symbol(nodejs.util.prom.. [JS / JavaScript] var, let, const 의 차이 일단 차이를 정확하게 이해하기 전에 실행 컨텍스트에 대해서 알아야 한다 실행 컨텍스트는 두가지 주요 단계로 나누어지는데 코드 평가 단계 코드 실행 단계 이렇게 총 두 단계로 구분된다 코드 평가 단계는 코드를 실행하기 앞서 Lexical Environment 에 변수 및 함수 선언 등이 바인딩되고 스코프에 등록이 된다. 이 단계에서 호이스팅이 발생한다. 코드 실행 단계는 코드 평가 단계에서 준비한 과정을 실행한다. 여기서 필요는 없지만 코드 실행 단계에서 실행 컨텍스트 스택이란게 있는데 코드를 실행하면서 현재 실행되고 있는 함수를 실행 컨텍스트 스택에 PUSH 하고 함수가 종료되면 POP 하는 방식으로 이루어져 있다 var console.log(x); // undefined var x = 3; var 키워.. [ JavaScript / JS ] WebSocket 연결하고 실시간 채팅 구현하기 지금 Pong게임을 할 수 있는 팀프로젝트를 진행을 하고 있는데 https://www.ponggame.org/ Pong Game Welcome to PongGame.org, In this site, you can find many free versions of the game, one of the first video games ever created. In the game below, use the mouse or keyboard to control the paddle, Press P to pause the game, or ESC to go back to the main menu www.ponggame.org 프로젝트에서 내 첫번째 역할은 실시간 채팅이 가능하도록 채팅 기능을 만드것이다. 실시간 채팅을.. 이전 1 2 다음
