즐겁게, 코드

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