jonbeo 님의 블로그

기존 **미디어 쿼리(@media)**는 브라우저 전체 뷰포트 크기를 기준으로 반응형 디자인을 적용합니다.하지만 컴포넌트 기반 UI(React, Vue, Angular)에서는 부모 컨테이너 크기에 따라 반응형 스타일이 필요합니다.이를 해결해주는 최신 기능이 바로 @container입니다.📌 1. 기본 문법 @container (min-width: 600px) { .card { flex-direction: row; }} 👉 부모 컨테이너의 너비가 600px 이상일 때 .card 스타일 적용📌 2. 컨테이너 선언컨테이너 쿼리를 쓰려면 부모 요소에 container-type을 지정해야 합니다. .wrapper { container-type: inline-size; /* width 기준 */}?..

:has()는 흔히 **“부모 선택자”**로 불리며, CSS에서 드디어 상위 요소를 조건부로 스타일링할 수 있게 해줍니다.기존에는 순수 CSS만으로 불가능했던 패턴을 해결해주는 강력한 기능입니다.📌 1. 기본 문법 A:has(B) { ... } 👉 A 요소가 B를 포함하고 있다면 스타일 적용📌 2. 폼 검증 스타일링 /* input이 비어있으면 빨간 테두리 */form:has(input:invalid) { border: 2px solid red;} 📌 기존에는 JS로 처리해야 했던 폼 상태 스타일링이 가능📌 3. 드롭다운 메뉴 제어 .dropdown:has(:hover) .menu { display: block;} 📌 부모에 :hover가 있으면 자식 메뉴 표시📌 4. 카드 UI – 버튼..

웹 보안은 단순한 기술이 아니라 서비스 신뢰성과 사용자 보호의 핵심입니다.특히 실무에서 자주 접하는 HTTPS, CORS, CSRF, XSS는 반드시 이해해야 하는 개념입니다.🟢 1. HTTPS (보안 프로토콜)HTTP + SSL/TLS 암호화데이터 전송 중 도청/변조 방지SEO에도 유리 (구글은 HTTPS 사이트를 우선 랭킹)📌 실무 팁Let’s Encrypt 무료 인증서 활용서버/클라우드 배포 시 기본적으로 HTTPS 적용🔵 2. CORS (Cross-Origin Resource Sharing)브라우저의 보안 정책: 다른 도메인 요청 차단예: https://myapp.com → https://api.other.com 요청 시 제한📌 해결 방법서버에서 Access-Control-Allow-Ori..

