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

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

next.js 13부터 추가된 앱 라우터에서는 parallel routes(병렬 경로)이라는 기능을 제공하는데, 이를 이용하여 간단하게 조건부 모달 처리를 할 수 있다. 병렬 경로란 하나의 레이아웃에서 여러 페이지를 동시에 보여줄 수 있는 기능으로, 슬롯(@slot)을 통해 구현할 수 있다. 슬롯은 앱 라우터에서 추가된 개념으로, 두 개 이상의 페이지를 동시에 띄울 수 있는 기능이다. 주로 메인 페이지 위에 별도 페이지를 모달 형태로 띄우기 위해 사용된다.ex) 메인 페이지(children)가 떠있는 상태에서 로그인 페이지를 노출 기존에는 이러한 모달 처리는 Portal + useState(혹은 query parameter) 방식으로 구현했었다.Portal이란?부모 컴포넌트 바깥 위치에 컴포넌트를 렌더..

css 작성시 특정 클래스를 갖는 요소에만 스타일을 적용하고 싶다면 아래와 같이 작성하면 된다./* nav, active 클래스를 동시에 갖는 요소에만 css 적용 */.nav.active { background-color: #0f1720;} 클래스 외 특정 속성을 갖는지에 대한 여부, 특정 속성이 갖는 값을 기준으로 css를 작성하는 방법도 있다.  HTML 요소가 특정 속성을 가지고 있을 때 스타일 적용선택자 뒤에 [속성명]을 붙여주면 해당 속성을 갖고 있는 경우에만 css가 적용되도록 작성할 수 있다./* data-cell-index 속성을 갖는 요소에만 css 적용 */div[data-cell-index] { background-color: #1187cf;}  HTML 요소의 특정 속성 값이..

간혹 처음 방문하는 페이지에 들어가면 아래처럼 가이드 영역이 보이는 경우가 있다. 필자는 심심할 때마다 위시캣을 자주 방문하는데, 종종 저런 화면이 뜨는 것을 볼 수 있었다. 과연 저런 가이드 영역은 어떻게 만들 수 있을까? 간단히 생각하면 HTML, CSS를 사용하여 특정 영역을 제외한 나머지 영역을 어둡게 처리하면 될 것이다. 위시캣은 tutorial-wrapper라는 반투명한 어두운 박스로 화면 위를 덮고, 강조하고자 하는 텍스트 영역을 하나 더 만들어서 해당 영역만 밝아보이는 것처럼 보여준다. 이 방법은 불필요한 DOM 요소가 추가되며, 중복된 텍스트 요소도 하나 더 생기는 단점이 있다. CSS의 mix-blend-mode 속성을 사용하면 불필요한 요소 추가 없이도 가이드 영역을 만들수 있다.  ..

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..