즐겁게, 코드

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

웹 서비스를 사용하다 보면 때때로 '이 기능은 어떻게 구현한 걸까?' 라는 의문이 들 때가 있지 않나요? 저는 최근 인스타그램을 사용하다가 "내가 올린 게시물에 좋아요가 달리면, 어떻게 실시간으로 알림이 오는 걸까?" 라는 궁금증을 가지게 되었는데요, 오늘 다룰 Server-Sent Event (SSE) 라는 키워드가 약간의 해답이 되었던 것 같아요. 그런데 ‘서버에서 보내는 이벤트’ 라는 명칭만 들어서는 이게 어떤 기술인지 금방 알아차리기 어려울 수 있는데요,Server-Sent Event에 대해 더 이해할 수 있도록 이번 글을 작성해 보았습니다.목차Server-Sent Event란?Server-Sent Event 구현하기SSE를 응용해 친구 초대 알람 만들어보기1. Server-Sent Event (..

TL;DR 절대 경로 import를 활용하기 import 정렬 기준을 적용하기 사용하지 않는 패키지를 제거하기 프론트엔드 개발을 경험해보신 분이라면, 분명 한번쯤은 정돈되지 않은 import 코드 영역을 보며 아쉬움을 느꼈던 경험이 있을 거에요. import React, { createContext, useEffect, useState } from "react"; //Global Style import GlobalStyle from "./components/GlobalStyle"; //Import Pages import About from "./pages/About"; import Group from "./pages/Group"; import Nav from "./components/Nav/Nav"; i..

TL;DR esbuild는 정말 빠른 도구지만, 실제 환경에서 웹팩을 대체하기에는 아직은 시간이 더 필요할 것 같다. 웹 프론트엔드 분야를 학습해보신 분들이라면 한번쯤은 "이제 웹팩이 뭔지 공부해볼까?" 했다가, 복잡한 웹팩 설정과 플러그인들로 인해 좌절된 적이 있을 것입니다. 이번 글에서는 웹팩을 언젠가는 대체할 가능성이 있는 차세대 번들러, esbuild를 알아보며 느낀 점을 가볍게 적어보려 합니다. 이게 가능하다고? : esbuild의 번들링 속도 esbuild는 go로 만들어진 차세대 번들러로, 공식 홈페이지 의 대문에서부터 기존의 도구들과는 차원이 다른 번들링 속도를 어필합니다. esbuild의 큰 장점은 기존의 주류 번들러인 Webpack 5와 비교했을 때 압도적인 퍼포먼스를 보여준다는 점과,..