Editor Browser Folder

웹 개발 환경 구성 순서

웹 입문 환경은 편집기, 브라우저, 폴더 구조가 서로 맞물릴 때 안정적입니다. 처음에는 도구를 많이 늘리기보다 작성, 저장, 확인 흐름을 확실히 잡습니다.

Editor코드 작성
Folder파일 위치 정리
Browser실행 결과 확인
DevTools오류와 구조 점검
01

편집기

자동완성, 파일 탐색, 터미널을 한 곳에서 다루는 기본 작업 공간입니다.

02

브라우저

HTML, CSS, JavaScript가 실제로 어떻게 보이는지 확인하는 실행 환경입니다.

03

폴더 구조

index.html, style.css, script.js처럼 역할별 파일을 찾기 쉽게 배치합니다.

04

확장 프로그램

처음부터 많이 설치하기보다 포맷팅과 미리보기처럼 필요한 것부터 추가합니다.

초기 점검

  • 파일을 저장했는데 화면이 바뀌지 않으면 경로와 새로고침을 먼저 확인합니다.
  • 브라우저 콘솔 오류는 JavaScript 문제를 찾는 가장 빠른 입구입니다.
  • 프로젝트마다 폴더를 분리하면 이미지와 CSS 경로 실수가 줄어듭니다.

도구 역할

VS Code환경 파일 작성
Browser실행
Console오류
Folder웹 개발 환경 구성 순서