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

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) => { //..

자바스크립트에서는 input type="file" 태그를 이용하여 이미지를 포함한 다양한 확장자의 파일을 업로드할 수 있다. 만약 이미지만 업로드하게끔 제한하고 싶다면 accept="image/*" 프로퍼티를 추가하면 된다. 이와 비슷하게 비디오 파일만 업로드하고 싶다면 accept="video/*", 오디오 파일만 업로드하고 싶다면 accept="audio/*" 이렇게 사용하면 된다. 혹은 특정 확장자만 허용하는 방법도 있다. 예를 들어 아래와 같이 작성하면 png, jpeg 확장자를 갖는 이미지만 업로드가 가능하다. // png, jpeg 확장자를 갖는 이미지만 업로드 허용 // 혹은 이제 업로드한 이미지 미리보기를 구현하는 방법을 알아보자. 미리보기를 구현하기 위해 널리 사용되는 두 가지 방법으로는..

window 전역 객체 내에는 location, navigator, web storage 등 다양한 프로퍼티가 존재한다. var 키워드로 선언된 전역 변수 또한 window 전역 객체의 프로퍼티로 접근이 가능하다. window 전역 객체는 식별자 window.을 앞에 붙이지 않고도 객체 내 프로퍼티에 접근이 가능하다. const path = window.location.pathname; const path2 = location.pathname; console.log(path === path2); // true window.navigator에 포함된 값으로 userAgent라는 값에 접근이 가능한데, userAgent는 HTTP 요청을 보내는 디바이스와 브라우저 등의 사용자 식별 정보를 담고 있는 head..