설정 점검

코드 작성부터 콘솔 확인까지 한 번에 점검하기

웹 개발 환경은 설치 목록보다 반복 루틴이 중요합니다. 아래 순서대로 확인하면 파일 위치, 저장, 미리보기, 오류 확인이 한 흐름으로 이어집니다.

01 [ ]

프로젝트 폴더

실습마다 폴더를 분리하고 index.html 위치를 먼저 확인합니다.

02 </>

코드 에디터

VS Code에서 폴더 전체를 열고 파일 탐색기로 구조를 봅니다.

03 LIVE

확장과 서버

Live Server로 열어 저장할 때마다 화면이 갱신되는지 봅니다.

04 WEB

브라우저 확인

주소와 화면 변화를 확인하고 새로고침이 필요한지 구분합니다.

05 !

콘솔 점검

DevTools Console에서 오류 메시지와 파일 경로 문제를 찾습니다.

막혔을 때 먼저 묻기

  1. 지금 수정한 파일과 브라우저가 연 파일이 같은 위치인가?
  2. 저장 후 Live Server 또는 새로고침으로 다시 확인했는가?
  3. Console에 빨간 오류가 있으면 파일명과 줄 번호를 읽었는가?

기본 파일 구조