즐겁게, 코드

TL;DR : 라이브러리를 삭제할 때는 npm ls 으로 참조관계를 먼저 확인하자. 회사 프로젝트에서는 주기적으로 사용하지 않는 라이브러리를 제거하고 있는데, 언젠간 잘 쓰겠지라는 마음으로 설치해두었던 @vueuse/core 가 있었다. 다만 기대와는 달리 오랜 기간동안 실제로 사용되지 않고 있어 이를 삭제하고 잊고 살고 있었다.그런데 몇 개월 정도가 지난 뒤 motion에서 peerDeps로 참조하는 @vueuse/core를 참조할 수 없다는 빌드 에러가 발생하는데, 타임라인을 돌아보면 이랬던 것 같다. 1. (1월) @vueuse/core 라이브러리를 설치한다.2. (3월) motion-v 라이브러리를 설치한다. (✅ @vueuse/core가 설치되어 있으므로 peerDeps 조건 만족)3. (5월..

연휴를 녹이러 영화도 볼겸 체인소맨 극장판을 봤다. 특이했던 것이 요즘은 롯데시네마 앱에서 영화표를 예매하면 삼성페이에 자동으로 연동된다.뒷단 개발자들이 갈렸을 것 같은데... 간만에 프론트 개발자라 다행이라는 생각이 들었다.그런데 삼성페이를 써보던 중 페이지를 아래로 스크롤하면 티켓과 영화 제목이 자연스럽게 사라지는 애니메이션이 눈에 들어왔다.원래대로라면 티켓 정보를 보여주는 평범한 페이지라 느껴졌을 텐데, 이런 인터렉션을 넣으니 경험이 상당히 괜찮게 느껴져서 직접 만들어보고 싶었다.처음에는 scrub: true 정도만 사용하면 무난하게 만들 수 있을 것 같았는데, 추가로 고려해야 했던 점들이 몇 가지 있었다.최상단 티켓 이미지가 제자리를 유지한 채로 scale: 0에 도달할 수 있도록 pin: tru..

일반인들은 마우스로 원하는 링크나 버튼을 눌러 웹 페이지를 자유롭게 탐색할 수 있지만, 시각장애인들은 주로 키보드의 Tab 또는 Shift + Tab 또는 별도의 장치를 통해 HTML 태그를 계층적으로 탐색합니다.💡 시각장애인의 웹 탐색 방법이 궁금하다면 스크린 리더 라는 도구에 대해 검색해 보는 것을 추천드립니다.따라서 프론트엔드 개발자들은 시각장애인들이 일반인과 비슷한 수준의 탐색을 경험할 수 있도록 접근성을 신경쓸 필요가 있는데요, 오늘은 모달(팝업) 컴포넌트를 개발할 때 놓치기 쉬운 접근성을 다뤄 보려 합니다. 예시를 위해 간단한 모달을 제작한 모습입니다.export const Modal = ({ open, handleClose }: Props) => { // Backdrop, CloseBut..

FE 개발을 하다 보면 좌우로 스크롤해 카테고리나 메뉴를 선택하는 등의 UI를 구현해야 할 때가 있는데요,이번 글에서는 좌우 스크롤 UI를 구현할 때 선택할 수 있는 두 가지 방법을 간단히 소개해보려 합니다.1. CSS의 overflow-x: scroll 속성 사용하기아마 좌우 스크롤 UI를 구현할 때는 overflow-x: scroll을 사용하는 것이 가장 쉽고 널리 알려진 방법일 것이라 생각합니다..list { list-style: none; display: flex; overflow-x: scroll; -webkit-overflow-scrolling: touch; pointer: grab;} 마크업을 간단히 진행한 뒤, CSS만으로 좌우 스크롤 UI를 구현한 모습입니다.UI를 조작하는 데에..

React에서는 Context.Provider ↔ useContext 로 구성된 Context API를 사용해 하위 컴포넌트로 값을 공유할 수 있듯, Vue에서도 provide ↔ inject 라는 함수(편의상 '패턴' 이라 부르겠습니다)를 조합해 값을 공유할 수 있습니다.이번 글에서는 Provide - inject 패턴의 사용법을 간단히 알아보면서, 두 가지 팁을 함께 소개해보려 합니다. TL;DRprovide - inject 함수의 키로 심볼을 활용하면 키의 중복을 차단할 수 있다.InjectionKey 타입을 활용하면 키에 따라 inject될 값의 타입을 미리 추론할 수 있다.Provide - Inject 패턴의 예시앱에 다크 모드 / 라이트 모드 / 시스템 테마에 알맞는 UI 색상을 적용하기 위해..

지난 프로젝트를 회고하며 부족했던 점들을 돌아봤을 때, 새로운 서비스를 추가할 때마다 기존 코드를 복사 - 붙여넣기 후 새로운 프로젝트를 시작하는 것에 좋지 않은 경험을 느꼈던 것 같다. 어떤 경로로 진입했을 때 어떤 페이지를 렌더할지 설정하는 modules/[모듈명]/route.ts 를 작성하는 상황을 예로 들어보겠다.import type { RouteRecordRaw } from 'vue-router';export const accountRoutes: RouteRecordRaw[] = [];accountRoutes.push({ path: '/account/signUp', name: 'accountSignup', component: () => import('@/pages/account/Accoun..

컨텐츠로 수익을 창출할 수 있는 시대가 되면서 미디어에 광고를 부착하는 것이 흔한 광경이 되었는데요,여러 광고 유형들 중에서도 제 3의 페이지를 방문하도록 유도하는 형태가 점점 많이 보이는 것 같아요. 그런데 갑자기 광고팀에서 우리의 플랫폼에도 방문형 광고 기능을 추가해달라고 요청하면 어떻게 해야 할까요? (안된다고 누워야겠죠?)이런 불상사를 대비하기 위해 오늘은 간단한 형태의 방문형 광고를 만들어 보겠습니다.🔔 필요한 코드는 아래 링크에 미리 준비해 두었어요!https://github.com/C17AN/page-visibility-demo GitHub - C17AN/page-visibility-demoContribute to C17AN/page-visibility-demo development by ..