encodeURIComponent() encodeURIComponent() 함수는 URI의 특정한 문자를 UTF-8로 인코딩해 하나, 둘, 셋, 혹은 네 개의 연속된 이스케이프 문자로 나타냅니다. (두 개의 대리 문자로 이루어진 문자만 이스케이프 문자 네 개로 변환됩니다.) HTTP로 URL 값을 전달할때 오로지 영문자와 숫자만으로 전달한다면 인코딩 디코딩이 필요 없을 것이나 실제에 있어서는 다양한 특수문자와 한글 등이 URL 값에 포함되어 전달되는데 이때 제대로 인식을 못해서 404 Not found 에러가 발생하거나 잘못된 값이 전달되는 경우가 발생할수 있다. [예제] http://www.xxx.xx/info?page=3&title=developer&enginner 이 경우 title에 develop..

structuredClone()은 구조화된 복제 알고리즘 을 사용하여 주어진 값의 깊은 복제본 을 생성합니다 . 개발을 진행하며 깊은 복사를 진행할 경우 JSON 메서드, lodash의 deepclone 함수, deepCopy를 사용하였지만, WEB API에 structuredClone()를 이용하면 된다. [deepCopy 함수] function deepCopy(obj) { const clone = {} for (var key in obj) { if (typeof obj[key] == 'object' && obj[key] != null) { clone[key] = deepCopy(obj[key]) } else { clone[key] = obj[key] } } return clone } [structur..

javascript This의 정의 this란 javascript의 예약어다. this는 함수가 호출될때 결정이 된다. 화살표 함수에서의 this는 함수가 속해잇는곳의 상위 this를 가르킨다. + 좀 더 디테일하게 설명하면 런타임시에 해당 객체가 존재하는 스코프가 this가 된다. 예제를 통해 알아보자. [예제1 : this는 함수가 호출될때 결정이 된다.] const car = { name: 'KIA', getName: function () { console.log('car getName', this) }, } car.getName() // car 객체 const globalCar = car.getName globalCar() // window 객체 첫번째 car.getName() car의 객체가 나..

$(document).bind('keypress', (event) =>{ // shift + a 조합키 if( event.which === 65 && event.shiftKey ) { console.log('shift + a 조합키 감지') } }); jquery를 이용하여 사용자 키보드 입력에 대한 이벤트를 감지가 가능하다. shift, ctrl, alt, meta 키와 일반 키를 동시에 눌렀을 때 위와 같은 방식으로 이벤트를 줄 수 있다. event.shiftKey event.ctrlKey event.altKey event.metaKey [keyCode 표] 출처 : https://im-developer.tistory.com/20 키 코드 : https://www.cambiaresearch.com/a..

Promise.all()은 비동기 통신을 병렬로 수행하여 순회가능한 promise가 끝나는 시점을 잡을 수 있는 메서드이다. Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환합니다. 주어진 프로미스 중 하나가 거부하는 경우, 첫 번째로 거절한 프로미스의 이유를 사용해 자신도 거부합니다. const promise1 = Promise.resolve(3); const promise2 = 42; const promise3 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 'foo'); }); Promise.all([promise1, promise2..

정규표현식은 "특정 패턴의 문자열"을 찾기 위한 표현 방식입니다. (이런걸 형식 언어, formal languange라고 합니다.) 형식 : /regex?/i 의미 : slashes(/) , patterns(regex?), slashes(/) , i (i) 슬러시 안에 패턴을 입력하여 원하는 특정 패턴을 찾으면 됩니다. 4가지 그룹으로 나눠서 보기. 연습용 사이트 : https://regexr.com/5ml92 Groups and ranges Character뜻 | 또는 () 그룹 [] 문자셋, 괄호안의 어떤 문자든 [^] 부정 문자셋, 괄호안의 어떤 문가 아닐때 (?:) 찾지만 기억하지는 않음 [patterns] 그룹으로 묶어서 찾기 ex) /gr(e|a)y -> gr로 시작하면서 e또는a로 시작하고y..

optional chaining 연산자 (?.) 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. ?. 연산자는 . 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 nullish (en-US) (null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 undefined로 단락된다. 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면, undefined를 리턴한다. 간단히 말하면 객체에 참조에러를 방지 할 수 있는 문법이다. [문법] : object key값앞에 ?를 붙여주어 error를 방지하면 된다. obj?.prop obj?.[expr] arr?.[index] func?.(args) 예..

Web을 이용하는 중에 scroll을 내리다보면 데이터가 발생하는 경우가 종종 생긴다. javascript 'scroll'을 통해 event를 실행할 수 있다. 1. 첫번째 방법 : target.addEventListener에 scroll을 등록해 준다. let last_known_scroll_position = 0; let ticking = false; function doSomething(scroll_pos) { // scroll 위치에 대한 작업을 하세요 } window.addEventListener('scroll', function(e) { last_known_scroll_position = window.scrollY; if (!ticking) { window.requestAnimationFram..