Programming/Javascript

[Javascript] 이벤트 루프 동작과정에 대한 이해

이벤트 루프(Event Loop) 이벤트 루프란 자바스크립트 엔진이 아닌, 구동하는 환경(브라우저, 노드)에서 가지고 있는 장치이다. Call Stack과 Callback Queue를 감시하며, Call Stack이 비어있을 경우 Callback Queue에 담긴 콜백함수를 Call Stack에 넣어 실행시키는 역할을 한다. 아래 예시를 보자. console.log('시작'); setTimeout(function() { console.log('중간'); }, 0); Promise.resolve() .then(function() { console.log('프로미스'); } ); console.log('끝'); 위의 코드의 호출 순서는 어떻게 될까? '시작' -> '끝' -> '프로미스' -> '중간' 이유..

fetch API를 사용하여 코드 라인 수를 줄여보자

fetch API ajax를 사용하는 여러 가지 방법 ajax를 사용하는 방법은 여러 가지가 있습니다. XMLHttpRequest 객체 fetch api jQuery axios 라이브러리 이번 포스팅에서는 1, 2번을 비교해보면서 fetch api의 장점을 알아보겠습니다. XMLHttpRequest 첫 번째로 가장 고전적인으로 사용하는 방식입니다. onreadystatechange을 사용했습니다. let xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState === 4 && xhr.status === 200) { let response = JSON.parse(xhr.response); console.log(respon..

[Javascript] ES6 async & await

안녕하세요. 이번 포스팅은 간단한 게임을 만들어보면서 async, await 개념을 알아보겠습니다. up & down 게임을 아시나요? 술자리에서 많이 했던 게임인데 수의 범위(1~100)을 정하고 주어진 기회 안에 수를 맞추는 게임이죠. 이 게임을 통해 async, await을 알아볼게요. 게임 조건은 다음과 같습니다. 1. 1 ~ 100까지의 수 중에서 랜덤으로 값을 뽑습니다. 2. 사용자는 10번의 기회가 주어지고 수를 입력합니다. 기회는 원하는대로 줘도 됩니다. 3. 사용자가 입력한 수보다 랜덤 값이 크면 'up'을 사용자에게 알려주고 반대면 'down'을 알려줍니다. 4. 10번의 기회를 모두 소진하거나 정답을 맞출 시 게임은 종료됩니다. 우선 1번의 게임 조건을 만족시키기 위해 1 ~ 100까..

[Javascript] ES6 export, import

안녕하세요. 이번 포스팅은 export, import에 대해 알아보겠습니다. ES6에서는 export, import를 사용하여 자바스크립트가 모듈화를 할 수 있는 기능을 제공합니다. export는 두 가지 방법이 있다. export default, (named)export 우선 export 예제를 보겠습니다. // module1.js export default function test() { console.log('module1 test'); } export function test1() { console.log('module1 test1'); } export function test2() { console.log('module1 test2'); } 이것을 아래와 같이 사용할 수도 있습니다. // mod..

[Javascript] ES6 Promise를 통해 콜백지옥 문제를 해결해보자

Promise(프로미스)는 ES5까지 비동기로 호출하는 과정에서 생기는 콜백지옥 문제를 해결하기 위해 등장한 ES6 문법입니다. 우선 ES6가 등장하기 전에는 어떠한 복잡성이 있었는지 확인해보겠습니다. // 비동기식 getNotice 요청 function getNotice(id, callback) { console.log('비동기식 get 요청이 이루어졌습니다.'); // 3초 후 다음로직을 실행함 setTimeout(function() { let notice = {id: 1, title: "title 1", content: "hehe"}; callback(notice); }, 3000); } let notice = getNotice(2, function(notice) { console.log(notic..

[Javascript] ES6 Destructuring 문법에 대해 알아보자

안녕하세요. 이번 포스팅에서는 ES6 문법의 Destructuring에 대해 알아보겠습니다. Destructuring은 '구조 분해'라고 하는데 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 ES6 문법입니다. Destructuring은 Array(배열) Destructuring, Object(객체) Destructuring으로 나누어져있습니다. 하나씩 자세하게 알아보겠습니다. Array Destructuring 중첩되지 않은 배열인 경우 다음과 같은 배열 중첩되지 않은 배열이 있습니다. let kors = [10, 20, 30]; kors 배열의 각 원소들이 각 변수에 담기고 싶다면 인덱스를 통해 접근이 가능했습니다. let kors = [10, 20, 30]; let kor..

[Javascript] 이벤트 트리거를 사용하여 input 속성을 커스터마이징 해보자!

이번 포스팅은 이벤트 트리거를 사용하여 input 속성을 커스터마이징 해보겠습니다. html에서 input 속성을 그대로 사용하면 아래와 같습니다. css로 꾸미려고 하면 다음과 같이 됩니다. 파일 선택만 남기고 깔끔하게 디자인을 할 수 있는 방법이 없을까요? 자바스크립트에서 제공하는 이벤트 트리거라는 기능을 사용하면 깔끔하게 디자인이 가능합니다. 이벤트 트리거 트리거는 '방아쇠'를 의미합니다. 방아쇠를 당기면 총알이 나가는 것처럼 어떠한 행위(클릭 등)를 했을 때 파일을 선택할 수 있도록 할 수 있습니다. span 태그를 하나 생성해서 span 태그를 눌렀을 때 위의 input을 실행시켜보겠습니다. 우선 하나의 div태그에 input, span을 같이 넣어두겠습니다. 파일선택 이 상태라면 파일 선택이 ..

[JavaScript] 이벤트 버블링과 이벤트 캡쳐링을 알아보자

자바스크립트에서 이벤트를 전달하는 방식은 버블링, 캡쳐, 위임 방식이 있습니다. 이번 포스팅에서는 이벤트 버블링, 캡쳐링에 대해 알아보겠습니다. 이벤트 버블링 버블링은 거품이 커져가는 뉘앙스가 담겨 있습니다. 거품이 위로 많아지는 경우를 생각하면 이해하기 쉽습니다. 이벤트 버블링은 어떤 요소에 대해 이벤트가 발생했을 때, 해당 요소의 최상위 부모까지 이벤트가 전달되어지는 과정을 의미합니다. 예시를 하나 들어보겠습니다. 노란색은 son, 파란색은 parent, 빨간색은 grand-parent 부분입니다. 그리고 다음과 같은 js 소스코드가 있습니다. var grandParent = document.querySelector('.grand-parent'); var parent = document.querySe..

[Javascript] AJAX를 통해 새로고침 없이 데이터를 불러오기

안녕하세요. 이번 포스팅에서는 AJAX에 대해 알아보겠습니다. AJAX(Asynchronous Javascript And Xml)는 클라이언트와 서버간의 데이터를 비동기 방식으로 주고 받는 기술을 의미합니다. AJAX는 데이터를 딱 필요한 부분만 별도로 요청하여 응답을 받아 처리하기 때문에 사용자가 대기하는 시간을 줄일 수 있다는 장점이 있습니다. 이것이 가능한 이유는 기존의 데이터를 처리하는 방식인 동기 방식이 아니라, 비동기 방식으로 데이터를 요청/처리하기 때문입니다. * 동기(Synchronous) 방식이란 클라이언트에서 요청(request)을 보내면 서버에서 응답(response)가 돌아오기 전까지 무작정 기다려야만 하는 방식입니다. 웹 페이지의 일부분만 바꾸려고 요청을 해도 서버에서 해당 페이지..

[Javascript] onclick vs addEventListener의 차이점을 알아보자

이번 포스팅은 onclick과 addEventListener의 차이점에 대해 알아보겠습니다. 자바스크립트에서 클릭이벤트를 사용할 때 onclick과 addEventListener를 사용할 수 있습니다. 차이점을 알아보기 전에 다음과 같은 예시를 보고 가겠습니다. var btn = document.querySelector('.btn'); btn.onclick = function() { console.log('100'); } btn.onclick = function() { console.log('200'); } btn.onclick = function() { console.log('300'); } '클릭' 버튼을 누르면 콘솔 탭에 어떤 값이 출력이 될까요? '300'만 출력이 됩니다. 그렇다면 다음과 같은 ..