본문 바로가기

Developer/JavaScript20

JavaScript Debounce(디바운스), Throttle(스로틀) 이란? (구현 방법 포함) JavaScript Debounce(디바운스), Throttle(스로틀) 이란? (구현 방법 포함) 서비스를 만들어가면서 프론트엔드 작업을 하게 되면 사용자들과의 상호작용을 위해 JavaScript로 다양한 이벤트에서 다양한 동작이 이루어지는 작업을 하게 됩니다. 가령 특정 검색어를 입력하는 Input에서 검색어를 입력했을 때 자동완성 또는 연관검색어를 보여줄 때, 스크롤을 하는 과정에서 특정 동작을 하고 싶을 때 등 다양한 이벤트에 따라 다양한 기능을 사용자분들에게 제공할텐데요. 만약, 특정 검색어를 입력하는 Input에서 검색어를 입력했을 때 자동완성 또는 연관검색어를 보여주는 기능을 만들고 있는데 keydown 이벤트로 입력할 때 마다 자동완성 또는 연관검색어를 찾아주는 것이 아니라 어느정도 입력이.. 2022. 12. 16.
JavaScript 배열에서 특정 요소 개수 구하는 방법 JavaScript 배열에서 특정 요소 개수 구하는 방법 JavaScript에서 배열 내부에 특정 요소가 중복되어 존재하는 개수를 구하는 방법을 알려드리도록 하겠습니다. 목차 reduce() 사용하는 방법 filter() 사용하는 방법 for() OR forEach() 사용하는 방법 reduce() 사용하는 방법 const getElNum = (arr, el) => arr.reduce((ac, v) => ac + (v === el), 0); const array = ['A', 'B', 'C', 'D', 'A', 'A', 'C', 'E', 'D', 'E', 'A']; const test = getElNum(array, 'A'); console.log(test); // Output // 4 역시나 거의 만.. 2022. 7. 25.
JavaScript 배열 요소 중복 횟수 구하는 방법 (How to Count duplicate value in array in JavaScript) JavaScript 배열 요소 중복 횟수 구하는 방법 (How to Count duplicate value in array in JavaScript) JavaScript에서 배열 안에 요소들의 중복되는 횟수를 구하는 방법을 알려드리도록 하겠습니다. 목차 reduce() 사용하는 방법 for() OR forEach() 사용하는 방법 reduce() 사용하는 방법 const getElCount = (arr) => arr.reduce((ac, v) => ({ ...ac, [v]: (ac[v] || 0) + 1 }), {}); const array = ['A', 'B', 'C', 'D', 'A', 'A', 'C', 'E', 'D', 'E', 'A']; const test = getElCount(array); c.. 2022. 7. 24.
JavaScript 배열 중복 제거하는 방법 5가지 JavaScript 배열 중복 제거하는 방법 5가지 JavaScript 의 배열에서 중복을 제거하는 5가지 방법을 알려드리도록 하겠습니다. 목차 set() 사용하여 배열에서 중복 제거하는 방법 filter(), indexOf() 사용하여 배열에서 중복 제거하는 방법 reduce(), includes() 사용하여 배열에서 중복 제거하는 방법 for() OR forEach(), includes() 사용하여 배열에서 중복 제거하는 방법 Object.fromEntries(), map(), Object.keys() 사용하여 배열에서 중복 제거하는 방법 const array = ['C', 'A', 'B', 'A', 'C', 'D', 'C', 'C', 'E', 'D']; console.log(array);// ['C.. 2022. 1. 11.
date-fns 사용 방법 - JavaScript 날짜 라이브러리 date-fns 사용 방법 - JavaScript 날짜 라이브러리 date-fns 는 많은 JavaScript 날짜 관련 라이브러리 중 Tree shaking을 지원하고 Functional Pattern 으로 동작하는 라이브러리입니다. date-fns 또한 굉장히 많이 사용되는 날짜 라이브러리 입니다. 그럼 date-fns 사용 방법에 대해 알려드리도록 하겠습니다. date-fns 사용 준비 npm install date-fns npm을 통해 date-fns 를 설치하여 사용합니다. date-fns도 moment.js나 day.js 처럼 date-fns 모듈 객체를 불러와서 사용이 가능합니다. const dateFns = require("date-fns");// 83.4K (gzipped: 19.4K) .. 2021. 10. 11.
day.js 사용 방법 - JavaScript 날짜 라이브러리 day.js 사용 방법 - JavaScript 날짜 라이브러리 day.js 는 많은 JavaScript 날짜 관련 라이브러리중 가장 가벼운 라이브러리입니다. 업데이트가 중단된 moment.js 보다 약 33배 가벼우며, immutable 한 구조라서 굉장히 많이 사용되고 있는 라이브러리 입니다. 또한 moment.js 와 문법이 비슷하여서 moment.js 대체로 굉장히 많이 사용되고 있습니다. 그럼 day.js의 사용방법에 대해 알려드리도록 하겠습니다. day.js 사용 준비 Module 설치하여 사용 하는 경우 npm install dayjs npm을 사용하여 day.js 를 설치하여 사용합니다. import dayjs from "dayjs"; day.js를 설치하였으면 위와 같이 import 하여 .. 2021. 10. 10.
moment.js 사용 방법 - JavaScript 날짜 라이브러리 moment.js 사용 방법 - JavaScript 날짜 라이브러리 moment.js는 JavaScript에서 사용되는 날짜관련 라이브러리 중 가장 많이 사용되었던 라이브러리입니다. 현재는 더이상의 업데이트가 없을 것이라 하였지만, 2011년부터 가장 많이 사용된 날짜 관련 라이브러리입니다. 그럼 moment.js의 사용 방법에 대해 알려드리도록 하겠습니다. moment.js 사용 준비 Module 설치하여 사용 시 npm install moment npm을 사용하여 moment.js를 설치하여 사용합니다. import moment from "moment"; moment.js를 설치하였으면 위 코드로 import 하여 사용합니다. 혹은, const moment = require("moment"); req.. 2021. 10. 9.
JavaScript convert date format yyyy-mm-dd, yyyymmdd, yyyy/mm/dd (날짜 형식 쉽게 변경 하는 방법) JavaScript convert date format yyyy-mm-dd, yyyymmdd, yyyy/mm/dd (날짜 형식 쉽게 변경 하는 방법) JavaScript 에서 날짜 형식을 yyyy-mm-dd, yyyymmdd, yyyy/mm/dd 로 쉽게 변경하는 방법을 알려드리도록 하겠습니다. 코드만 조금 다를 뿐 같은 결과를 얻을 수 있으니 원하는 방법을 사용하시면 되겠습니다. 첫번째 방법 function convertDateFormat(date) { var year = date.getFullYear(); var month = date.getMonth() + 1; month = month >= 10 ? month : '0' + month; var day = date.getDate(); day = da.. 2021. 5. 25.
How to skip the preflight request - Preflight 요청 스킵하는 방법 How to skip the preflight request - Preflight 요청 스킵하는 방법 Http Request 과정에서 위 사진과 같이, Preflight Request가 발생하는 것을 스킵할 수 있는 방법에 대해 알려드리도록 하겠습니다. Preflight Request 우선 Preflight Request가 발생하는 이유에 대해서 간단히 설명 드리겠습니다. 브라우저에서는 cross-origin Actual Request(본 요청)을 하기 전에, OPTIONS Method 로 Preflight Request(사전 요청)를 전송하고, 요청 받은 서버에서 Access-Control-Allow-Origin 와 Access-Control-Allow-Methods, 즉 어떤 .. 2021. 5. 20.
JavaScript 반올림, 올림, 내림 방법 JavaScript 반올림, 올림, 내림 방법 JavaScript에서 반올림, 올림, 내림 방법을 알려드리도록 하겠습니다. JavaScript 반올림(round) 방법 var testNum1 = 10.1; var testNum2 = 10.9; var testNum3 = -10.1; var testNum4 = -10.9; testNum1 = Math.round(testNum1); testNum2 = Math.round(testNum2); testNum3 = Math.round(testNum3); testNum4 = Math.round(testNum4); console.log(testNum1);// 10 console.log(testNum2);// 11 console.log(testNum3);// -10 c.. 2021. 3. 26.
JavaScript Base64 Encoding, Decoding 방법 JavaScript Base64 Encoding, Decoding 방법 JavaScript 에서 Base64 Encoding 방법과 Base64 Decoding 방법을 알려드리도록 하겠습니다. Encoding and Decoding base64 in JavaScript var originText = "This is example text."; console.log("Original : ", originText); // Base64 Encoding base64EncodedText = btoa(originText); console.log("Base64 Encoded Text : ", base64EncodedText); // Base64 Decoding base64DecodedText = atob(base64.. 2021. 3. 25.
JavaScript 진수 변환 방법 JavaScript 진수 변환 방법 JavaScript 에서 진수 변환하는 방법을 알려드리도록 하겠습니다. 10진수에서 n진수로 변환하는 방법 var decimal = 1023; var binary = decimal.toString(2);// 2진수로 var octal = decimal.toString(8);// 8진수로 var hex = decimal.toString(16);// 16진수로 위 코드를 보시면 바로 아시겠지만, {{10진수}}.toString(n) 를 사용해 10진수를 원하는 n진수로 변환하실 수 있습니다. n진수에서 10진수로 변환하는 방법 var binary = "1111111111"; var decimal = parseInt(binary, 2);// 2진수에서 10진수로 var oc.. 2021. 2. 24.