jonbeo 님의 블로그

코드를 푸시했을 때 자동으로 테스트가 실행되고,코드 리뷰 후 자동으로 배포까지 된다면…?그걸 가능하게 해주는 도구가 바로 GitHub Actions입니다!이번 글에서는GitHub Actions가 무엇인지초보자가 바로 써볼 수 있는 실습 예제기본 구조와 자주 쓰는 활용법을 한 번에 정리해보겠습니다 😊 ✅ GitHub Actions란?GitHub 저장소에서 CI/CD 자동화를 가능하게 해주는 기능입니다.코드가 푸시되었을 때, PR이 열렸을 때, 매일 정해진 시간에 등 다양한 트리거로자동으로 테스트, 빌드, 배포, 알림 등을 처리할 수 있어요. 🧱 GitHub Actions 구조 이해하기Workflow하나의 자동화 작업 전체를 정의하는 단위.github/workflows 폴더에 .yml 파일로 저장됨주요 ..

Git을 쓰다 보면 merge는 익숙한데,rebase는 뭔가 무섭고 어렵게 느껴지죠?하지만 rebase를 제대로 알면더 깔끔하고 일직선 같은 Git 히스토리를 만들 수 있습니다.이번 글에서는 rebase의 개념부터 실습 예제,그리고 merge와 비교한 시각적 흐름도까지 함께 정리해보겠습니다. ✅ 기본 개념 정리: merge vs rebase항목 merge rebase 히스토리브랜치 흐름을 보존히스토리를 재작성커밋 기록병합 커밋(merge commit) 생성병합 커밋 없이 재배치사용 용도협업 히스토리 보존깔끔한 커밋 라인 유지협업 안정성안정적신중히 사용해야 함 1️⃣ 실전 예제 흐름git checkout featuregit rebase main 위 명령어의 뜻은:“feature 브랜치의 커밋들을, mai..

Git으로 작업하다 보면 한 번쯤은 이런 생각을 하게 됩니다:“아... 이전 상태로 돌리고 싶다...”“방금 커밋 잘못한 것 같은데?”“코드는 지우고 싶은데, 나중에 다시 보고 싶다…”이럴 때 사용하는 명령어들이 바로git reset, git revert, git stash 입니다!이번 포스팅에서는 각 명령어의 차이점, 사용 시점, 주의할 점까지 예제를 통해 깔끔하게 정리해드리겠습니다. 🧯 1. git reset - 커밋을 과거로 되돌리기 (히스토리 변경)git reset --hard [커밋 해시]특정 시점으로 되돌리고, 그 이후의 커밋은 모두 제거--soft: 커밋만 되돌림 (파일은 그대로)--mixed: 인덱스까지 초기화--hard: 모든 파일 상태까지 초기화 (주의! 되돌릴 수 없음)✅ 언제 쓰나..

혼자 코딩할 때는 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 버튼 클릭이제 브라우저..