jonbeo 님의 블로그

React에서 컴포넌트 상태를 다룰 땐 대부분 useState를 사용합니다.그런데 상태가 복잡해지면 useReducer가 더 유리할 때가 있어요.이번 글에서는 useState와 useReducer가 어떨 때 어떤 차이점이 있는지,그리고 언제 어떤 걸 써야 하는지 예제를 통해 비교해보겠습니다. ✅ useState란?가장 기본적인 상태관리 훅변수 1~2개, 간단한 숫자나 문자열 상태에 적합const [count, setCount] = useState(0); ✅ useReducer란?상태 업데이트 로직이 복잡할 때 사용여러 상태를 하나의 로직으로 관리 가능reducer 함수와 dispatch를 함께 사용const [state, dispatch] = useReducer(reducer, initialState)..

React로 SPA(Single Page Application)를 만들다 보면, 페이지 이동이 필요해집니다.이때 사용하는 도구가 바로 React Router DOM입니다.이번 포스팅에서는 2025년 기준으로 가장 많이 쓰는 버전인 v6 기준으로React Router DOM을 사용하는 방법을 기초부터 중첩 라우팅까지 간단한 예제와 함께 정리해드릴게요! ✅ React Router DOM이란? React는 기본적으로 페이지 이동 기능이 없습니다.SPA에서 URL에 따라 화면을 바꾸기 위해선 react-router-dom 패키지가 필요합니다. 1️⃣ 설치 방법npm install react-router-dom 또는 yarn 사용 시:yarn add react-router-dom 2️⃣ 기본 구성: Browse..

HTML/CSS 파일을 수정할 때마다 파일 → 브라우저 열기 → 새로고침 반복하는 거… 정말 귀찮죠? 😥그럴 땐 Live Server 확장 프로그램을 설치하면 VS Code에서 저장만 해도 브라우저가 자동으로 새로고침됩니다!이번 포스팅에서는 Live Server 설치부터 실습까지 차근차근 안내해드릴게요.HTML을 자주 다루는 분들에겐 필수입니다 💡 1️⃣ Live Server 확장 프로그램 설치하기VS Code 왼쪽 확장 탭(네모 4개 겹친 아이콘) 클릭Live Server 검색 → 설치설치만 해도 바로 사용 가능해요! 2️⃣ HTML 파일 열고 Live Server 실행하기.html 파일을 열기우클릭 → Open with Live Server 클릭또는 우측 하단 Go Live 버튼 클릭이제 브라우저..

