jonbeo 님의 블로그

React 프로젝트에서 자연스러운 애니메이션을 구현하고 싶다면CSS transition이나 GSAP보다 먼저 고려해야 할 라이브러리, 바로 Framer Motion입니다. Next.js, CRA, Remix 등 어떤 React 환경에서도 쉽게 동작하고,상태 변화 → 애니메이션 전환을 아주 직관적으로 다룰 수 있죠.⚙️ 1. 설치 및 기본 세팅 npm install framer-motion 기본 Import: import { motion } from "framer-motion";🧩 2. 기본 애니메이션 예제 import { motion } from "framer-motion";export default function BasicBox() { return ( );} 📌 실행 흐름initial:..

다크모드는 이제 선택이 아니라 기본 옵션이 되었습니다.스마트폰, OS, 웹브라우저까지 모두 다크모드를 지원하죠. ✅ 이번 포스팅에서는CSS 변수(:root)미디어 쿼리(prefers-color-scheme)JS 토글 버튼을 조합해 실무형 다크모드 시스템을 완성해보겠습니다 ⚙️🧱 1. CSS 변수 기반 색상 시스템 만들기 :root { --bg-color: #ffffff; --text-color: #222222; --accent-color: #007bff;}body { background-color: var(--bg-color); color: var(--text-color);}a { color: var(--accent-color);} 📌 장점색상 교체가 단 1줄로 가능다크모드뿐 아니라 다른 ..

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;..

자바스크립트에서 객체를 다룰 때 가장 흔한 에러는 “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 (..

: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 – 버튼..

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, ..

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# 전역..