JS

Callstack이란?변수의 주소와 값을 저장해두는 공간이다.Heap이란?객체와 배열, 그리고 함수를 저장하는 공간이다.이때 Heap과 Callstack은 서로 분리된 관계는 아니다(여기서부턴 제 생각)조금 있다 언급할 것이지만 JS는 모두 객체로 이루어져 있다는 사실

'use strict' > use strict란? > JS에서 보다 안전된 코딩을 가능하게 한다! 에서 추가된 문법이다 이는 제한된 문법을 사용하게 하는 method이다 기존에 사용하던 을 억제하고 을 적용한다. 이는 일반 JS에서 사용 가능한 이러한 애매한 문

논리 연산자에는 3가지 종류가 있다.or ||and &&not !우선 순위는 not -> and -> or 의 순서이다.논리 연산자 라고 해서 모든 값이 참,거짓만 사용하는 것은 아니다.boolean형 뿐만 아니라 모든 type의 값을 받을 수 있다.결과값 또한 boo

nullish 병합 연산자 >x = (a !== null && a !== undefined) ? a : b; >firstName ?? lastName ?? nickName ?? "익명의 사용자” 둘 다 의미는 비슷하다 하지만 첫 번째는 과거에 사용했고 두 번째는 현

for...in문 추가 정리 >hasOwn() 과 hasOwnProperty()의 차이 우선 hasOwn()과 hasOwnProperty()의 가장 큰 차이는 static method와 instance method라는 점이 있다. 그렇다면 static method와

JS로 스타일을 불러오는 방법엔 두 가지가 존재한다\\${tagName}.style.${property}이를 활용하면 JS만으로 특정 태그나 class에 CSS 속성을 지정할 수 있다우선 콘솔창으로 확인해보자$0은 브라우저에서 가리키는 태그이다 그에 대한 'backgr

...rest일반 함수에서 arguments라는 녀석을 본 기억이 있었다이는 일반 함수에 내장되어 있어서 언제든 자유롭게 사용할 수 있었다하지만 arrow function은 일반 함수와 다르게 이런 arguments라는 녀석이 존재하지 않는다그렇다면 arrow func

key와 value객체의 구조분해 할당에서의 key값은 변수명과 일치해야한다하지만 객체는 배열의 속성과 다르게 순서가 존재하지 않는다 따라서 순서 변경이 가능하다위의 예시처럼 순서가 바뀌어도 각각의 변수에 대한 할당은 유지가 되는 모습이다하지만 변수명을 꼭 바꿔야 할

사용법class는 기본적으로 선언할때 class Name {...} 과 같이 선언한다이는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 method를 정의하는 일종의 틀이다쉽게 말해 class를 정의해 그 안에 객체 생성에 필요한 것들을 정리한다고 생각하면

JS는 기본적으로 함수 지향 언어로 사용할 수 있다그리고 지금 제시한 closure라는 개념은 함수에 적용이 가능하다그렇다면 대체 closure란 무엇을 의미하는 것일까?함수의 특성부터 알아보자함수와 가비지 컬렉터함수는 실행이 되는 순간 변수가 생성되고실행이 끝나는 순

삼각함수숫자형의 계산에 존재하는 sin과 cos을 이용하여 원하는 좌표로 이동이 가능하다와 같은 방식을 이용하여 각도를 조절하거나 반지름을 조절하여 (x,y)를 중심으로 반지름이 radius인 원 위를 지나는 점을 찍을 수 있다이를 연속적으로 실행시킨다면(setInte

BOM이란?BOM는 Browser Object Model의 약자로 문서 이외의 모든 것을 제어 하기 위해 브라우저가 제공하는 추가 객체를 나타낸다대표적으로 navigator와 location이 존재한다navigator 객체는 브라우저의 운영체제에 대한 정보를 제공하고l

DOM노드를 만들기 위해 가장 간단한 방법은createElement('tag')를 사용해 만들 수 있다만약 이때 createTextNode()를 사용했다면 textNode를 생성할 수 있다node.명령어를 입력해 원하는 위치에 삽입하는 것도 가능하다명령어의 종류는 다음

우선 debounce와 throttle에 대해 생각하기 전에 하나 알고 갈 것이 있다만약 비동기(setTimeout)으로 선언된 것은 clearTimeout으로 타이머를 초기화 시킬 수 있다그렇다면 debounce와 throttle은 무엇일까?만약 form태그에 inp

jQuery jQuery의 동작은 일반 JS와 유사하지만 사용법에 대한 극명한 차이가 있다 많은 문법들이 존재하지만 DOM에 접근하여 조작하는 것만 간단히 살펴보겠다 > 기본 설정 jQuery는 라이브러리를 다운받는 대신 script로 기능을 부여할 수 있다 H

우선 비동기의 반대말인 동기는 정상적으로 위에서 아래로 흐르는 순서로 작동하는 것을 의미한다하지만 비동기란 그 흐름에서 약간 벗어나 따로 시간을 가지며 실행되는 것을 의미한다그렇다면 비동기는 왜 필요한가?우선 웹 브라우저의 통신 방식은 기본적으로 동기적인 통신을 한다따

promise와 async전에 배웠던 Promise를 좀 더 깔끔하고 편리한 방식으로 사용 가능하게 해주는 녀석이다참고로 Promise와 아예 다른 흐름으로 작동하는지 물어보면 절대 아니다둘의 도달점과 목표는 같다 하지만 가는 길이 살짝 다를 뿐이다그렇다면 Promis

우선 웹 스토리지가 무슨 역할을 하는지 알고 이를 어떤 방식으로 활용해야하는지 살펴보자예를들어 어떠한 글을 쓰거나, 장바구니에 상품을 저장하는 종류의 행동들은서버에 저장되어 사용자가 해당 페이지를 벗어나도 기록이 유지가 되어야 UX적으로 편리함을 느낄 수 있다이를 구현

웹 컴포넌트란?본인이 원하는 대로 태그의 이름과 스타일을 미리 설정하고이를 바탕으로 편하게 복제를 하며 재사용이 가능하다즉, 컴포넌트의 역할을 수행하는 것이다그렇다면 사용하는 이유는 무엇일까?우선 재사용이 가능하다는 점과 캡슐화를 통해 원하는 속성을 통제할 수 있다는

주의vite의 발음은 바이트가 아니다 비트이다vite는 개발환경과 배포환경을 동시에 구현할 수 있다따라서 분리해서 개발하기에 웹 최적화를 이룰 수 있고, 배포 환경이 편리하다사용하지 않는 파일들은 build과정 중에 tree shaking을 통해 정리하여최적화에 좋은

npm create vite@latest이를 사용해서 vite 프로젝트를 초기에 구성할 수 있다만약 이처럼 사용하게 되면 기존에 package.json파일 내부에 scripts에 작성하던 명령어들이 자동적으로 설정된다참고로 잠시 후 Lit에 대해 알아보기 위해 Lit

자바스크립트자바스크립트는 동적 타입 언어이다그와 동시에 인터프리터 언어이다인터프리터 언어란 코드를 한 줄씩 읽어들이며 해석하고 실행하는 프로그램을 말한다JS는 타입에 제한을 받지 않기에 유연함을 자랑한다하지만 그와 동시에 불안정한 부분도 존재한다따라서 이는 비교적 작은

우선 함수의 전체 타입은 return 값에 의해 결정된다이 경우 숫자형 변수로 받는다는 가정하에 return값은 무조건 숫자형이다따라서 function의 타입은 number가 되는 것이다함수에서 type과 interface를 미리 지정해서 적용하려면 화살표 함수로 작성