데이터를 직관적으로 보여주려면 시각화 도구가 필요합니다.Chart.js는 가볍고 직관적인 API를 제공하여,막대 그래프, 선 그래프, 원형 차트, 레이더 차트 등 다양한 차트를 쉽게 구현할 수 있습니다.⚙️ 1. 설치 및 기본 세팅설치 npm install chart.jsHTML 예시 JS 예시 import { Chart } from "chart.js";const ctx = document.getElementById("myChart").getContext("2d");new Chart(ctx, { type: "bar", // 차트 타입 data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple"], datasets: [{ label: "..

는 HTML5에서 추가된 태그로, 픽셀 단위의 그래픽 처리를 지원합니다.자바스크립트와 함께 사용해야만 그림을 그릴 수 있습니다. const canvas = document.getElementById("myCanvas");const ctx = canvas.getContext("2d"); // 2D 컨텍스트⬛ 1. 사각형 그리기 // 채워진 사각형ctx.fillStyle = "blue";ctx.fillRect(50, 50, 100, 100);// 테두리 사각형ctx.strokeStyle = "red";ctx.strokeRect(200, 50, 100, 100);// 사각형 지우기ctx.clearRect(80, 80, 40, 40);⚪ 2. 원(원형) 그리기 ctx.beginPath();ctx.arc(150..

웹 접근성을 고려하지 않은 UI는 시각장애인, 키보드 사용자 등에게 큰 불편을 줍니다.이를 해결하기 위해 ARIA 속성과 포커스 제어를 올바르게 적용해야 합니다.이번 포스팅에서는 실무에서 가장 많이 쓰이는 세 가지 UI 패턴을 정리해보겠습니다.🪟 1. 모달(Dialog)문제점모달 열렸을 때 배경 요소까지 포커스가 이동스크린리더가 모달임을 인식하지 못함✅ 접근성 패턴 회원가입 정보를 입력해주세요. X 📌 포인트role="dialog" + aria-modal="true"모달 열릴 때 첫 번째 포커스 이동닫을 때 원래 버튼으로 포커스 복귀배경에는 aria-hidden="true" 적용⬇️ 2. 드롭다운 메뉴문제점div만으로 메뉴 구성 → 스크린리더 인식 불가키보드 화살표로 메뉴 이동 불가능✅ 접근성..

React의 상태 관리는 프로젝트 규모와 요구사항에 따라 달라집니다.단순히 useState로 충분한 경우도 있지만, 전역 상태 관리가 필요해지면 선택지가 다양해집니다.이번 포스팅에서는 대표적인 세 가지 접근법을 살펴봅니다.🧩 1. Context APIReact 기본 제공 전역 상태 관리 도구✅ 특징React에 내장 → 별도 라이브러리 설치 불필요createContext + useContext 사용전역 상태를 Provider로 감싸서 하위 컴포넌트에서 접근 가능📌 예시 const ThemeContext = React.createContext();function App() { return ( );}function Toolbar() { const theme = React.us..

TypeScript(이하 TS)는 **JavaScript(이하 JS)의 상위 집합(Superset)**입니다.즉, JS 문법을 그대로 사용하면서 타입 시스템을 추가한 언어입니다.👉 "JS는 자유롭고, TS는 안전하다" 라고 이해하면 쉽습니다.📌 1. TypeScript를 쓰는 이유✅ 타입 안정성: 런타임 에러를 컴파일 단계에서 방지✅ 코드 가독성 & 유지보수성: 협업에서 타입이 문서 역할✅ IDE 지원 극대화: 자동완성(IntelliSense) 강화✅ 대규모 프로젝트 필수: 규모가 커질수록 버그 줄이고 개발 속도 ↑📌 2. JavaScript vs TypeScript 비교JS 예시 (타입 자유로움) function add(a, b) { return a + b;}console.log(add(10, ..

기존의 웹사이트는 URL 변경 시 서버에서 새로운 페이지를 로드하는 방식이었습니다.하지만 SPA에서는 실제 HTML은 하나(index.html)만 존재하고,페이지 전환은 자바스크립트로 UI를 바꿔주는 방식으로 이루어집니다. 👉 이 과정을 쉽게 구현해주는 게 React Router입니다.⚙️ 1. React Router 설치 npm install react-router-dom 📌 2. 기본 구조 import { BrowserRouter, Routes, Route } from "react-router-dom";import Home from "./pages/Home";import About from "./pages/About";function App() { return ( ..

CSS에서 크기 단위를 어떻게 쓰느냐에 따라 반응형 디자인, 접근성, 유지보수성이 크게 달라집니다.이번 포스팅에서는 가장 많이 쓰이는 단위들을 비교하고, 실무에서의 활용 팁을 알려드립니다.🧩 1. 절대 단위 vs 상대 단위절대 단위: px (픽셀 기준 → 고정 크기)상대 단위: em, rem, %, vh, vw (상황에 따라 달라짐)📌 2. px (픽셀) .box { font-size: 16px; }고정 크기 (화면 크기와 무관)장점: 직관적, 예측 가능단점: 반응형/접근성에서 불리📌 3. em (부모 요소 기준) .parent { font-size: 16px; }.child { font-size: 2em; } /* 부모의 16px × 2 = 32px */부모 요소의 font-size 기준단점: 중..