Language/Javascript

[javascript 자바스크립트] 이벤트 리스너 란?

리액트를 복습하면서 이벤트 리스너에 대해서 다시 한번 정리해보려고 한다. 이벤트 리스너를 정리하기 전에 이벤트에 대해서 먼저 정리해보려고 한다. 동적인 웹 애플리케이션 구현을 위해서는 다양한 이벤트에 맞춰서 데이터를 핸들링해야 한다. 그러면 이벤트란 무엇일까? 어떤 사건을 의미한다. ex) 특정 버튼을 클릭했을 때, DOM이 다 로드되었을 때 - 브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시 알려 줄 수 있으며 이를 통해 사용자와 웹페이지가 상호 작용이 가능하다. - 이벤트 핸들러를 통하여 이벤트가 발생 시 원하는 함수에 연결하여 실행시킬 수 있다. DOM에서 특정 이벤트가 발생되면 우리는 자바스크립트 이벤트 객체에서 이를 확인할 수 있다. 그럼 이벤트 리스너란? 이벤트 리스너는 말 그대로 해당 ..

2021.07.27 게시됨

Language/Javascript

[javascript 자바스크립트] 모듈(Module) 란?

모듈(Module)이란? 모듈이란 특정한 기능을 하는 함수나 변수들의 집합이다. 예를 들면 수학에 관련된 코드들만 모아서 수학 모듈을 만들어서 수학에 관련된 기능이 필요할 때 꺼내서 사용할 수 있다. 모듈은 자체만으로도 하나의 프로그램이면서 다른 프로그램의 부품으로 사용할 수 있다. 즉, 모듈로 만들어놓으면 여러 프로그램에서 해당 모듈을 재사용할 수 있다. 보통 파일 하나가 모듈 하나가 된다. 파일별로 모드를 모듈화 할 수 있어서 관리하게 편하다. 그러면 아래 예시를 보면서 이해해보자. 같은 폴더에 var.js , func.js , index.js 가 있다고 가정하자. //var.js const odd = "홀수"; const even = "짝수"; module.exports = { odd,even };..

2021.07.23 게시됨

Language/Javascript

[javascript 자바스크립트] async/await 란?

저번 게시물에서는 자바스크립트 난제였던 콜백 지옥을 해결한 프로미스(Promise)에 대해서 알아보았다. 이번 시간에는 자바스크립트의 비동기 처리과정에서 사용되는 async/await 기능에 대해서 알아보려고 한다. async / await 란? 먼저 async / await 란 비동기 처리 패턴 중 하나이다. 비동기 처리 패턴 중에서 프로미스가 콜백 지옥을 해결했다지만 여전히 코드가 길어서 읽기 좋은 코드라고 할 수는 없다. then과 catch가 계속 반복되기 때문이다. async / await 문법은 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 프로미스를 사용한 코드를 한 번 더 깔끔하게 줄일 수 있다. async / await 기본 문법 async function 함수명() ..

2021.07.22 게시됨

Language/Javascript

[javascript 자바스크립트] Promise 프로미스 란?

이번 시간에는 '프로미스 객체'에 대해서 알아보려고 한다. 프로미스 객체란 무엇일까? 자바스크립트와 노드에서는 주로 비동기를 접한다. 프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미한다 비동기 처리 시 이벤트 리스너를 이용할 때 콜백 함수를 자주 사용한다. ES2015부터는 자바스크립트와 노드의 API들이 콜백 대신 프로미스(Promise) 기반으로 재구성되어 우리가 흔히 말하는 '콜백 지옥' 현상을 극복했다고 한다. 프로미스를 쉽게 설명하자면 실행은 바로 하되, 결괏값은 나중에 받는 객체라고 할 수 있다. 프로미스를 사용하기 위해서는 먼저 프로미스 객체를..

2021.07.21 게시됨