별들을 담을 컨테이너를 우선 만들어줘야 한다 ... ... 그러고 나서 해당 컨테이너에 원하는 만큼 별을 찍고useEffect(() => { const makeStars = () => { const starContainer = starRef.current; if (starContainer) { starContainer.innerHTML = ""; for (let i = 0; i  여기서 만약 브라우저의 크기가 변경될 때마다 새로 별들을 찍으려면useEffect Hook 맨 밑에 아래의 코드를 넣으면 브라우저의 크기가 줄거나 늘어나면 새로 별들의 위치를 계산해서 찍을 수 있다. ..

JavaScript의 프로토타입이 무엇인지 궁금해서 MDN 사이트에 정리된 내용을 조금 더 간추려서 정리를 해보아야겠다. 프로토타입 기반 언어? JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다.— 모든 객체들이 메서드와 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또다시 상위 프로토타입 객체로부터 메서드와 속성을 상속받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메서드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다. 정확히 말하자면 상속되는 속성과 메서드들은 각 객체..

전역 객체는 코드 실행이 되기전에 어떠한 객체보다 가장 먼저 생성이 되는 객체이다. 어떠 객체에도 속하지 않는 최상위 객체이다. 전역 객체의 이름은 브라우저, 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..

일단 차이를 정확하게 이해하기 전에 실행 컨텍스트에 대해서 알아야 한다 실행 컨텍스트는 두가지 주요 단계로 나누어지는데 코드 평가 단계 코드 실행 단계 이렇게 총 두 단계로 구분된다 코드 평가 단계는 코드를 실행하기 앞서 Lexical Environment 에 변수 및 함수 선언 등이 바인딩되고 스코프에 등록이 된다. 이 단계에서 호이스팅이 발생한다. 코드 실행 단계는 코드 평가 단계에서 준비한 과정을 실행한다. 여기서 필요는 없지만 코드 실행 단계에서 실행 컨텍스트 스택이란게 있는데 코드를 실행하면서 현재 실행되고 있는 함수를 실행 컨텍스트 스택에 PUSH 하고 함수가 종료되면 POP 하는 방식으로 이루어져 있다 var console.log(x); // undefined var x = 3; var 키워..

지금 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 프로젝트에서 내 첫번째 역할은 실시간 채팅이 가능하도록 채팅 기능을 만드것이다. 실시간 채팅을..

이벤트 핸들링에서 event.target과 event.currentTarget은 서로 다른 요소를 참조할 수 있다. 이 둘의 주요 차이점은 이벤트가 실제로 발생한 요소(event.target)와 이벤트 리스너가 등록된 요소(event.currentTarget)를 가리킨다는 것 event.target event.target은 이벤트가 실제로 발생한(구체적인) 요소를 가리킵니다. 이벤트 버블링이나 캡처링 과정에서도 event.target은 변하지 않습니다. 사용자가 클릭하거나 상호작용하는 실제 요소를 나타냅니다. event.currentTarget event.currentTarget은 이벤트 핸들러(리스너)가 등록된 요소를 가리킵니다. 이벤트 버블링이나 캡처링 과정에서 event.currentTarget은 ..

function updateHeaderText() { const header = document.querySelector('h1'); header.textContent = '새로운 제목'; } 위의 js 코드는 updateHeaderText함수가 실행이 될 때마다 DOM tree에서 해당 요소를 찾는다. 그렇게 되면 매우 빈번하게 함수가 호출이 되고 성능에 영향이 있을 수 있다. const header = document.querySelector('h1'); // DOM 요소 캐싱 function updateHeaderText() { header.textContent = '새로운 제목'; // 캐싱된 요소 사용 } 사용자와 상호작용 되는 DOM이 아니라면 자주 사용되는 DOM은 전역으로 둬서 스크립트가 ..

splice()는 원본에서 요소를 바로 제거하고 제거된 배열은 리턴해줌 slice()는 원본을 변경하지 않고 복사된 배열을 리턴 splice arr.splice(start, deleteCount) start: 시작 IDX deleteCount: 삭제할 요소의 개수 (deleteCount를 주지 않으면 start IDX부터 전부 삭제) let arr = [1, 2, 3, 4, 5]; let newArr = arr.splice(0, 2); //IDX 0부터 2개 요소 제거 console.log(arr, newArr); //제거된 값은 리턴해줌 // arr = : [ 3, 4, 5 ] // newArr : [ 1, 2 ] arr.splice(start) let arr = [1, 2, 3, 4, 5]; let ..