jonbeo 님의 블로그

JavaScript는 싱글 스레드 언어입니다.그런데도 여러 작업을 동시에 처리하는 것처럼 보이는 이유는 이벤트 루프(Event Loop) 덕분입니다.📌 1. Call Stack (콜 스택)자바스크립트 엔진이 실행하는 함수 호출 기록 저장소LIFO(Last In First Out) 구조함수 실행 → 스택에 push, 종료 → pop function a() { console.log("a"); }function b() { a(); console.log("b"); }b();// 실행 순서: a → b📌 2. Web APIs & Task Queue브라우저는 JS 엔진 외에도 **Web APIs (DOM, Timer, HTTP 요청)**를 제공합니다.비동기 함수(setTimeout, fetch)는 Web API..

자바스크립트에서 객체를 다룰 때 가장 흔한 에러는 “Cannot read property of undefined” 같은 오류입니다.이를 해결하기 위해 나온 문법이 Optional Chaining이며,또한 값이 null이나 undefined일 때만 기본값을 지정하는 Nullish Coalescing이 함께 자주 사용됩니다.🧩 1. Optional Chaining (?.)객체 프로퍼티 접근 시 null 또는 undefined가 나오면 에러 대신 undefined를 반환 const user = { profile: { name: "홍길동" }};console.log(user.profile?.name); // "홍길동"console.log(user.address?.city); // undefined (..

기존 **미디어 쿼리(@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, ..