여기 저번에 왔던 것 같은데?

(javascript) Throttle, Debounce를 통한 따닥 방지1. Throttle, Debounce 도입 배경운영 중인 시스템에서 특정 기능을 사용할 때 '따닥' 현상으로 인해 API 요청이 중복으로 호출되는 문제가 종종 발생했는데요.빈도가 높지는 않았지만 발생할 때마가 데이터가 꼬이는 문제가 생겼기 때문에 어떻게든 처리가 필요한 상황이었습니다. 물론 서버 측에서 동일한 키 값에 대한 API 요청이 중복으로 일어나지 않도록 처리되어 있었지만, 트랜잭션이 끝나기 전 동일한 요청이 들어오는 경우 이러한 문제가 발생하였으며, 원인은 스페이스 키 또는 엔터 키의 연타로 인해 발생하는 것으로 예상되었습니다.(스페이스 키, 엔터 키를 막는 방법은 사용자의 편의성으로 인해 적용할 수 없는 상황이었습니다...

javascript 배열 차집합, 교집합, 대칭차집합, 합집합 구하는 방법javascript에서 배열을 다루다 보면 여러 배열에 대한 비교가 필요할 때가 있는데요. 해당 포스팅에서는 'Array.prototype.filter()' 함수와 'Array.prototype.includes()' 함수를 사용하여 두 배열에 대한 차집합(difference set), 교집합(intersction), 대칭차집합(symmetric difference), 합집합(union)을 구하는 방법에 대해서 정리하였습니다. filter(), includes() 함수먼저 배열 비교에 핵심이 되는 두 함수에 대해서 간단하게 살펴보겠습니다. 1. Array.prototype.filter()const fruits = ["apple", "..

자바스크립트 유효성 검사 함수 test(), exec(), match() 비교 정리 사용자로부터 들어오는 데이터에 대한 유효성 검사는 백엔드뿐만 아니라 프론트엔드에서도 필요한 과정인데요.비록 개발자 도구를 통해 값을 변조할 수는 있지만 사용자에게 빠른 응답을 줄 수 있고, 서버에 요청 부담을 줄일 수 있으며, UI/UX 측면에서의 활용성도 있기 때문입니다. 해당 포스팅에서는 javascript 단에서 데이터의 유효성 검사를 할 때 사용하는 test(), exec(), match() 함수에 대해 비교 정리해 보았습니다./* 위 함수 외에도 필요에 따라 matchAll(), replace(), replaceAll(), split() 등의 함수가 사용될 수 있습니다. */ javascript 정규 표현식 생성..

(Javascript) a tag의 download 속성을 통한 파일 다운로드 방법 및 예시해당 포스팅은 Javascript에서 '' 태그의 'download' 속성을 활용한 파일 다운로드 방법 및 예시를 정리한 내용입니다. a tag 파일 다운로드 방법 -->파일 다운로드 '' 태그의 경우 'href' 속성에 다운로드할 파일의 URL을 설정하고 'download' 속성을 추가하여 간단하게 파일을 다운로드할 수 있는데요. download 속성의 경우 HTML5에서 추가되었으며, 이 속성을 사용하면 브라우저가 링크를 클릭할 때 파일을 열지 않고 다운로드를 시도하게 됩니다.download 속성의 값으로는 다운로드될 파일의 이름을 지정할 수 있으며, 값을 지정하지 않은 경우 파일의 원래 이름 그대로 다운로드를..

JavaScript 이벤트 전파 개념 및 막는 방법 (click 이벤트 전파 문제) outer-div inner-div 다음 예시와 같이 'outer-div' 안에 'inner-div'라는 요소가 있고, 각 요소에 click 이벤트가 있는 상황에서 'inner-div'를 한 번 클릭하였을 때, 이미지 결과처럼 'click_inner_div' 함수 동작 후 'click_outer_div' 함수도 동작되는 상황을 발견하게 되었는데요. 관련된 내용을 찾아보니 JavaScript에서는 '이벤트 전파(Bubbling, Capturing)'라는 개념이 있었으며, 해당 개념 및 이벤트 전파를 막는 방법에 대해 정리하게 되었습니다. Event 전파 (Capturing, Bubbling) javascript에서 이벤트 ..

javascript - input image width, height 구하는 방법 JavaScript를 사용하여 에 들어온 이미지 파일의 너비와 높이를 구하는 방법이 궁금하여 찾아본 내용입니다. 해당 기능에서 핵심이 되는 것은 javascript에서 사용되는 FileAPI인 'FileReader'인데요. 아래 실제 구현 코드를 통해 내용 살펴보겠습니다. (input type="file"으로 들어온 이미지 파일의 너비와 높이를 구하는 코드) /* FileReader란? 웹 어플리케이션이 비동기적으로 파일의 내용을 읽는 데 사용되는 객체이며, File 혹은 Blob 객체로부터 내용을 읽어옵니다. */ 동작 내용을 살펴보면, 먼저 FileReader 객체 생성 후에 사용되는 'readAsDataURL()' 메..

javascript에서 행의 값이 필요할 때 table.rows 함수와 row.cells 함수를 활용하여 값을 가지고 오는 코드입니다. (rows collection, cells collection) html 및 javascript 코드 중점으로 올리고 css의 경우 포스팅 맨 하단부에 추가해놓을 테니 필요하신 경우 참고 부탁드리겠습니다. First Name Last Name Phone Email Date of Birth Susan Connor (02) 338-2765 jmatman@gmail.com 01/13/1979 ... (생략) (html 코드, 단순한 테이블 구조) (행의 값을 가져오는 javascript 코드) table.rows 함수를 통해 rows collection을 가져올 수 있으며, ..

먼저 클립보드(Clipboad)란, '복사'하거나 '잘라내기'한 텍스트 또는 파일 등을 '붙여넣기' 하기 전까지 임시로 저장해두는 공간입니다. 자바스크립트 클립보드 복사하는 방법에는 document.exeCommand() 함수를 사용하는 방법과 Clipboard API를 사용하는 방법, clipboad.js 라이브러리를 사용하는 방법이 있는데요. document.execCommand() 함수의 경우 (2022년 6월) 현재 정상적으로 동작은 하지만 웹 표준에서 Deprecated 되었기 때문에 공식문서에서도 사용되지 않으며, 대체 방법으로 Clipboad API 사용이 권장되고 있습니다. 하지만 Clipboad API의 경우 Safari 13.1 버전부터 https 환경에서만 지원한다는 아쉬운 점이 있는..

쿠키(Cookie) 개념, 본격적으로 코드를 보기 전에 쿠키(Cookie)의 개념부터 간단하게 살펴보면, HTTP 쿠키는 웹 브라우저(web browser)에 저장되는 4KB 크기를 가진 문자열입니다. 기본적으로 HTTP 프로토콜은 각각의 요청을 독립적인 트랜잭션으로 취급하는 통신 프로토콜로 '무상태(Stateless) 프로토콜' 이라고도 불리는데요. 이때 쿠키는 제한적이긴 하지만 브라우저와 서버 간에 지속적으로 유지할 수 있는 데이터를 제공하는데, 이것이 HTTP 프로토콜에서 상태 관리의 개념으로 볼 수 있습니다. 하나의 예로, 쿠키는 서버에서 받은 로그인 토큰 정보를 웹 브라우저에 저장하고, 다시 서버에 요청을 할 때, 그 정보를 서버에 보냄으로써 사용자를 식별할 수 있게 하는 역할을 합니다. 쿠키를..

구글맵 google map API를 사용하는 방법 및 marker를 추가하고 변경하는 작업을 알아보겠습니다. (사용할 API는 'Maps JavaScript API'입니다.) 진행 과정은 먼저 Google Cloud Platform에서 'Maps JavaScript API' 라이브러리 사용 설정 및 API 키 발급받는 과정 이후 실제 html에 구글맵 API를 사용하는 코드를 적용해보겠습니다. 'Google Cloud Platform 설정' (Google Cloud Platform에 Project가 등록되어있다는 가정하에 진행됩니다.) Google Cloud Platform -> API 및 서비스 -> 라이브러리 -> Maps JavaScript API => 'Maps JavaScript API' 사용 ..