여기서 뭘 얻어갈려 하지 마셔요

DOM이란?웹 페이지를 이루는 요소들을 JS가 이용할 수 있게끔, 브라우저가 트리구조로 만든 객체 모델을 의미하며메모리에 웹 페이지 문서 구조를 트리구조로 표현해서, 웹 브라우저가 HTML 페이지를 인식하게 해준다.DOM에서 제공하는 API를 통해 DOM 트리를 조작할 수 있다. * document 는 브라우저에서 제공하는 window 객체의 한 부분 (JS 자체 요소 X) 웹 페이지 빌드 과정 (CRP: Critical Rendering Path)브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있는데웹 브라우저가 HTML 문서를 읽고, 스타일을 입히고 뷰포트에 표시하는 과정이다  CSSOM이란?  CSS Object ModelJS에서 CSS를 조작할 수 있는 A..

Window Oject- 브라우저에 의해 자동으로 생성- 웹 브라우저의 창을 나타낸다- 브라우저의 객체 (JS의 객체 X) - 브라우저의 창에 대한 정보를 알고 제어할 수 있다- var 키워드로 변수/함수를 선언하면 window 객체의 프로퍼티가 된다  let과 const는 블록 스코프이기에window 객체 내부의 블록에서 선언된 것으로 되기에전역 객체의 프로퍼티로 활용될 수 없습니다.var newProp = 'property'var newFunc = () => { return newProp}console.log(window.newProp) // propertyconsole.log(window.newFunc()) // property  // Alertalert('Hello World')// Promptc..

forwhilelet i = 0do { console.log(`Number ${i}`) i++ } while (i  *continue : 현재 루프를 skip *break :  루프 자체를 stop  배열 반복// LOOP THROUGH ARRAYconst items = [1, 2, 3]// FORfor (let i = 0; i   작동 여부for forEachbreak문○Xawait○△  평균적인 속도는 for가 forEach보다 조금 더 빠르지만코드에서 중요한 건, 가독성(readability)이기 때문에 큰 차이가 아니라면목적과 가독성에 맞추어 선택하자

backtick(``)을 사용하여 문자 그대로 표현한 문자열 Fifteen is 15 andnot 20.const a = 5, b = 10// ES5console.log("Fifteen is " + (a+b) + "and\nnot " + (2*a + b) + ".")// ES6console.log(`Fifteen is ${a+b} andnot ${2*a + b}.`) 💡 새롭게 알게 된 점· 문자열 안의 \n으로 C처럼 줄 바꿈이 가능하다· 백틱이 끝나지 않은 문장은 코드상에서 엔터가 실제 줄바꿈으로 출력된다

Math.E = 𝑒 ≈ 2.718자연로그의 밑 값 e Math.PI = 𝜋 ≈ 3.14159원의 둘레와 지름의 비율 Math.random()0 이상 1 미만의 부동소숫점 의사 난수를 반환// 1부터 n 사이의 정수 난수 생성Math.floor(Math.random() * n + 1)Math.ceil(Math.random() * n)// min부터 max 사이의 정수 난수 생성Math.random() * (max - min) + min     [JS/알고리즘] 백준1085. 최솟값 최댓값C++ 로 알고리즘을 처음 배워서 for문으로 구하는 방식만 알고 있었는데 아니 이게 웬 걸 우리 JS에겐 Math 라이브러리가 있었다. 4ms 시간이 단축됐다. Math.min(value1, value2, ...) M..

const ⭐️ (ES6)중복선언 ✕  재할당 ✕constant '상수'never gonna updated∴ default (always)  [JS] const인 array, object 요소 수정 가능한 이유원시자료형 Primitive Values : 변수에 값을 직접 할당 string, number, bigint, boolean, undefined, symbol, null 📦 저장 1) 실제 값은 STACK 메모리에 저장 2) 변수는 STACK 속 데이터의 주소/위치를 바라봄 📑 복사 1)119taeyoung.tistory.com let (ES6)중복선언 ✕  재할당 ⃝will be updated∴ 필요시 (sometimes) - 변수의 scope를 최대한 좁게 하여  var (legacy)중복선..

style에 적합한 도구는 CSSanimation에 적합한 도구는 JS step 1. Find the element.step 2. Listen for an event.step 3. React to that event. (show, hide, change color of sth, ...) const h1 = document.querySelector("div.hello:first-child h1")function handleTitleClick() { // change color const currentColor = h1.style.color // getter let newColor if (currentColor === 'blue') { newColor = 'tomato' ..

console 객체는 브라우저의 디버깅 콘솔(Firefox 웹 콘솔 등)에 접근할 수 있는 메서드를 제공합니다.동작 방식은 브라우저마다 다르지만, 사실상 표준으로 여겨지는 기능도 여럿 있습니다. console 객체는 아무 전역 객체에서나 접근할 수 있습니다. 브라우징 문맥에선 Window, 워커에서는 WorkerGlobalScope(en-U)가 속성으로 포함하고 있습니다.Window.console의 형태로 노출되어 있으므로 간단하게 console로 참조할 수 있습니다. console.log('Hello World')console.log(1998)console.log(true)var obj = { key: 'value' }console.log(obj)console.table(obj)..

// element.style.:propertyName = propertyValueelement.style.setStyle('--variantName', variantValue)element.style.:propertyName 하려고 console에 찍어보니 나오지 않아 당황했다.style의 setStyle 함수를 이용하여 설정해주면 된다. 간단 box { --rotation: 0; transform: rotate(calc(var(--rotation) * 1deg));}const box = document.querySelctor('.box') // 방법1// const box = document.getElementByClassName('box') // 방법2box.styl..

백준 1816, 2503, 14568, 19532 Brute force = 무식한 힘 - 가능한 모든 경우의 수를 때려박고 - 조건에 맞다면 출력! 문제를 만났을 때, 기술과 아이디어를 먼저 찾으려한다면 모르는 기술과 아이디어를 만났을 때는 어떻게 풀 수 있겠는가? 앞으로는 어떤 문제든지 경우의 수가 보인다면 시간과 메모리만 충분히 주어질 때 완전탐색으로 그 문제를 해결할 수 있다. 더보기 완전탐색적 사고를 강요(?)하는 이유 : 근의 공식 문제를 풀어라! 라는 이야기가 나왔을 때, 근의 공식을 수학적으로 정리해서 코드로 쓸 수 있는 사람과 쓸 수 없는 사람이 존재합니다. 수학으로 정리해서 풀 수 없는 사람은 완전탐색적 사고를 먼저 생각해서 풀어내고, 나중에 수학적 지식을 채워나가면 됩니다. 반대로 수학..