doongeon의 stack 공유

웹 브라우저 환경에서 document.querySelector 메서드를 제공한다 이 메서드를 활용하여 Element를 찾을 수 있다. querySelector의 경우 문서내의 첫번째 Element를 반환하고querySelectorAll의 경우 NodeList를 반환한다.NodeList는 Array가 아니여서 Array.from()과 함께 쓰인다. 원하는 Element를 얻기 위해 선택자를 알아보자  태그(Tag)로 찾기예: document.querySelector('div')문서에서 첫 번째 태그를 반환합니다.모든 를 가져오려면 querySelectorAll을 사용합니다:document.querySelectorAll('div')클래스(Class)로 찾기클래스는 . 으로 표시예: document.quer..

JavaScript 2025. 1. 6. 20:02

자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해 줍니다.// 메서드 만들기let user = { name: "John", age: 30};user.sayHi = function() { alert("안녕하세요!");};// 함수 선언function sayHi() { alert("안녕하세요!");};// 선언된 함수를 메서드로 등록user.sayHi = sayHi;// 객체 리터럴 안에서 메서드 선언 user = { sayHi: function() { alert("Hello"); }};// 단축 구문user = { sayHi() { // "sayHi: function()"과 동일합니다. alert("Hello"); }}; 일반적인 방법과 단축 ..

JavaScript 2024. 12. 30. 20:11

비교하려는 값의 자료형이 다르면 자바스크립트는 이 값들을 숫자형으로 바꿉니다. (아주 중요!)'2' > 1 // true, 문자열 '2'가 숫자 2로 변환된 후 비교가 진행됩니다.'01' == 1 // true, 문자열 '01'이 숫자 1로 변환된 후 비교가 진행됩니다. Boolean의 경우 true는 1, false는 0으로 변환된 후 비교가 이뤄집니다.true == 1 // truefalse == 0 // true 숫자로 바꿔 비교하기 때문에 흥미로운 상황let a = 0;Boolean(a) // falselet b = "0";Boolean(b) // truea == b // true Strict Equality Operator ===동등 연산자(equality operator) ==은 0과 fals..

JavaScript 2024. 12. 16. 16:51

자바스크립트에는 8개의 기본 형이 있다.numberBIGIntstringbooleannullundefinedobject (not primitive)symbol 숫자형으로 변환숫자형으로의 변환은 수학과 관련된 함수와 표현식에서 자동으로 일어난다.이항 연산자 +를 사용할 때는 피연산자 중 하나가 문자열이면 다른 하나도 문자열로 변환된다는 점에 주의단항 연산자 -,+를 사용하는 경우 숫자로 형변환"6" / "2" // 3"6" * "2" // 12"6" - "2" // 4"6" + "2" // "62" 문자열 concat+"1" // 1-"1" // -1+"" // 01 + 4 + "px" // "5px" Number(value) 함수를 사용하면 주어진 값(value)을 숫자형으로 명시해서 변환할 수 있다. ..

JavaScript 2024. 12. 16. 15:51

99년생인 나는 뒤통수 컴퓨터, 볼마우스 시절 컴퓨터에 입문했다.어릴 때는 집에 있는 컴퓨터의 사양 이슈로 친구들이 하는 온라인 게임을 나는 할 수 없었다.친구 집에 가서 메이플이나 피파2 그리고 당시 유행하던 온라인 게임을 했었는데ㅎㅎ대신에 플래시 게임을 많이 했는데 그때는 플래시 게임이 참 많이 있었다. 어릴 시절 기억 때문일까 자바스크립트에 익숙해지면서 이걸로 게임을 만들 수 있겠다는 생각이 들었다.구글에서 찾아보니 MDN에서 제공하는 자바스크립트 게임 튜토리얼이 있었다. 로 렌더되는 순수하게 JavaScript로만 쓰여진 간단한 MDN 벽돌깨기 게임을 만들 것입니다." data-og-host="developer.mozilla.org" data-og-source-url="https://develop..

JavaScript 2024. 8. 24. 11:18

js로 테트리스를 만들던 중 흥미로운 에러가 있었다.문제export default class Controller { service: Service; constructor(service: Service) { this.service = service; document.addEventListener("keydown", this.handleKeyDown); } private handleKeyDown(event: KeyboardEvent) { switch (event.key) { case "ArrowLeft": event.preventDefault(); this.service.mov..

JavaScript 2024. 7. 11. 14:27

예전에 javascript를 이용해 간단한 게임을 만들면서 콜백함수를 떠올린 기억이 있다.callback?프로그래밍에서 콜백(callback) 또는 콜백 함수(callback function)는 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있다. 위 설명은 위키피디아에서 발췌해 왔다.정말 좋은 설명이라 생각한다. "다른 코드의 인수로서 넘겨주는 실행 가능한 코드""즉시 실행할 수도 있고, 나중에 실행할 수도 있다."나의 문제html canvas 태그를 이용해 벽돌 깨기 게임을 만들고 있었다.js의 setInterval() 함수로 무한 루프를 만들었다.게임이 끝난 시점에 특정 컴포넌트의 텍스트를..

JavaScript 2024. 7. 11. 12:00

문제개인 블로그에 js로 만든 게임을 넣으려고 작업중이었다.벽돌깨기 게임을 제작했고 리팩토링중에 궁금한게 생겼다.private detectBrickCollision() { let collision = false; for (let i = 0; i  혹시 forEach가 더 빠를까? 탐구const array = Array.from({ length: 1000 }, () => Array.from({ length: 1000 }, () => Math.random()));// Benchmarking for loopconsole.time('for loop');for (let i = 0; i { row.forEach(element => { const el = element; });});console..

JavaScript 2024. 6. 20. 16:20