jonbeo 님의 블로그

웹 접근성 ✅ 키보드 네비게이션 (Tab, Focus, Role, ARIA)

사용자는 마우스뿐 아니라 키보드(Tab, Enter, Space),심지어 스크린리더로도 웹사이트를 탐색합니다. 하지만 HTML 구조가 잘못되어 있거나,포커스가 사라지는 UX를 제공한다면 접근성 점수는 0점 😭 이번 포스팅에서는 실무에서 자주 쓰이는키보드 네비게이션 UX 설계 원칙과 실무 예제를 정리합니다.⌨️ 1. Tab 키 순서 제어모든 인터랙티브 요소는 기본적으로 Tab 키로 접근 가능합니다. 로그인회원가입 📌 Tab 순서는 HTML 구조 순서에 따릅니다.따라서 DOM 순서 = 시각적 순서로 유지하는 것이 중요합니다.⚙️ tabindex 속성 포커스 가능프로그램만 포커스 가능 값 설명 0Tab 순서에 포함됨-1Tab으로는 접근 불가 (스크립트로만 접근)📌 tabindex="0"은 커스텀 UI ..

CSS 레이아웃 Flex와 Grid 혼합 설계 실무 패턴

CSS Flexbox는 일차원(1D) 정렬,CSS Grid는 이차원(2D) 배치를 담당합니다. ✅ Grid → 페이지 전체 레이아웃✅ Flex → 내부 구성 & 정렬 이 두 가지를 적절히 섞으면“반응형 + 정렬 + 가독성 + 유지보수성”을 모두 잡을 수 있습니다 💪📐 1. Grid로 전체 구조, Flex로 내부 정렬 Logo Menu Main Content Footer .layout { display: grid; grid-template-rows: auto 1fr auto; height: 100vh;}.header-inner { display: flex; justify-content: space-between; align-items: center..

요즘 웹사이트는 모바일 사용률이 70% 이상입니다.그래서 이제는 “데스크탑 기준으로 줄여가는 방식”이 아니라👉 모바일 기준으로 확장해가는 설계 (Mobile First) 가 표준입니다.🌱 1. 모바일 퍼스트란?모바일 퍼스트(Mobile First) 는 디자인과 개발을 “가장 작은 화면”에서 시작하여,점점 화면이 커질 때마다 스타일을 확장하는 접근 방식입니다. 📌 핵심 개념:❌ “큰 화면을 줄이는 것” → ✅ “작은 화면을 확장하는 것”📏 2. 기본 단위 설계 – 뷰포트 기준 html { font-size: 16px; /* 기준 단위 */}.container { width: 100%; max-width: 1200px; margin: 0 auto;} 📌 모바일에서는 항상 100% 기반 레이아..

CSS Grid는 2차원(행 + 열) 레이아웃을 완벽하게 제어할 수 있는 강력한 도구입니다.이 포스팅에서는 단순한 정렬을 넘어서, 실무에서 자주 쓰는 패턴 예시를 소개해봅니다.🧱 1. 기본 레이아웃 패턴 (Header / Main / Aside / Footer) Header Sidebar Main Footer​ .grid-layout { display: grid; grid-template-areas: "header header" "aside main" "footer footer"; grid-template-columns: 200px 1fr; grid-template-rows: 80px 1fr 60px; gap: 10px;}header { grid-area: header;..

기존 pages/ 라우터와 달리, App Router는 디렉터리 구조 자체가 라우팅 규칙이 됩니다.app/ 디렉토리 안의 폴더마다 페이지, 레이아웃, 로딩, 에러 처리, 메타데이터를 담당하는 파일이 존재하죠.🧩 1. App Router 기본 구조 app/ ├─ layout.tsx # 공통 레이아웃 ├─ page.tsx # 루트 페이지 ├─ loading.tsx # 로딩 상태 ├─ error.tsx # 에러 페이지 ├─ about/ │ ├─ page.tsx # /about │ ├─ layout.tsx # about 전용 레이아웃 │ ├─ loading.tsx # about 로딩 UI │ └─ error.ts..

오늘은 자바스크립트(JavaScript)를 활용한 시간 제어 함수인setTimeout과 setInterval에 대해 자세히 알아보겠습니다.이 두 함수는 웹 개발 실무에서 매우 자주 사용되며,타이머 관련 기능을 구현할 때 유용하게 활용됩니다.✅ 1. setTimeout이란?setTimeout은 일정 시간이 지난 후에 단 한 번 특정 작업을 실행하도록 예약하는 함수입니다. setTimeout(() => { console.log('3초 후에 실행됩니다!');}, 3000); 📌 위 코드는 3초(3000ms) 후에 콘솔에 메시지를 출력합니다.✅ 2. setInterval이란?setInterval은 일정 시간 간격으로 계속 반복해서 특정 작업을 실행하도록 예약하는 함수입니다. setInterval(() => ..

React로 만든 SPA(Single Page Application)는 기본적으로 클라이언트 렌더링(CSR) 방식입니다.하지만 이 방식은 SEO, 초기 로딩 속도에서 한계가 있었죠.Next.js는 이런 단점을 보완하기 위해 다양한 렌더링 옵션을 제공합니다 👇💻 1. CSR (Client-Side Rendering)📌 렌더링 위치 → 브라우저(클라이언트)📌 예시 → 순수 React 앱 (create-react-app) function App() { const [data, setData] = useState(null); useEffect(() => { fetch("/api/data").then(res => res.json()).then(setData); }, []); return {dat..

Git은 단순한 버전 관리 도구가 아니라,시간을 되돌리고, 수정 내역을 재정렬하고, 다른 브랜치에서 필요한 커밋만 뽑아올 수 있는 아주 강력한 시스템입니다.이번엔 실무에서 자주 쓰이는 3대 명령어를 깔끔하게 정리해보겠습니다 👇🌱 1. git rebase – 커밋 이력 정리의 왕✅ 개념rebase는 커밋을 다른 브랜치 위로 옮겨 붙이는 명령입니다.즉, 브랜치의 시작점을 새로 정리해서 커밋 히스토리를 깔끔하게 만듭니다.📌 예시 # main 브랜치 최신 커밋으로 feature 브랜치 재배치git checkout featuregit rebase main 👉 결과:main의 최신 커밋 이후에 feature 커밋들이 재정렬됨. 📌 주의: 이미 공유된 브랜치(rebase 후 push) 는 충돌을 유발할 수 ..

VS Code는 기본 상태로도 훌륭하지만,필요한 확장 프로그램을 잘 설치하면 생산성, 코드 품질, 디자인 감각까지 모두 향상됩니다.2025년 기준으로 실무 프론트엔드 개발자들이 가장 많이 쓰는 플러그인 10가지를 소개합니다 👇⚡ 1. ESLint🧠 코드 품질 관리 필수자바스크립트 문법, 포맷 오류 자동 검출npm install eslint --save-dev.eslintrc 설정으로 팀 코드 스타일 통일📌 추천 조합 → Prettier + ESLint🎨 2. Prettier – Code Formatter🖋️ 코드 자동 정렬저장 시 자동으로 코드 포맷팅들여쓰기, 세미콜론, 따옴표 통일formatOnSave: true로 설정🧩 3. Path Intellisense🔗 경로 자동 완성import 경..

**CI/CD (Continuous Integration / Continuous Deployment)**는개발자가 코드를 push하면 자동으로 빌드/테스트/배포까지 처리하는 자동화 프로세스입니다.GitHub Actions는 GitHub에서 제공하는 무료 워크플로우 도구로,코드 변경 → 테스트 → 빌드 → 배포 과정을 자동화할 수 있습니다.📌 1. GitHub Actions 기본 구조프로젝트 루트에 .github/workflows/ci.yml 파일 생성 name: CI Pipelineon: push: branches: [ main ] # main 브랜치 푸시 시 실행jobs: build: runs-on: ubuntu-latest steps: - name: Checkout Re..