이 기술 블로그를 만들기 위해 5년을 미뤘다.

자바스크립트로 사용자가 페이지에 어떤 방식으로 접근했는지 알 수 있다. iOS 네이버 인앱 브라우저에서 window.location.replace()로 이동시 히스토리가 남는 이슈가 있어 수정 방법을 찾아보다가 발견하게 되었다.  pageshow 이벤트로 구분pageshow 이벤트는 페이지 진입 후 로드가 완료된 후에 발생하는 이벤트이다. load, DOMContentLoaded 이벤트와 유사하지만, BFCache에서 복원된 페이지에 진입 시에도 동작하기 때문에 앱스킴 호출이나 로깅 등 페이지 진입시마다 반드시 실행되어야 할 동작들을 처리할 때 유용하다. 참고로 호출되는 순서는 DOMContentLoaded -> load -> pageshow 순이다. 이벤트 객체의 persisted 값이 true인..

값이 큰 숫자를 화면에 나타낼 때, 가독성을 위해 콤마 처리를 해야 할 때가 많다.  숫자에 콤마 처리를 하는 가장 간단한 방법은 Number.toLocaleString() 메소드를 사용하는 것이다.// 1. toLocaleString을 사용한 콤마 포맷팅const formatNumber = (number) => number.toLocaleString();console.log(formatNumber(4234124412)); // 4,234,124,412 위 방법 외에도 Intl.NumberFormat API와 정규표현식을 사용하는 방법이 있다.// 2. Intl.NumberFormat을 사용한 콤마 포맷팅const numberFormatter = new Intl.NumberFormat();const f..

Shadow DOM이란?Shadow DOM은 독립적인 DOM 트리를 생성할 수 있게 해주는 웹 표준이자, 웹 컴포넌트의 핵심적인 기술 중 하나이다. 캡슐화를 통해 마크업 구조, 스타일, 로직을 숨기고 페이지 내 다른 코드로부터 분리되어 코드 충돌이 없게 만들어준다.  input[type=text] 요소를 예시로 들어 보자. 좌측 코드처럼 input 태그의 placeholder 가상 요소에 color 스타일을 주면 placeholder의 글자 색을 바꿀 수 있다. 화면에 렌더링된 input 태그를 확인해 봐도 글자 색이 보라색으로 잘 변경이 된 것을 확인할 수 있지만, 개발자 탭에서는 placeholder 요소에 적용한 스타일이 보이지 않는다.  이유는 바로 input 태그 안에 있는 placeholder..

하나의 배열을 조건에 따라 여러 개의 배열로 나누고 싶은 경우, groupBy 메소드를 사용하면 손쉽게 그룹을 나눌 수 있다. groupBy는 2024년 6월 26일부터 ECMAScript2024(ES15)에 정식으로 채택되었으며, IE를 제외한 최신 웹 브라우저에서 지원한다. "groupby" | Can I use... Support tables for HTML5, CSS3, etc caniuse.com  groupBy 메소드는 Object, Map 객체를 통해 호출이 가능하며, 각각 그룹화된 Object와 Map을 반환한다. 실행 예시는 다음과 같다.const arr = [1, 2, 3, 4, 5];// 1. 배열을 조건에 따라 Object 형태로 그룹핑const groupObj = Object.gr..

이번 Google I/O 2024 발표에도 소개되었던 Speculation Rules API에 대한 내용을 가져왔어요. Speculation Rules API는 이동할 페이지의 HTML을 미리 가져올 수 있는 기능으로, 기존 사용되던 의 개선된 버전이에요. Multiple Page Application 사이트를 방문하다 보면 페이지 이동 시마다 로딩 스피너가 도는 답답함 경험해 보셨죠? Speculation Rules API을 사용하면 Multiple Page Application에서도 Single Page Application처럼 빠른 페이지 로딩을 보장할 수 있다고 합니다.  동작 원리과연 이 API는 어떻게 동작하는 것인지 간단히 알아볼까요? 페이지가 로드되면, 브라우저에서는 각 페이지마다 백그라..

올해 2023년 6월부터 추가된 ES14의 여러 기능들에 대해 알아봅시다. 자세한 내용은 아래 홈페이지에서 확인 가능합니다. ECMAScript® 2023 Language Specification The first and subsequent editions of ECMAScript have provided, for certain operators, implicit numeric conversions that could lose precision or truncate. These legacy implicit conversions are maintained for backward compatibility, but not provided for BigI tc39.es 배열 관련 메소드 map, filter 등..

본격적인 업무에 들어가기 앞서, 타입스크립트에서 유용하게 사용할 수 있는 유틸리티 타입 종류에 대해 정리했다. 유틸리티 타입 종류는 아래 타입스크립트 공식 문서를 참고했다. Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org 일반 유틸리티 타입 Awaited Promise 형태의 T 타입을 전달받아, 해당 Promise가 반환하는 리턴값의 타입을 반환한다. async ~ await의 await 키워드와 유사한 기능을 담당한다. type A = Awaited; // type A = string type B = Awaited; // type B = number type C = Aw..

자바스크립트에서는 a(anchor) 태그를 이용하여 페이지 이동 외에도 파일 다운로드 링크나 메일 링크 등 다양한 기능을 만들 수 있다. a 태그의 속성에 대해 간단히 알아보자. href 링크가 가리키는 URL로, HTTP 스킴 뿐만 아니라 브라우저가 지원하는 모든 URL 스킴의 사용이 가능하다. 또한, 페이지의 어느 한 요소로 이동할 수 있는 프래그먼트의 사용도 가능하다. 주로 사용되는 케이스는 아래와 같다. URL로 이동 // 1. 절대 경로로 이동 이동 // 2. 상대 경로로 이동 이동 // 3. 다른 origin으로 이동 이동 // 4. 동일한 scheme일 경우 생략 가능 이동 절대 경로 URL로 이동하는 경우에는 origin을 생략하고 이동하려는 경로만 작성하면 된다. 상대 경로 이동은 /(슬..

자바스크립트에서 사용되는 참조값으로는 대표적으로 object(객체)와 array(배열)이 있다. 객체와 배열은 자바스크립트의 Object 객체에서 제공하는 메소드를 이용하여 서로 형변환이 가능하다. object를 array로 변환하기 위해서는 Object.entries() 메소드를 사용할 수 있다. Object.entries는 object를 인자로 받아 [key, value] 형태의 배열을 값으로 갖는 2차원 배열을 반환한다. 객체의 키나 값만 배열로 가져오고 싶다면 Object.keys(), Object.values() 메소드를 사용하면 된다. const obj = { name: 'mjkim', age: 26, birth: '0128', address: 'dongdaemungu' }; const arr..

자바스크립트에서 배열을 정렬하기 위해서는 보통 sort() 메소드를 사용한다. 배열.sort([비교 함수]) 비교 함수는 ((이전 값, 현재 값) => { 정렬 가중치 함수 }) 형태로 이루어짐 정렬 가중치 함수는 특정 조건에 따라서 1, 0, -1 처럼 정렬의 기준이 되는 값을 리턴하거나 혹은 숫자 배열의 경우에는 가중치 자체가 되는 값을 리턴한다. sort() 메소드는 원본 배열을 변경하는 함수이며, 동시에 변경된 배열을 리턴하기 때문에 특정 변수에 sort된 배열 값을 저장할 수 있다. 그리고 비교 함수를 인자로 전달할 수 있다. 비교 함수는 다음과 같은 형태를 갖는다. // 조건에 따라 0보다 큰 수(1), 0, 0보다 작은 수(-1) 중 하나의 값을 반환한다. (prev, cur) => { //..