즐겁게, 코드

일반인들은 마우스로 원하는 링크나 버튼을 눌러 웹 페이지를 자유롭게 탐색할 수 있지만, 시각장애인들은 주로 키보드의 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 ..

웹 서비스를 사용하다 보면 때때로 '이 기능은 어떻게 구현한 걸까?' 라는 의문이 들 때가 있지 않나요? 저는 최근 인스타그램을 사용하다가 "내가 올린 게시물에 좋아요가 달리면, 어떻게 실시간으로 알림이 오는 걸까?" 라는 궁금증을 가지게 되었는데요, 오늘 다룰 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..