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

URL 뒤에 hash 값 #[id]를 붙이면 페이지 내 해당 id를 갖는 특정 영역으로 스크롤된다. 예를 들어, https://m.gmarket.co.kr/n/best#rank-100 링크로 지마켓 베스트 페이지에 접근하면 id="rank-100"인 상품 위치로 스크롤이 이동된 것을 확인할 수 있다. 이 방법은 마크업에 id를 반드시 추가해야 사용할 수 있다는 단점이 존재한다. 텍스트 조각(Text Fragment) 기능을 사용하면 id 없이도 특정 위치로 스크롤 이동이 가능하다.  텍스트 조각(Text Fragment)이란?말 그대로 페이지 내 특정 문자열을 강조하고 해당 스크롤 위치로 이동할 수 있는 기능이다. 사용 방법은 아래와 같이 URL 뒤에 #:~:text=[하이라이트할 문자열] 형태의 텍스트..

값이 큰 숫자를 화면에 나타낼 때, 가독성을 위해 콤마 처리를 해야 할 때가 많다.  숫자에 콤마 처리를 하는 가장 간단한 방법은 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..

Node.js 22 버전이 출시된 지 아직 6개월밖에 지나지 않은 2024년 10월 16일, 벌써 23 버전이 출시되었다고 합니다. 홀수 버전이긴 하지만, 이번에는 어떤 기능이 추가되었는지 같이 보면 좋을 것 같아서 가져와 봤어요. 1) require(esm) 기능 기본 제공기존에는 require() 함수로 esm 파일을 임포트하고자 하는 경우에는 --experimental-require-module 플래그를 붙여줘야 했는데요, (노드 20 이상부터 가능) 23버전부터는 플래그 없이도 기본적으로 해당 기능을 제공합니다.// hello.mjsimport util from 'node:util';export const hello = util.format('hello %s', 'world');// index.c..

사내 딥링크 중간서버를 새로 만들게 되면서 여러 브라우저에서 동작 테스트를 진행하고 있는데, 유독 카카오톡 인앱 브라우저에서 발생하는 이슈가 많았다. 페이스북, 인스타그램, 슬랙 등 많은 앱에서 인앱 브라우저를 제공하고 있지만, 그 중에서도 가장 유입이 많은 카카오 인앱 브라우저 기준으로 현재 발생 중인 이슈를 정리해 보았다.    인앱 브라우저에서 스킴 실행 후 닫기 안됨타 모바일 브라우저에서는 앱 스킴/market 스킴을 실행하면 자동으로 해당 페이지가 닫힌다. 하지만 카카오 인앱 브라우저는 닫히지 않고 빈 페이지가 남아있다.카카오 인앱 브라우저일반 모바일 브라우저  페이지가 계속 남아있기 때문에, 필자의 경우는 인앱 브라우저로 다시 돌아올 때마다 fallback 이벤트가 계속 실행되는 이슈가 있었다..

프론트엔드 개발을 하다 보면 이미지를 다룰 일이 많다. 단순히 이미지를 화면에 보여주는 것뿐만 아니라 요구사항에 따라 에러 처리, 크로스 브라우징 지원, 미리보기 이미지 노출 등 여러 작업이 필요하다. 이미지를 안전하게 다루고, 사용자에게 적절한 이미지를 보여줄 수 있는 다양한 방법에 대해 알아보자.    Javascript에서의 fallback 처리자바스크립트의 onload, onerror 핸들러를 사용하여 이미지 fallback 처리가 가능하다.  onload 이벤트 다루기onload는 이미지 로드가 완료된 직후 실행되며, 이미지가 로드될 때 스르륵 나타나는 애니메이션을 적용할 때 주로 사용한다.  주의해야 할 점은, Next.js 서버 컴포넌트에서는 사용이 불가능하고, 캐싱된 이미지 로드 시에는 o..

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는 어떻게 동작하는 것인지 간단히 알아볼까요? 페이지가 로드되면, 브라우저에서는 각 페이지마다 백그라..

부드러운 스크롤 구현을 위한 locomotive-scroll데스크탑에서도 모바일에서 스크롤 하듯 부드러운 스크롤을 구현하려면 어떻게 해야 할까? locomotive-scroll과 같은 라이브러리를 사용하면 간단하게 부드러운 스크롤 구현이 가능하다. 부드러운 스크롤이 적용된 페이지 예시로는 지마켓 채용 페이지가 있다. G마켓 인재영입 - 지마켓 채용 사이트Gmarket Careers, 지마켓 채용 사이트, 세상에 가치를 연결하고 당신이 가져올 변화를 기다립니다.careers.gmarket.com  보통은 원 페이지 단위의 정적 페이지에서 주로 사용하는데, 멀티 페이지 환경인 Next.js에서도 사용이 가능하다. 어떻게 사용해야 하는지 알아보자.  Next.js에서 locomotive-scroll을 사용하..

들어가기에 앞서 PC 크롬과는 달리 모바일 크롬 브라우저에서는 userAgent를 변경하는 기능이 없다. 구글링을 해보면 돌핀 브라우저, firefox 등을 사용하는 방법이 나와 있지만 다음과 같은 이슈가 있어 현재는 사용이 불가하다. 돌핀 브라우저 Android 플레이스토어에서 돌핀 브라우저 설치 불가능 iOS 앱스토어에서는 설치는 되지만 아래 블로그 글에서 사용하는 설정 옵션이 제공되지 않음 https://bulhwang.tistory.com/48 firefox Android/iOS 최신 버전에서 about:config 메뉴가 지원되지 않음 https://www.youtube.com/watch?v=9hJoWpNC-8A 머큐리, 퍼핀 브라우저 Android 플레이스토어에서 머큐리 브라우저 설치 불가능 ..