프로그래밍 언어/JavaScript
자바스크립트 자주 쓰는 메서드 정리
이번에는 일 할 때 자주 쓰던 메서드들을 정리해봤습니다. Notion Export 기능이 안먹혀서 일단 링크로 대신 올립니다. 자바스크립트 자주 쓰는 메서드 정리
프로그래밍 언어/JavaScript
프로그래밍 언어/JavaScript
[자바스크립트 필기] #24 - 비동기 프로그래밍이란?
*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 1. 동기 처리와 비동기 처리 함수를 실행할 때 보통 실행 컨텍스트 스택에 올라가고 함수 코드들이 실행된다. 그리고 함수가 끝나고 나서 이 스택에 올라간 함수가 팝되어 제거된다. 이 처럼 실행 컨텍스트 스택에 함수 실행 컨텍스트가 푸시되는 것은 함수 실행의 시작을 알리는 것이다. 그래서 함수의 실행 순서는 스택을 통해 관리되는데 문제는 이 스택이 하나밖에 없어서 2개 이상의 함수를 동시에 실행할 수 없다. 무조건 실행 컨텍스트 스택에 실행중인 함수가 끝나야 다음 함수가 실행될 수 있다. 자바스크립트 엔진은 이 처럼 한 번에 하나의 테스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. 그래서 처리에 시간이 걸리는 태스크를 실행한다면 다음에 실행시..
프로그래밍 언어/JavaScript
[자바스크립트 필기] #23 - 타이머
*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 1. 호출 스케줄링 일정시간이 지나고 나서 함수가 호출되도록 하려면 타이머 함수를 사용해야한다. 이를 호출 스케줄링이라 한다. 자바스크립트에서는 타이머를 생성할 수 있는 setTimeout과 setInterval, 타이머를 제거할 수 있는 clearTimeout과 clearInterval을 제공한다. 여기서 setTimeout과 setInterval은 비동기 처리방식으로 동작한다. 2. 타이머 함수 setTimeout / clearTimeout setTimeout 함수는 ms단위로 받은 두번째 인수의 시간으로 첫번째 함수를 단 한번 실행하는 타이머를 생성한다. 첫 번째 매개변수 : 타이머가 만료된 뒤 호출될 콜백 함수 두 번째 매개변수 : 타이머 ..
프로그래밍 언어/JavaScript
[자바스크립트 필기] #22 - 이벤트
*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 1. 이벤트 드리븐 프로그래밍 브라우저는 처리해야할 특정 사건(클릭, 스크롤 등)이 발생했을 때 이를 감지해 이벤트를 발생시킨다. 이러한 이벤트에 대응해서 호출하고 싶은 함수가 있을 것이다. 이런 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라고 한다. 그리고 브라우저에게 이벤트 핸들러가 호출될 수 있게 하는것을 이벤트 핸들러 등록이라고 한다. Click me! 위에서 보았듯이, 이벤트 핸들러 프로퍼티에 함수를 할당하면 해당 이벤트가 발생했을 때 할당한 함수가 호출된다. 이와 같이 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍이라 한다. 2. 이벤트 타입 이벤트 타입은 이벤트의 종류를 나타내는 문자열이다...
프로그래밍 언어/JavaScript
[자바스크립트 필기] #21 - DOM이란?
*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 프로퍼티와 메서드들은 제공하는 API이다. 1. 노드란 HTML요소는 HTML 문서를 구성하는 개별적인 요소를 말한다. 이 HTML 요소가 엔진에 의해 DOM을 구성하는 노드 객체로 변환된다. 이때 HTML 요소 간의 부자 관계를 반영해 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성한다. 이렇게 노드 객체들로 구성된 트리 자료구조를 DOM이라 한다. 이렇게해서 노드 타입에 따라 필요한 기능을 모은 DOM api가 있고 이 DOM api를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있다. 2. 요소 노드 얻기 우선 HTML의 구조나 내용, 스타일을 조..
프로그래밍 언어/JavaScript
[자바스크립트 필기] #20 - 디스트럭처링 할당
*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 디스트럭처링 할당은 배열이나 이터러블 객체등을 비구조화해서 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 간단히 말해서 배열의 요소나 객체의 프로퍼티 값같은걸 다른 변수에 저장하는 것이다. 1. 배열 디스트럭처링 할당 const arr = [1, 2, 3]; // ES5 var one = arr[0]; var two = arr[1]; var three = arr[2]; console.log(one, two, three); // 1 2 3 // ES6 배열 디스트럭처링 할당 const [one, two, three] = arr; console.log(one, two, three); // 1 2 3 ES6의 배열 디스트럭처링 할당은 배열의 각 ..
프로그래밍 언어/JavaScript
[자바스크립트 필기] #19 - 스프레드 문법
*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 스프레드 문법, ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. *이터러블 한정으로만 쓸 수 있다. console.log(...[1, 2, 3]); // [1, 2, 3] -> 1, 2, 3 console.log(...'Hello'); // H e l l o console.log(...{ a: 1, b: 2}); // 일반 객체는 스프레드 문법의 대상이 될 수 없다. 이 예제처럼 ...[1, 2, 3]은 개별적인 값들의 목록 1 2 3으로 만든다. 즉, 스프레드 문법의 결과는 값이 아니다. 그래서 이 문법은 다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다. 함수 호출문의 인수 목록..
프로그래밍 언어/JavaScript
[자바스크립트 필기] #18 - 이터러블
*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 1. 이터레이션 프로토콜 ES6에서 순회가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일해 for ... of, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 했다. 이러한 이터레이션 프로토콜은 두 가지로 나뉜다. 이터러블 프로토콜 : 이터러블 프로토콜을 준수한 객체를 이터러블이라고 한다. 이터레이터 프로토콜 : 이터레이터 프로토콜을 준수한 객체를 이터레이터라 한다. 이터레이터는 이터러블의 요소를 탐색하기 위한 포인터 역할을 한다. 이터러블 이터러블 프로토콜을 준수한 객체를 이터러블이라고 한다. 즉, Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은..
