jonbeo 님의 블로그

혼자 코딩할 때는 main 브랜치 하나로도 충분합니다.하지만 여러 명이 함께 개발한다면, 브랜치를 어떻게 나눌지 전략이 정말 중요해져요.이번 글에서는 대표적인 두 가지 협업 브랜치 전략👉 Git Flow👉 GitHub Flow를 예시와 함께 비교해보겠습니다. ✅ 브랜치 전략이란?브랜치 전략은 팀원들이 어떤 기준으로 브랜치를 만들고, 병합하고, 배포할지 정해두는 개발 룰입니다.잘 정리된 전략은 개발 흐름을 명확하게 만들어주고충돌, 꼬임, 실수 배포를 줄여줍니다. 🧭 전략 1. Git FlowGit Flow는 기능, 릴리즈, 핫픽스를 명확히 구분하는 전통적인 워크플로우입니다.복잡하지만 대규모 프로젝트에서 안정성을 높이기 좋습니다.🧩 브랜치 구성브랜치역할main최종 배포 버전develop개발 버전fea..

디자인이 깔끔한 로그인 페이지를 만들고 싶은데 CSS가 너무 어렵다고 느끼셨다면,이번 포스팅이 딱입니다!Tailwind CSS를 활용하면 복잡한 CSS 없이도 빠르게 예쁜 UI를 만들 수 있어요.이번에는 React + Tailwind 조합으로 로그인 폼을 직접 만드는 실습을 함께 해보겠습니다. ✅ 사전 준비1. React 프로젝트 생성npx create-react-app login-formcd login-form2. Tailwind 설치 및 설정npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p tailwind.config.js 수정:content: ["./src/**/*.{js,jsx,ts,tsx}"] src/index.css ..

React로 프로젝트를 만들다 보면 점점 커지는 컴포넌트,복붙으로 뒤죽박죽 된 코드들...관리하기도 힘들고, 다른 사람이 보기에도 난감한 구조가 되기 쉽습니다.이럴 때 필요한 게 바로 **‘리팩토링(Refactoring)’**입니다!이번 포스팅에서는 실무에서도 자주 쓰는 컴포넌트 리팩토링 꿀팁 5가지를 예제와 함께 소개해드리겠습니다. ✅ 꿀팁 1. UI 쪼개기 (컴포넌트 분리)하나의 컴포넌트에 300줄… 이건 절대 안 됩니다 😱UI 단위로 잘라서 컴포넌트를 쪼개면 관리도 쉬워지고 재사용도 가능해집니다.💡 Beforefunction Profile() { return ( 이름 설명 팔로우 );}💡 After function Profile() { ..

React 컴포넌트끼리 데이터를 주고받는 기본 방식은 props입니다.하지만 props를 너무 많이 전달하면 코드가 복잡해지기 쉬워요.이럴 때 등장하는 구조가 바로 Context API입니다.이 포스팅에서는 props와 Context가 어떤 차이가 있고언제 어떤 걸 쓰는 게 좋은지 흐름도와 예제 중심으로 이해하기 쉽게 알려드릴게요. ✅ 기본 개념 요약항목 Props Context API 목적부모 → 자식 데이터 전달전역 상태 공유사용 대상단일/소수의 컴포넌트여러 컴포넌트 간 데이터 공유단점중첩이 깊으면 props drilling 발생구조 파악이 어려워질 수 있음장점명시적인 데이터 전달전역 접근 가능, props 생략 가능 1️⃣ Props로 상태 전달하는 기본 예제function Parent() { ..

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와 같이 ..