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)는 가볍고 빠르면서도 자유롭게 커스터마이징할 수 있는 게 최대 장점입니다.자주 쓰는 단축키를 바꾸거나, 나만의 코드 스니펫을 만들어두면 개발 생산성이 확 올라가요!이번 포스팅에서는 다음 세 가지를 초보자도 따라하기 쉽게 설명드릴게요:테마 변경단축키 바꾸기나만의 코드 스니펫 만들기 🎨 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 왼쪽 하단에 소스 제어 아이콘이 보이는지 ..

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

1. 디버깅(Debugging)이란?디버깅은 프로그램 속의 오류(Bug)를 찾아 고치는 과정이에요.VS Code는 아주 강력한 디버깅 기능을 갖추고 있어서, 오류 위치를 직접 확인하고 변수 상태도 볼 수 있어요.2. VS Code에서 디버깅 시작하기왼쪽 사이드바의 벌레 아이콘(🐞) 또는 실행 및 디버그 클릭→ 언어에 맞는 디버거가 없으면 VS Code가 자동으로 설치 안내를 해줘요.3. launch.json 파일 설정 (자동 생성 가능)디버깅 환경을 세팅하면 .vscode/launch.json 파일이 만들어져요.(자동으로 생성되기 때문에 초보자는 설정 없이 시작해도 OK!)예시 (JavaScript 디버깅 설정):{ "version": "0.2.0", "configurations": [ { ..

1. 터미널이란?**터미널(Terminal)**은 컴퓨터와 대화하는 방법 중 하나예요.명령어를 직접 입력해서 프로그램을 설치하거나 파일을 관리할 수 있어요.그래픽 버튼 없이도 모든 걸 조작할 수 있는 도구!2. VS Code에서 터미널 여는 방법단축키: Ctrl + (백틱)또는 상단 메뉴에서[터미널 > 새 터미널] 클릭3. 기본 명령어 실습 (Git Bash 기준)✅ 현재 위치 확인pwd ✅ 폴더 안 파일 목록 보기ls ✅ 새 폴더 만들기mkdir test-folder ✅ 폴더 이동cd test-folder ✅ 상위 폴더로 이동cd .. 4. 자주 쓰는 꿀팁Tab 키: 자동완성 기능! 디렉토리 이름 입력 시 매우 유용방향키 ↑↓: 이전에 입력했던 명령어 불러오기clear: 화면 깨끗하게 정리5. 명령어 ..

1. 새로운 폴더 만들기바탕화면이나 원하는 위치에 새 폴더 생성이름 예: my-first-websiteVS Code 실행 후 [파일 > 폴더 열기] 클릭 → 방금 만든 폴더 선택 2. 새 파일 만들기폴더가 열리면 왼쪽 사이드바에서우클릭 > 새 파일 선택다음 3개의 파일을 만듭니다:index.html style.css script.js 3. HTML 기본 구조 작성index.html 파일에 다음 코드 입력: Hello, VS Code! 눌러보세요 4. CSS로 디자인 추가style.css 파일에 다음 코드 입력:body { font-family: 'Arial'; text-align: center; padding-top: 100px; background-color: #f0f8ff;}h1 ..

1. 확장 프로그램(Extensions)이란?VS Code는 기본도 강력하지만, 확장 프로그램을 설치하면 코드 자동완성, 디자인 예쁘게 정리, Git 도구 연동 등더 다양한 기능을 사용할 수 있어요!말 그대로 내가 원하는 기능을 ‘플러그인’처럼 끼워 넣는 느낌이에요.2. 확장 프로그램 설치 방법방법 ① 사이드바에서 설치하기왼쪽 사이드바에서 확장(Extensions) 아이콘 클릭 (블럭처럼 생긴 아이콘)검색창에 설치하고 싶은 확장 프로그램 이름 입력결과에서 클릭 → Install 버튼 클릭방법 ② 명령 팔레트 사용Ctrl + Shift + P (Mac: Cmd + Shift + P)Extensions: Install Extensions 입력 후 Enter동일하게 검색 후 설치 진행3. 초보자 추천 확장 프..