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

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=[하이라이트할 문자열] 형태의 텍스트..

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

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

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

이슈 내용Next.js에서 발생하는 이슈로, 서버와 클라이언트의 props 값이 다른 것이 원인이다. 나는 커스텀 훅을 사용하여 style props에 내려줄 값을 생성하다 보니 해당 경고를 마주하게 되었다.  해결 방법해결 방법은 두 가지가 있으며, 상황에 맞게 골라서 사용하면 된다. 1. useState 사용문제가 되는 props 변경이 클라이언트 단에서 렌더링될 수 있도록 isMounted state를 선언하여 마운트 이전에는 컴포넌트 렌더링을 하지 않는 방법이다.const Page = () => { const [isMounted, setIsMounted] = useState(false); useEffect(() => { setIsMounted(true); document.body...

!important 옵션을 사용하면 CSS 적용 우선순위를 무시하고 가장 높은 우선순위로 스타일을 적용할 수 있다. html에서는 style 속성에 문자열 형태로 다음과 같이 작성하면 된다. 글씨에용 리액트에서는 html과는 달리 문자열이 아닌 CSSProperties 타입의 object 형태로 인라인 스타일을 지정한다. 하지만 아래처럼 important 옵션을 적용하려고 한다면 해당 스타일이 아예 적용되지 않는다. const App = () => { return ( 글씨에용 ); }; 아래 PR 코멘트를 읽어보면, 리액트 15부터 공식적으로 !important 옵션을 지원하지 않는다는 사실을 알 수 있다. CSS: values with "!important" in 0.15 · Issue #6342 · ..

userAgent란? 다들 userAgent가 무엇인지 알고 계시나요? userAgent는 간단히 말하자면 사용자가 사용하고 있는 OS 종류와 버전, 웹 브라우저의 정보 등을 담고 있는 일종의 자기소개 같은 개념입니다. 기본적으로 HTTP 헤더에 포함되며, 자바스크립트의 navigator.userAgent 속성으로도 접근할 수 있습니다. 그럼 이러한 userAgent는 왜 만들어졌고 어떻게 사용될까요? userAgent는 웹 브라우저별로 맞춤화된 서비스를 제공하기 위해 만들어졌습니다. 특정 브라우저에서만 제공하는 기능이 있는 경우, 서버에서는 userAgent를 읽어서 분기 처리를 해줍니다. 혹은 로그를 남길 때 사용자가 어느 기기, 어떤 환경에서 접근했는지 정보를 얻어낼 때도 사용할 수 있습니다. us..