JavaScript
[JS] JavaScript 자바스크립트 Map 더 잘 사용하기
[JS] JavaScript 자바스크립트 Map 더 잘 사용하기
2024.05.19Map은 key, value로 이루어진 순서가 있는 컬렉션이다. 삽입 순서를 기억하며 key/value 추가/제거가 빈번할 때 객체보다 더 좋은 성능을 가진다 MDN - Map 페이지를 보면 아래와 같이 적혀있다.Map: 키-값 쌍의 빈번한 추가 및 제거와 관련된 상황에서는 성능이 좀 더 좋습니다.Object: 키-값 쌍의 빈번한 추가 및 제거에 최적화되지 않았습니다. 실제로 랜덤 숫자 10,000개로 구성된 객체를 추가/삭제할 때 Map은 901 ops/s, 객체는 183 ops/s로 측정된다. 즉, 1초 동안 Map은 901번의 작업을 처리하고, 객체는 183번의 작업을 처리한다. Map이 일반 객체보다 거의 4~5배 가량 빠르다는 것을 의미한다. 물론 이 벤치마크를 100% 신뢰할 수 없지만 key..
[JS] 정규식의 그룹화(Grouping) / 캡처화(Capturing) 활용하기
[JS] 정규식의 그룹화(Grouping) / 캡처화(Capturing) 활용하기
2024.05.18그룹화 / 캡처화그룹화 Grouping정규식에서 그룹화는 특정 문자들을 단일 표현식(Single Entity)으로 구분하기 위해 사용한다. 그룹화는 보통 캡처링과 함께 사용하므로 이 둘을 함께 알아두는 것이 좋다. 아래 예시에서 사용한 + 수량자는 1번 이상 반복하는 문자열을 찾는다. 따라서 ab(b 1번 일치), abb(b 2번 일치) 등을 모두 일치한다고 판단한다.const str = 'aabbbababaabb';str.match(/ab+/g); // ['abbb', 'ab', 'ab', 'abb'] 특정 문자 그룹의 반복 여부를 판단하려면 소괄호()를 사용해 그룹화하면 된다. 그룹화하면 괄호 안 문자를 하나의 단일 표현식으로 정의한다. 아래 예시에선 (ab)로 묶었으므로 ab가 1번 이상 반복되는 ..
[JS] 문장, 단어, 자소별로 문자열 분리하기
[JS] 문장, 단어, 자소별로 문자열 분리하기
2024.05.17split() 메서드의 문제점자바스크립트에서 문자열을 분리할 때 일반적으로 split() 메서드를 사용한다. 하지만 아래처럼 구분자는 결과 배열에서 제외되고 불필요한 공백이 추가된다. 즉, language-sensitive 하지 않는 단점이 있다. language-sensitive는 문맥에 맞는 표현과 용어 사용을 의미한다. 한국어로는 언어 감수성이라고 부른다. 'Hello! How are you?'.split(/[.!?]/);// ['Hello', ' How are you', ''] 💡 정규식 관련 참고표현식을 하나의 단위로 취급하는 포획 괄호를 사용하면 구분자도 결과 배열에 포함할 수 있다[] 문자 그룹은 대괄호 내부 문자열 중 하나라도 일치하는 경우를 의미한다 Intl 자바스크립트 API를 활용하..
[React/JS] Promise 프로미스를 활용한 UX 개선 — 턴 미루기
[React/JS] Promise 프로미스를 활용한 UX 개선 — 턴 미루기
2024.05.16동기 작업을 기다리는 프로미스프로미스는 모든 동기 작업을 완료한 후에 실행할 수 있다. 아래 예시에서 then 후속 처리 메서드에 넘긴 console.log는 절대 실행되지 않는다.// 코드 참고 via 오늘의 프로그래밍new Promise((resolve) => { console.log('1'); // 동기 영역 resolve('2');}).then(console.log); // 비동기 영역let i = 0;while (true) { i += 1;} 프로미스 생성자에 넘긴 콜백 함수는 동기적으로 처리하므로 콘솔에 1을 출력한다. resolve 함수가 실행되면 프로미스는 이행(fulfilled) 상태가 되고 결과 값과 함께 새로운 프로미스를 리턴한다. 그럼 then 후속 처리 메서드로 실행 턴이 넘..
[DevTools] iPhone 아이폰 사파리에서 디버깅 / 콘솔 사용하기
[DevTools] iPhone 아이폰 사파리에서 디버깅 / 콘솔 사용하기
2024.05.16Safari 개발자 도구💡 아이폰 화면이 잠겨있을 땐 콘솔을 사용할 수 없다. ❶ 맥북 ⇄ 아이폰 USB 연결❷ 아이폰 설정 → Safari → 고급 → 체크❸ macOS 사파리 설정 → 고급 → 체크❹ macOS 사파리 상단 메뉴 → 개발자용 → 아이폰 기기 이름 → 아이폰 사파리에 열려있는 웹사이트 선택❺ macOS 사파리 콘솔 창에서 현재 연동중인 웹사이트의 속성 확인 iOS Simulator💡 Status bar(노치 영역), Nav bar, Tab bar(주소창 영역), Home indicator 같은 아이폰 UI를 그대로 표현하므로 실물 기기를 이용할 때 어떻게 보일지 확인할 수 있다. 설정을 완료한 후 Xcode 실행 없이 스포트라이트에서 Simulator를 검색한 후 바로 실행할 수..
[JS/React] input 필드에 숫자만 입력 허용하기 (한글 입력 방지)
[JS/React] input 필드에 숫자만 입력 허용하기 (한글 입력 방지)
2024.05.16text 타입일 때onKeyDown, onKeyPress 이벤트는 핸들러 안에서 e.preventDefault() 메서드를 호출하면 입력을 막을 수 있다. 하지만 한글을 포함한 CJK 문자(조합 문자)는 메서드를 호출해도 그대로 입력된다. 이 방법은 숫자나 영어 입력을 막을때만 유효하다. 아래 방법으로 해결할 수 있다.export default function App() { const OnKeyDown = (e) => { e.preventDefault(); }; return ( Only allow numbers in input Text Type );} 💡 React에선 onKeyDown → onKeyPress → onC..
[JS] Promise 프로미스 병렬처리 메서드 톺아보기
[JS] Promise 프로미스 병렬처리 메서드 톺아보기
2024.05.14TL;DR💡 처리(settled) 상태는 이행(fulfilled) 또는 거절(rejected) 상태를 모두 포함한다. Promise.all : 모든 프로미스가 이행되어야만 처리 결과를 배열로 반환한다. 프로미스가 하나라도 거절되면 전체가 거절된다.Promise.allSettled : 모든 프로미스가 처리(이행 또는 거절)될 때까지 기다린 후 결과를 배열로 반환한다.Promise.race : 가장 먼저 처리(이행 혹은 거절) 상태가 된 프로미스 처리를 반환한다.Promise.any : 프로미스 중 하나라도 이행되면 해당 값을 반환한다. 모든 프로미스가 거절되면 거절 이유를 담은 AggregateError를 반환한다. Promise.all💡 프로미스 후속 처리 메서드를 이용한 체이닝은 순차적 처리, P..
[JS] 타입 이름을 반환하는 getType 유틸 함수
[JS] 타입 이름을 반환하는 getType 유틸 함수
2024.05.14value를 인자로 받아 해당하는 타입 이름(소문자)을 반환하는 getType 함수. 프로젝트 공통 유틸리티 파일에 추가해두고 사용하면 유용하게 쓸 수 있다.const getType = (value: any) => { if (value === undefined) return 'undefined'; if (value === null) return 'null'; return value.constructor.name.toLowerCase();};getType(8); // 'number'getType([8]); // 'array'getType(() => {}); // 'function'getType('8'); // 'string'getType({ id: 8 }); // 'object'getType(new ..
[Next.js] 라우트 변경 / 새로고침 취소하기 (네비게이션 가드)
[Next.js] 라우트 변경 / 새로고침 취소하기 (네비게이션 가드)
2024.05.14회원가입, 글쓰기 등 입력 Form 페이지에서 실수로 다른 링크를 클릭하거나, 저장하는 것을 깜빡하고 다른 페이지로 이동하면 유저 입장에서 무척 짜증나는 상황이 된다. 처음부터 폼을 다시 작성하거나 수정해야 하기 때문이다. 임시 저장 기능이 있다면 괜찮지만, 그렇지 않다면 페이지 이탈에 대한 Confirm 단계를 추가해서 사용성을 개선할 수 있다. 실제로 여러 웹 서비스에서 Form 페이지 이탈시 ‘저장하지 않은 내용은 삭제된다’는 안내 문구를 띄운다. 구현 방법NextJS 자체적으로 여러 라우트 이벤트를 제공하는데 routeChangeStart는 라우트 변경을 시작할 때 트리거되는 이벤트다. 페이지를 언로드(새로고침)할 땐 window 객체에서 발생하는 beforeunload 이벤트를 이용하면 된다. ..
[JS] API 요청 / 비동기 작업 취소하기 - Abort Controller
[JS] API 요청 / 비동기 작업 취소하기 - Abort Controller
2024.05.14AbortController는 1개 이상의 API 요청을 취소할 때 사용하는 인터페이스다. 주로 중복 요청이 있을 때 이전 요청을 취소할 때 사용하며, 비동기 작업을 다룰 때도 활용할 수 있다. Axios 0.22 버전부터 AbortController를 이용해서 API 요청을 취소할 수 있다. Cancel 토큰을 이용하는 방식은 deprecated 됐다. 기본 사용 방법AbortController는 아래 3가지 단계로 사용한다. abortController.abort() 메서드를 호출하면 abort 이벤트가 발생하며 fetch 프로미스는 rejected 상태가 되고 제어는 catch 블럭으로 진입한다.AbortController 인스턴스 생성인스턴스의 signal 프로퍼티를 fetch의 signal 옵션..
[JS] 업로드 진행 이벤트를 처리하는 onUploadProgress
[JS] 업로드 진행 이벤트를 처리하는 onUploadProgress
2024.05.13Axios에서 업로드 진행 이벤트를 처리하는 onUploadProgress 핸들러를 이용해 업로드 진행 상황을 확인할 수 있다. 주로 업로드 진행 상태를 UI로 표현할 때 활용한다. onUploadProgress 핸들러는 ProgressEvent 네이티브 이벤트 객체를 인자로 받는다. ProgressEvent 객체는 아래 속성을 포함한다. — MDN loaded : 이미 수행한 작업의 양(업로드한 크기)을 나타내는 unsigned long long 형식의 데이터total : 작업의 총 양(총 파일 크기)을 나타내는 unsigned long long 형식의 데이터lengthComputable : 진행 상황 측정 가능 여부를 나타내는 Boolean 값 axios.post(api_url, formData, {..
[JS] 인라인 스타일 정의 - cssText
[JS] 인라인 스타일 정의 - cssText
2024.05.13cssText는 새로운 요소에 여러 스타일을 추가해야 할 때 유용하다. 기존 인라인 스타일을 완전히 교체하므로 그 외 상황에선 잘 사용하지 않는다. 자바스크립트를 이용해 엘리먼트 스타일을 수정할 땐 elem.style.propertyName(프로퍼티 이름은 카멜 케이스 사용) 으로 접근한 뒤 원하는 스타일 값을 할당하는 방식을 사용한다. 하지만 여러 스타일을 추가할 때마다 일일이 propertyName으로 접근하기엔 조금 번거롭다.// CSS 파일에 width, height, margin, font-size 등의 스타일이 적용된 엘리먼트const $header = document.querySelector('.header');$header.style.fontSize = '20px'; 🔍 엘리먼트의 sty..