이벤트의 종류 UI Event load 웹페이지의 로드가 완료되었을 때 unload 웹페이지가 언로드될 때(주로 새로운 페이지를 요청한 경우) error 브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우 resize 브라우저 창의 크기를 조절했을 때 scroll 사용자가 페이지를 위아래로 스크롤할 때 select 텍스트를 선택했을 때 Keyboard Event keydown 키를 누르고 있을 때 keyup 누르고 있던 키를 뗄 때 keypress 키를 누르고 뗐을 때 Mouse Event click 마우스 버튼을 클릭했을 때 dbclick 마우스 버튼을 더블 클릭했을 때 mousedown 마우스 버튼을 누르고 있을 때 mouseup 누르고 있던 마우스 버튼을 뗄 때 mousemov..
웹팩(Webpack) 웹팩은 자바스크립트 어플리케이션을 위한 정적 모듈 번들러를 말한다. 번들링이란 기능별로 나뉘어 있는 여러 파일을 하나로 합치는 것을 의미한다. 웹팩은 나뉘어 있는 파일들을 하나로 묶어 한번에 다운받을 수 있도록 해줌으로써 웹 애플리케이션의 빠른 로딩을 가능하게 한다. 웹팩의 네 가지 속성 Entry 속성은 웹팩을 실행할 대상 파일. 진입점 Output 속성은 웹팩의 결과물에 대한 정보를 입력하는 속성. 일반적으로 filename과 path를 정의 Loader 속성은 CSS, 이미지와 같은 비 자바스크립트 파일을 웹팩이 인식할 수 있게 추가하는 속성. 로더는 오른쪽에서 왼쪽 순으로 적용 Plugin 속성은 웹팩으로 변환한 파일에 추가적인 기능을 더하고 싶을 때 사용하는 속성. 웹팩 변..
요즘 서버로부터 데이터를 받아오거나 보내서 작업하는 일이 점점 더 많아지면서 HTTP 요청 코드를 자주 짜게 된다. 앞으로 HTTP 요청은 눈 감고도 할 수 있을 만큼이 되어야 할 테니 복습 차원에서 HTTP 요청을 위한 fetch와 Axios에 대해 간단히 정리해 보도록 하자. Fetch와 Axios Fetch와 Axios는 모두 프로미스 기반의 HTTP 클라이언트다. 즉, 이 방식들을 이용해서 네트워크 요청을 하면 이행 또는 거부 상태를 가지는 프로미스가 반환된다. 데이터 요청하기 Fetch는 두 개의 인자를 받는다. 첫번째 인자는 리소스의 url이고, 두번째 인자는 요청의 설정 옵션이다. 두번째 인자는 생략 가능하다. fetch(url, { method: "GET", //(POST, PUT, DEL..
1. 비동기 프로그래밍 동기 냐 비동기냐 하는 구분은 두 개 이상의 작업의 처리 방식에 따라 나누는 구분 방식이다. 즉, 호출한 함수가 있고 호출되는 함수가 있을 때 이 두 가지를 어떻게 처리할 것이냐 하는 것인데, 동기 처리 방식을 따르면 호출된 함수의 수행 결과를 호출한 함수에서 동시에 계속 신경 쓰고 있다. 비동기 처리 방식에서는 호출된 함수의 수행 결과를 호출된 함수 혼자 신경 쓰고 처리한다. 따라서 비동기 프로그래밍 방식은 호출된 함수의 실행 및 완료와 별개로 다른 태스크를 계속 수행할 수 있다. 2. 비동기 프로그래밍의 필요성 비동기 프로그래밍을 하면 한 작업이 완료되기를 기다리지 않고도 다른 작업을 수행할 수 있다. 서버에서 사용자 정보를 받아오거나 동영상을 로드하는 등 오래 걸리는 작업을 ..
지난 포스팅에서 이어집니다. [Javascript] 클래스와 객체지향 프로그래밍 1. 객체 공장 만들기 청소부들의 정보가 담겨 있는 객체를 만들어 데이터를 관리한다고 생각해 보자. 두 명의 청소부가 있을 때 다음과 같이 객체를 만들 수 있을 것이다. let cleaner1 = { name: 'Jin', d sulki.tistory.com 지난 포스팅에서 다음과 같이 클래스 Cleaner와 그 클래스를 상속받는 서브클래스 CleanerPlus를 생성했다. class Cleaner { constructor(name, department) { this.name = name; this.department = department; } clean() { return `${this.name} has cleaned t..
1. 객체 공장 만들기 청소부들의 정보가 담겨 있는 객체를 만들어 데이터를 관리한다고 생각해 보자. 두 명의 청소부가 있을 때 다음과 같이 객체를 만들 수 있을 것이다. let cleaner1 = { name: 'Jin', department: 'lobby', clean: function() { return `Jin has cleaned the lobby.` } } let cleaner2 = { name: 'Kim', department: 'bedroom', clean: function() { return `Kim has cleaned the bedroom.` } } 그렇지만 청소부가 수십 명, 수백 명이 된다면 어떨까? 담아야 할 정보의 개수(프로퍼티의 개수)가 수십개로 늘어난다면 어떨까? 매번 객체들..
함수들을 입력받아 입력받은 함수들을 연달아 결합하는 함수 'pipe'를 만들어 보자. //출력 예시 function square(num) { return num * num; } function add5(num) { return num + 5; } function mul3(num) { return num * 3; } function isOdd(num) { return num % 2 !== 0; } let output = pipe(add5, square); console.log(output(4)); // --> 81 output = pipe(square, add5, mul3); console.log(output(4)); // --> 63 output = pipe(square, mul3, add5, add5,..
1. DOM(Document Object Model) 2. CRUD(Create-Read-Update-Delete) Create: 요소 추가하기 Append: 요소를 부모와 연결하기 Read: 요소를 조회하기 Update: 요소를 갱신하기 Delete: 요소를 삭제하기 1. DOM(Document Object Model) DOM은 html 요소를 객체(object)처럼 조작할 수 있는 모델이다. HTML은 한번 작성되면 페이지를 옮겨 가지 않는 한 바뀌지 않지만, DOM을 이용하면 사용자의 행동에 따라 html 요소를 동적으로 조작할 수 있게 된다. 2. CRUD(Create-Read-Update-Delete) DOM을 이용할 때 가장 기본이 되는 것은 html 엘리먼트를 만들고, 조회하고, 갱신하고, ..
