jonbeo 님의 블로그

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

1. 자주 묻는 질문 (FAQ)Q1. VS Code는 무료인가요?👉 완전히 무료입니다! 오픈소스 기반이라 기업에서도 사용 가능해요.Q2. 터미널이 안 열려요.👉 Ctrl + ~ 단축키 확인!메뉴에서 [터미널 > 새 터미널] 클릭해보세요.그래도 안 될 땐 VS Code 재시작 또는 설정 초기화.Q3. 확장 프로그램이 설치가 안 돼요.👉 인터넷 연결 확인 → 좌측 메뉴의 Extensions 아이콘 클릭 → 로그 확인경우에 따라 방화벽이 막고 있을 수도 있어요.Q4. 테마가 갑자기 바뀌었어요.👉 [파일 > 기본 설정 > 테마]에서 확인 및 재설정 가능Q5. 디버깅 시작했는데 멈추질 않아요.👉 Breakpoint가 없는 경우 전체 코드가 실행됨디버깅 중지: Shift + F5 2. VS Code 실전 ..