Visual Studio Code(이하 VS Code)는 가볍고 빠르면서도 자유롭게 커스터마이징할 수 있는 게 최대 장점입니다.자주 쓰는 단축키를 바꾸거나, 나만의 코드 스니펫을 만들어두면 개발 생산성이 확 올라가요!이번 포스팅에서는 다음 세 가지를 초보자도 따라하기 쉽게 설명드릴게요:테마 변경단축키 바꾸기나만의 코드 스니펫 만들기 🎨 1. VS Code 테마 바꾸기 (다크 모드부터 레트로 테마까지!)Ctrl + K → Ctrl + T 누르기 (또는 상단 메뉴 → 보기 → 명령 팔레트)Color Theme 입력 후 선택기본 테마 또는 확장 프로그램으로 테마 설치 가능✅ 인기 테마 추천:One Dark Pro (모던하고 세련됨)Dracula Official (감성 다크 테마)Night Owl (눈에 편한..

코딩을 하다 보면, 들쑥날쑥한 들여쓰기나 일관성 없는 따옴표 때문에 코드가 지저분해지는 경우가 많습니다.이럴 때 Prettier와 ESLint를 함께 설정하면, 저장만 해도 자동으로 코드가 예쁘게 정리됩니다.이번 글에서는 Prettier + ESLint를 VS Code에 통합 설정하는 방법을 단계별로 차근차근 알려드릴게요.웹 개발자라면 무조건 세팅해두면 좋은 조합입니다! ✅ Prettier vs ESLint? 차이점 먼저 짚고 가요!Prettier: 들여쓰기, 줄바꿈, 세미콜론 등 “코드 스타일”을 정리해줌ESLint: 문법 오류, 불필요한 변수 등 “문법 검사와 규칙 위반”을 알려줌이 둘을 함께 쓰면 예쁘고 안정적인 코드를 작성할 수 있어요. 1️⃣ 확장 프로그램 설치하기 VS Code 좌측 확장 탭에..

Visual Studio Code(이하 VS Code)의 가장 큰 장점 중 하나는 **확장 프로그램(Extensions)**을 설치해서 내 개발 환경을 마음껏 꾸밀 수 있다는 점입니다.하지만 확장 프로그램이 너무 많아서 어떤 걸 써야 할지 모르겠는 경우도 많죠.그래서 오늘은 2025년 기준으로 많은 개발자들이 실제로 사용하는 인기 확장 프로그램 TOP 10을 소개해드릴게요!웹 개발, 코드 정리, 생산성 향상까지 전방위로 도움을 줄 확장 프로그램만 골랐습니다 💡 ✅ 1. Prettier – Code formatter역할: 코드 정리 자동화 (자동 줄맞춤, 들여쓰기 등)특히 HTML/CSS/JS 작성할 때 강력 추천! ✅ 2. ESLint역할: 자바스크립트 문법 오류 및 스타일 검사Prettier와 같이 ..

Visual Studio Code(이하 VS Code)는 단순한 코드 편집기를 넘어서, Git과 GitHub도 통합해서 쓸 수 있는 강력한 툴입니다.특히 Git 명령어가 아직 익숙하지 않은 초보자 분들에게는 VS Code에서 버튼 클릭만으로 GitHub에 연결하고 푸시하는 과정이 정말 편리하죠.이 글에서는 Git과 GitHub 계정이 이미 준비된 상태에서, VS Code로 어떤 설정을 하면 바로 버전 관리를 시작할 수 있는지 단계별로 알려드릴게요! 1️⃣ VS Code에 Git이 연동되어 있는지 확인하기VS Code는 설치만 하면 자동으로 Git을 감지하지만, Git이 PC에 먼저 설치되어 있어야 합니다. ✅ Git이 설치되어 있는지 확인하는 방법:VS Code 왼쪽 하단에 소스 제어 아이콘이 보이는지 ..

이제까지 배운 position, flex, z-index, 반응형 레이아웃 등을 한꺼번에 실전에서 적용해볼 시간입니다.이번 포스팅에서는 간단한 카드형 UI를 하나 따라 만들어보며,CSS 구조를 어떻게 잡는지, 어떤 순서로 스타일링하는지 복습해보겠습니다. ✅ 목표 UI 구성이번에 만들 UI는 아래와 같은 구조입니다:카드 컨테이너카드 안에는 썸네일 이미지, 제목, 설명, 버튼이 포함됨 ✅ HTML 구조 먼저 만들기 제목입니다 설명 텍스트가 들어갑니다. 자세히 보기 ✅ CSS로 스타일 입히기 .card { width: 300px; border: 1px solid #ddd; border-radius: 12px; overflow: hidden; box-shadow: 0 4px..

웹사이트를 만들다 보면 화면 크기에 따라 메뉴 구조를 바꿔야 할 때가 있습니다.예를 들어, PC 화면에서는 가로로 펼쳐진 메뉴를 보여주고모바일 화면에서는 햄버거 버튼을 눌러야 메뉴가 펼쳐지도록 만드는 방식이죠.이번 포스팅에서는 HTML과 CSS만으로간단한 반응형 네비게이션을 만드는 방법을 알아보겠습니다.✅ 기본 구조 설계 (HTML) MySite 홈 소개 서비스 문의 ☰ ✅ 기본 스타일링 (CSS).nav { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background: #333; color: white;}.menu { display: flex..

단독으로 사용해도 강력한 transition과 animation하지만 두 속성을 잘 조합하면 더 유연하고 세련된 UI 연출이 가능해집니다.이번 포스팅에서는 실제로 많이 쓰이는 예제를 통해 두 속성을 같이 활용하는 팁을 알려드리겠습니다. ✅ 기본 개념 먼저 짚고 가기transition→ 사용자의 행동에 반응하는 애니메이션 (hover, focus 등)animation→ 페이지 로딩과 동시에 자동으로 동작하는 애니메이션👉 두 속성은 동시에 선언 가능하지만, 작동 조건이 다르기 때문에 구분해서 써야 해요 ✅ 예제: 페이지 진입 시 fade-in + hover 시 scale-up.card { animation: fadeIn 1s ease-in; transition: transform 0.3s ease;}...