jonbeo 님의 블로그

Git은 단순한 버전 관리 도구가 아니라,시간을 되돌리고, 수정 내역을 재정렬하고, 다른 브랜치에서 필요한 커밋만 뽑아올 수 있는 아주 강력한 시스템입니다.이번엔 실무에서 자주 쓰이는 3대 명령어를 깔끔하게 정리해보겠습니다 👇🌱 1. git rebase – 커밋 이력 정리의 왕✅ 개념rebase는 커밋을 다른 브랜치 위로 옮겨 붙이는 명령입니다.즉, 브랜치의 시작점을 새로 정리해서 커밋 히스토리를 깔끔하게 만듭니다.📌 예시 # main 브랜치 최신 커밋으로 feature 브랜치 재배치git checkout featuregit rebase main 👉 결과:main의 최신 커밋 이후에 feature 커밋들이 재정렬됨. 📌 주의: 이미 공유된 브랜치(rebase 후 push) 는 충돌을 유발할 수 ..

VS Code는 기본 상태로도 훌륭하지만,필요한 확장 프로그램을 잘 설치하면 생산성, 코드 품질, 디자인 감각까지 모두 향상됩니다.2025년 기준으로 실무 프론트엔드 개발자들이 가장 많이 쓰는 플러그인 10가지를 소개합니다 👇⚡ 1. ESLint🧠 코드 품질 관리 필수자바스크립트 문법, 포맷 오류 자동 검출npm install eslint --save-dev.eslintrc 설정으로 팀 코드 스타일 통일📌 추천 조합 → Prettier + ESLint🎨 2. Prettier – Code Formatter🖋️ 코드 자동 정렬저장 시 자동으로 코드 포맷팅들여쓰기, 세미콜론, 따옴표 통일formatOnSave: true로 설정🧩 3. Path Intellisense🔗 경로 자동 완성import 경..

**CI/CD (Continuous Integration / Continuous Deployment)**는개발자가 코드를 push하면 자동으로 빌드/테스트/배포까지 처리하는 자동화 프로세스입니다.GitHub Actions는 GitHub에서 제공하는 무료 워크플로우 도구로,코드 변경 → 테스트 → 빌드 → 배포 과정을 자동화할 수 있습니다.📌 1. GitHub Actions 기본 구조프로젝트 루트에 .github/workflows/ci.yml 파일 생성 name: CI Pipelineon: push: branches: [ main ] # main 브랜치 푸시 시 실행jobs: build: runs-on: ubuntu-latest steps: - name: Checkout Re..

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