jonbeo 님의 블로그

는 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 기준단점: 중..

웹사이트의 성능은 곧 **사용자 경험(UX)**과 SEO 순위로 직결됩니다.Lighthouse는 크롬 개발자 도구에 내장되어 있으며, 성능을 수치화하고 구체적인 개선 방법까지 제안해 줍니다.🧩 1. Lighthouse 실행 방법크롬 브라우저 열기 → F12 (개발자 도구)상단 탭에서 Lighthouse 선택Performance / Accessibility / Best Practices / SEO / PWA 항목 선택Analyze page load 클릭 → 리포트 생성📌 또는 PageSpeed Insights에서 온라인으로도 테스트 가능📊 2. Lighthouse 주요 지표지표설명권장 기준FCP (First Contentful Paint)최초 콘텐츠 표시 시간1.8초 이내LCP (Largest Con..

Node.js는 단순한 런타임 환경을 넘어서, npm 생태계 덕분에 강력한 개발 플랫폼으로 자리 잡았습니다.npm은 전 세계 개발자들이 만든 모듈을 쉽게 설치, 공유, 관리할 수 있게 해주는 도구입니다.이번 포스팅에서는 npm 기초부터 실무에서 자주 쓰는 패키지 관리법까지 정리합니다.🧩 1. npm이란?Node Package Manager의 약자Node.js 설치 시 기본 포함패키지(라이브러리, 모듈)를 설치하고 관리하는 도구JavaScript/TypeScript 프로젝트에서 사실상 표준📌 2. npm 기본 명령어 # 패키지 초기화npm init -y# 패키지 설치npm install 패키지명# 개발용(Dev Dependencies) 패키지 설치npm install 패키지명 --save-dev# 전역..

애니메이션은 단순한 시각 효과를 넘어서 사용자 상호작용과 브랜드 아이덴티티를 표현하는 중요한 요소입니다.하지만 구현 방식에 따라 성능, 유지보수, 확장성에서 큰 차이가 발생합니다.🧩 1. CSS 애니메이션✅ 특징transition, @keyframes을 활용브라우저 최적화 지원 → GPU 가속 덕분에 부드럽게 동작간단한 효과에 적합 (페이드 인/아웃, 슬라이드 등)📌 예시: 버튼 호버 애니메이션 button { background: #007bff; transition: background 0.3s ease;}button:hover { background: #0056b3;}📌 예시: 로딩 애니메이션 @keyframes spin { to { transform: rotate(360deg); }}...

리액트는 상태가 변경되면 관련된 컴포넌트를 다시 렌더링하는 방식으로 동작합니다.하지만 이 과정에서 필요 없는 컴포넌트까지 렌더링되면 성능 저하로 이어지죠.이를 방지하기 위해 메모이제이션(Memoization) 기법을 활용합니다.🧠 1. React.memo컴포넌트 자체를 메모이제이션하여 불필요한 리렌더링 방지 import React from "react";const Child = React.memo(({ value }) => { console.log("렌더링됨:", value); return {value};});export default Child;props가 바뀌지 않으면 다시 렌더링하지 않음PureComponent와 비슷한 개념📌 주의: props가 객체/배열일 경우 참조가 바뀌면 여전히 리렌더..