jonbeo 님의 블로그

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. Git 설치 여부 확인먼저 Git이 설치되어 있어야 VS Code에서도 Git을 사용할 수 있어요!VS Code 터미널 열기 (단축키: `Ctrl + ``)아래 명령어 입력git --version 설치되어 있다면 버전 정보가 출력됩니다. 없다면 Git 공식 사이트에서 설치하세요.2. GitHub 계정 만들기 (이미 있다면 생략 가능)https://github.com/ 접속우측 상단 Sign up 클릭이메일, 비밀번호 입력 후 계정 생성3. 로컬 Git 저장소 만들기VS Code에서 만든 웹 프로젝트 폴더 열기터미널에서 다음 명령어 실행git init 3. 변경된 파일을 Git이 추적할 수 있도록 스테이징git add . 4. 커밋 메시지와 함께 첫 커밋git commit -m "처음 ..

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. 초보자 추천 확장 프..

1. 왜 테마와 글꼴을 바꿔야 할까?코딩을 오래 하다 보면 눈에 편한 화면이 정말 중요해요.내가 좋아하는 스타일로 꾸미면 작업할 때 기분도 더 좋아져요!실력보다 먼저 나만의 개발 환경부터 만들어보는 재미도 쏠쏠해요 😄2. 테마 변경하는 방법🔹 명령 팔레트로 변경하기Ctrl + Shift + P (Mac: Cmd + Shift + P)“Color Theme” 입력 후 Enter원하는 테마 선택🔹 톱니바퀴 메뉴로 변경하기좌하단 톱니바퀴 클릭Color Theme 선택 후 테마 지정3. 추천 테마 몇 가지Dark+ (기본 다크 테마)Monokai: 따뜻한 색감Dracula: 진한 퍼플 계열, 인기 최고One Dark Pro: 많은 개발자들이 사용하는 VS Code 인기 테마4. 글꼴(Font) 바꾸는 방법..

1. Visual Studio Code 첫 화면 살펴보기처음 VS Code를 실행하면 깔끔한 화면이 딱 나타나요.너무 복잡해 보일 수도 있지만, 핵심 구성만 알면 금방 익숙해질 수 있어요! 2. 기본 구성요소 설명🔹 사이드바(Side Bar)왼쪽에 위치하며 프로젝트를 탐색하거나, Git, 확장 프로그램 등을 사용해요.탐색기(Explorer): 폴더/파일 구조를 한눈에검색(Search): 전체 프로젝트 내에서 키워드 검색소스 제어(Git): Git 상태 확인 및 커밋 가능확장(Extensions): 유용한 플러그인 설치🔹 에디터(Editor)화면 가운데에 위치하며 실제 코드를 작성하는 공간이에요.파일을 더블 클릭하면 탭 형식으로 열려요.🔹 상태 표시줄(Status Bar)하단에 위치하며 현재 언어, ..

1. Visual Studio Code 설치 준비하기Visual Studio Code(이하 VS Code)는 Windows, macOS, Linux 모두 지원해요.설치를 위해 아래 공식 사이트에 접속해주세요.👉 https://code.visualstudio.com/2. Windows에서 설치하는 방법홈페이지 접속 후 Windows 버튼 클릭다운로드가 시작되면 .exe 파일 실행설치 마법사가 실행되면 다음(next) → 동의 → 설치 → 완료3. macOS에서 설치하는 방법홈페이지 접속 후 macOS 버튼 클릭.zip 파일이 다운로드됨압축 해제 후, Visual Studio Code.app을 응용 프로그램 폴더에 드래그4. Linux에서 설치하는 방법홈페이지에서 Linux 탭 클릭사용하는 배포판에 맞는 ..

1. Visual Studio Code란?Visual Studio Code는 마이크로소프트에서 만든 무료 코드 편집기예요.처음 개발을 시작하는 분들부터, 현업 개발자까지 널리 사용하는 대표적인 툴이죠.다양한 프로그래밍 언어 지원가볍지만 강력한 기능Git, GitHub과 쉽게 연동 가능확장 프로그램을 통한 무한한 기능 추가Visual Studio Code2. 누가 사용할까?VS Code는 아래와 같은 사람들에게 정말 유용해요.코딩 입문자: HTML, CSS, JavaScript 공부할 때웹/앱 개발자: 프로젝트 관리와 협업에 필수데이터 분석가: Python, Jupyter Notebook 사용 가능GitHub 사용자: 깃과 깃허브를 연동해서 편하게 커밋/푸시3. 공식 사이트로 이동하기아래 링크를 클릭하면 ..