Duknock의 개발새발

자바스크립트의 비동기요청을 처리하는 방법에 Promise 라는것이 있다. Promise는 단어 뜻 그대로, "비동기 요청이 완료될 경우 어떠한 일을 이행하겠다." 를 약속한다. 한번 아래 코드를 보자. let promise = new Promise(function(resolve, reject) { //비동기 요청 처리하는 곳 }); Promise는 new 메서드로 생성하는 객체다. 위 코드의 new Promise 에게 함수가 전달되는것을 볼 수 있는데, 이 함수를 executor(실행 함수)라고 한다. 단어가 어려워 보이지만 그냥 Promise 객체가 만들어질때 자동으로 실행되는 함수이다. 이 executor 안에 처리할 로직(보통 비동기 요청 넣겠지?)이 들어가면 된다. 그리고 executor에게 주어..

중학교였는지 고등학교였는지는 기억 안나지만 수학에서 조합이라는것을 배운다. 값이 1,2,3 이렇게 있으면 [1], [2], [3], [1,2], [1,3], [2,3], [1,2,3] 이딴식으로 조합이 나오는데 개발을 하다보면 가끔씩 한번쯤은 이걸 활용할 때가 있다. (옵션 고르는 체크박스를 표현할때 등...) 이걸 자바스크립트로 한번 만들어보자. function combination(arr, selectNum) { const result = []; if (selectNum === 1) return arr.map((el) => [el]); arr.forEach((el, idx, arr) => { const restArr = arr.slice(idx + 1); const combinationArr = co..

자바스크립트에서 오늘 날짜를 알 수 있는 가장 쉬운방법으로는 Date 객체를 활용하는 방법이 있다. let today = new Date(); // Mon Aug 29 2022 13:47:11 GMT+0900 (한국 표준시) new 메서드로 Date 객체를 생성하면 위와 같이 나온다. 근데 누군가 시간 좀 알려달라 했을때 Q : 지금 시간 좀 알려줘! A : Mon Aug 29 2022 13:47:11 GMT+0900 (한국 표준시)! 이딴식으로 알려주면 굉장히 불편해 할 것이기 때문에 보기 좋게 다듬어 보자. 보통 날짜를 표현할때는 년도 - 월 - 일 형식으로 나타낸다. (2022-08-29 이런식으로) 이렇게 보여주려면 Date 객체에 포함된 메서드를 활용하여 문자열을 만들면 된다. let today..

addEventListener 함수는 DOM요소에 이벤트가 일어났을 때 콜백함수를 실행하게 해준다. let button = document.querySelector('button'); button.addEventListener('click', ()=>{ console.log('버튼 클릭했음') }) addEventListener의 첫번째 인자는 이벤트의 종류를 의미하고, 두번째 인자에는 콜백함수가 들어간다. 위 코드의 경우 'click' 이벤트 발생시, 뒤에 있는 익명 화살표함수를 실행하라는 뜻이다. 근데 코딩을 하다보면 하나의 DOM 요소에 이벤트리스너가 중첩되는 경우가 종종 생긴다. List 1 List 2 List 3 List 4 List 5 버튼 예시로 위와 같은 페이지가 있다고 치자. 각 li ..

Array.map() 이 아니다. Map은 key와 value 쌍을 저장한다는 점에서 object와 유사하다. 하지만 object의 경우 key값에 문자열과 심볼만 넣을 수 있지만, Map은 key값에 모든 타입을 다 넣을 수 있다. (심지어 객체나 함수를 key값에 넣어도 된다.) let 맵 = new Map(); Map을 만들고 싶을 때는 new 생성자로 만든다. object 에 값을 넣을때는 Object.key = value 혹은 Object[key] = value 이런식으로 추가하는데 Map에 값을 추가할 때는 .set 메서드를 사용한다. 그리고 값을 읽어올 때는 .get 메서드를 사용한다. 맵.set('key', 'value'); console.log(맵); // Map(1) {'key' => ..

ResizeObserver는 자바스크립트에 기본적으로 내장된 API이다. Window.addEventListener의 'resize' 와는 다르다. Window의 resize 이벤트는 브라우저의 크기 변화를 감지하고 ResizeObserver 는 브라우저가 아닌 특정 요소자체의 크기 변화를 감지한다. (물론 브라우저의 크기 변화도 감지할 수 있다.) 브라우저의 크기는 변하지 않았지만, LNB 메뉴가 펼쳐질때 메인 컨텐츠 부분이 줄어든다던가 할때 유용하다. 사용법을 알아보자. let box_observer = new ResizeObserver(entries => { for (let entry of entries) { // 감시 대상의 크기가 변화했을 때 실행할 코드 console.log('사이즈 변했음!'..

자바스크립트에는 프로토타입이라는 개념이 있다. 자바스크립트 내의 객체들은 프로토타입으로부터 메서드와 속성을 상속받는다....라고만 하면 알아듣기 어려우니까 코드를 직접 보자. 우리가 코딩을 하다보면 수많은 메서드를 사용하는데 위에 있는 캡처처럼 배열의 .push() 라던가, .length() 라던가... 코딩하면서 수없이 사용하는 것들이다. 근데 이렇게 객체 뒤에 '.' 붙이는 거.... 어디서 많이 보던 문법이지 않은가? 그렇다. 객체의 프로퍼티를 참조할때 쓰는 문법이다. let obj = {}; obj.name = "John"; console.log(obj.name); // "John" 이런식으로 우리는 객체에 . 을 붙여서 객체의 프로퍼티를 추가하거나 조회할 수 있다. .length() 나 .pus..

제목이 길다. 말 그대로 비동기 요청 여러개를 보내고 모든 요청으로부터 응답이 도착했을때 실행해야 하는 함수가 있을때의 처리 방법에 관한 글이다. 물론 무식한 방법으로는 ajax(혹은 fetch...보통 익숙한 단어인 ajax라고 말하겠음)를 체이닝해서 동기적으로 처리하는 방법도 있긴하다. fetch('url...') .then(res=>res.json()) .then((data1)=>{ fetch('url...') .then(res=>res.json()) .then((data2)=>{ fetch('url...') .then(res=>res.json()) .then((data3)=>{ fetch('url...') .then(res=>res.json()) .then((data4)=>{ console.log..

요즘 제이쿼리를 안쓰려고 한다. 이유는 단순하다. 오류 찾기가 너무 어렵더라. 그리고 제이쿼리 자체가 너무 오래된 라이브러리기도 하고 자바스크립트를 공부하려면 제이쿼리 안쓰는게 좋을거 같아서... 근데 다른것들은 다 괜찮은데 Ajax 요청을 바닐라js로 작성하는게 문제였다. const xhr = new XMLHttpRequest(); const method = "GET"; const url = "https://어쩌구저쩌구URL"; xhr.open(method, url); // onreadystatechange 이벤트를 이용해 요청에 대한 응답 결과를 처리 // XMLHttpRequest의 상태가 변하면 얘가 감지한다. xhr.onreadystatechange = function (event) { cons..