2강. 실행 환경과 콘솔 | 자바스크립트 기초 30강 — 웹을 움직이는 언어 · 입문 — 무료 온라인 강의

🎯 학습 목표

이 강을 마치면 다음을 할 수 있습니다.

브라우저 개발자 도구의 주요 탭(Elements, Console, Sources)을 구분하고 콘솔을 자유롭게 활용할 수 있습니다.
console.log 외에 console.warn, console.error, console.table 등 다양한 출력 메서드를 상황에 맞게 사용할 수 있습니다.
<script> 태그의 위치 전략과 defer·async 속성의 차이를 이해하고 올바르게 적용할 수 있습니다.
자바스크립트 코드를 별도의 .js 파일로 분리하여 HTML에서 불러오는 방식을 구현할 수 있습니다.

🛠️ 브라우저 개발자 도구 탐색

이 섹션에서는 자바스크립트 개발자라면 매일 사용하게 될 브라우저 개발자 도구의 구조와 주요 탭을 살펴보겠습니다.

1강에서 개발자 도구를 여는 단축키를 배웠습니다. 이제 열린 개발자 도구의 내부를 살펴보겠습니다. 개발자 도구는 단순한 콘솔 창이 아닙니다. 웹 개발자가 페이지를 분석하고, 코드를 테스트하고, 버그를 잡는 데 필요한 모든 도구가 탭 형태로 모여 있는 종합 작업대입니다.

가장 자주 사용하는 탭은 세 가지입니다. 첫 번째는 Elements(요소) 탭입니다. 현재 페이지의 HTML 구조와 CSS 스타일을 실시간으로 확인하고 수정할 수 있습니다. 특정 요소 위에서 마우스 오른쪽 버튼을 클릭하고 "검사"를 선택하면 해당 요소가 Elements 탭에서 바로 강조 표시됩니다. 두 번째는 Console(콘솔) 탭입니다. 자바스크립트 코드를 직접 입력하고 실행 결과를 확인하는 공간입니다. 이번 강의 핵심 도구입니다. 세 번째는 Sources(소스) 탭입니다. 페이지에서 불러온 모든 파일(HTML, CSS, JS)의 내용을 확인하고, 코드에 중단점(Breakpoint)을 설정해 한 줄씩 실행하며 디버깅할 수 있습니다.

이 강에서는 Console 탭에 집중하지만, 앞으로 DOM(16강)과 디버깅(28강)을 배울 때 나머지 탭들도 적극적으로 활용하게 됩니다. 개발자 도구는 자바스크립트 개발의 필수 동반자이므로 지금부터 익숙해져 두는 것이 좋습니다.

개발자 도구는 현재 열려 있는 페이지를 기준으로 동작합니다. 새 탭을 열거나 페이지를 이동하면 콘솔도 초기화됩니다. 실습할 때는 빈 페이지(about:blank를 주소창에 입력)를 열고 개발자 도구를 사용하면 다른 페이지의 스크립트 오류와 섞이지 않아 깔끔하게 연습할 수 있습니다.

📟 콘솔(Console) 완전 정복

이 섹션에서는 콘솔에서 사용할 수 있는 다양한 출력 메서드와 콘솔 활용 기법을 살펴보겠습니다.

1강에서 console.log()를 처음 만났습니다. 이것은 console 객체에 담긴 수십 가지 기능 중 하나입니다. console 객체는 브라우저가 개발자를 위해 제공하는 디버깅 도구 모음입니다. 실무에서 가장 많이 쓰이는 메서드를 하나씩 살펴보겠습니다.

// 일반 정보 출력 — 가장 기본적인 로그
console.log("일반 메시지");
console.log(42);
console.log(true);

// 경고 — 노란색으로 표시, 주의가 필요한 상황
console.warn("이 기능은 곧 사라질 예정입니다.");

// 오류 — 빨간색으로 표시, 문제 상황
console.error("데이터를 불러오는 데 실패했습니다.");

// 정보 — log와 유사하지만 ℹ 아이콘과 함께 표시
console.info("서버 연결 완료.");

// 구분선 출력 — 관련 로그를 그룹으로 묶을 때 유용
console.log("--- 이전 작업 완료 ---");

console.warn()은 노란 배경과 경고 아이콘으로 표시되어, 오류는 아니지만 주의가 필요한 상황을 알릴 때 사용합니다. console.error()는 빨간 글씨로 표시되며 오류 상황에 사용합니다. 실무 코드에서는 목적에 맞는 메서드를 구분해서 사용해야 나중에 로그를 필터링하기 편리합니다.

여러 값을 한 번에 출력하는 방법도 알아두면 유용합니다.

var name = "홍길동";
var age = 25;

// 쉼표로 여러 값 출력 — 각 값 사이에 공백이 자동으로 추가됨
console.log("이름:", name, "나이:", age);
// 출력: 이름: 홍길동 나이: 25

// 문자열 연결로 출력
console.log("이름: " + name + ", 나이: " + age);
// 출력: 이름: 홍길동, 나이: 25

// 백틱(`)을 사용한 템플릿 리터럴 — 가장 현대적인 방식
console.log(`이름: ${name}, 나이: ${age}`);
// 출력: 이름: 홍길동, 나이: 25

세 번째 방식인 템플릿 리터럴(Template Literal)은 ES6에서 도입된 문법으로, 백틱(`)으로 문자열을 감싸고 ${변수명} 형식으로 변수를 삽입할 수 있습니다. 가독성이 가장 좋아 현재 가장 권장되는 방식입니다. 6강 문자열 다루기에서 자세히 배우게 됩니다.

데이터를 보기 좋게 출력하는 데 특히 유용한 메서드도 있습니다.

// 배열이나 객체를 표 형태로 출력
var students = [
  { name: "김철수", score: 90 },
  { name: "이영희", score: 85 },
  { name: "박민준", score: 95 }
];
console.table(students);
// 콘솔에 깔끔한 표로 출력됩니다

// 관련 로그를 그룹으로 묶기
console.group("사용자 정보");
console.log("이름: 홍길동");
console.log("나이: 25");
console.log("등급: VIP");
console.groupEnd();

console.table()은 배열이나 객체 데이터를 스프레드시트처럼 표 형태로 출력해 줍니다. 데이터가 많을 때 한눈에 파악하기 훨씬 쉬워집니다. console.group()과 console.groupEnd()는 관련 로그를 들여쓰기 그룹으로 묶어주어, 복잡한 로그를 구조적으로 보여줄 수 있습니다. 지금은 배열과 객체가 생소하더라도 11~15강에서 배우게 되니, 이런 메서드가 있다는 것만 기억해 두세요.

콘솔에는 편리한 기능이 더 있습니다. 콘솔 입력창에서 위 방향키(↑)를 누르면 이전에 입력했던 코드를 불러올 수 있습니다. 여러 줄 코드를 입력할 때는 Shift + Enter로 줄을 바꾸고, 마지막에 Enter만 누르면 전체를 실행합니다. 콘솔 화면을 지우고 싶을 때는 console.clear()를 입력하거나 단축키 Ctrl + L을 사용합니다.

💻 HTML 파일에서 자바스크립트 실행하기

이 섹션에서는 HTML 파일 안에 자바스크립트를 작성하는 방법과 <script> 태그의 올바른 사용법을 살펴보겠습니다.

콘솔은 빠른 테스트에 최적이지만, 실제 웹 페이지를 만들려면 코드를 파일로 저장해야 합니다. 가장 기본적인 방법은 HTML 파일 안에 <script> 태그를 사용하는 것입니다. 1강에서 간략히 살펴봤지만, 이번에는 <script> 태그의 위치와 동작 방식을 깊이 이해해 보겠습니다.

브라우저는 HTML 문서를 위에서 아래로 순서대로 읽습니다. <script> 태그를 만나면 즉시 해당 스크립트를 실행하고, 실행이 끝날 때까지 나머지 HTML 파싱을 멈춥니다. 이것을 파싱 블로킹(Parsing Blocking)이라고 합니다. 이 특성 때문에 <script> 태그의 위치가 중요합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JS 실행 환경 실습</title>
  <!-- ❌ 여기서 DOM 요소 접근 시도는 실패 -->
  <!-- <script> document.getElementById("btn") → null 반환 </script> -->
</head>
<body>
  <h1>안녕하세요!</h1>
  <button id="btn">클릭하세요</button>

  <!-- ✅ body 맨 아래 — HTML 요소가 모두 로드된 후 실행 -->
  <script>
    console.log("페이지 로드 완료!");
    var button = document.getElementById("btn");
    console.log(button); // <button id="btn">클릭하세요</button>
  </script>
</body>
</html>

<head> 안에 <script>를 배치하면, 아직 <body>의 HTML 요소들이 만들어지기 전에 실행됩니다. 이 시점에 버튼이나 div 같은 요소에 접근하려 하면 null이 반환됩니다. 요소가 아직 존재하지 않기 때문입니다. 반면 </body> 바로 앞에 배치하면 HTML 요소가 모두 생성된 후 스크립트가 실행되므로 안전하게 요소에 접근할 수 있습니다.

현대적인 방법으로는 defer와 async 속성을 활용합니다.

<!-- defer: HTML 파싱이 끝난 후 실행 (순서 보장) -->
<script src="app.js" defer></script>

<!-- async: 다운로드 즉시 실행 (순서 미보장) -->
<script src="analytics.js" async></script>

defer 속성을 붙이면 스크립트 파일을 백그라운드에서 다운로드하는 동안 HTML 파싱을 계속 진행합니다. 다운로드가 완료되어도 HTML 파싱이 모두 끝날 때까지 기다렸다가 실행됩니다. 여러 defer 스크립트가 있으면 작성 순서대로 실행됩니다. 대부분의 상황에서 가장 권장하는 방식입니다.

async 속성은 다운로드 완료 즉시 실행합니다. HTML 파싱을 잠시 멈추고 스크립트를 실행하므로 순서가 보장되지 않습니다. 다른 스크립트나 DOM에 의존하지 않는 독립적인 스크립트(예: 방문자 분석 도구)에 적합합니다.

방식	위치	실행 시점	순서 보장	권장 사용처
기본 (속성 없음)	`</body>` 앞	태그 도달 즉시	O	간단한 프로젝트
`defer`	`<head>` 안	HTML 파싱 완료 후	O	대부분의 경우 (권장)
`async`	`<head>` 안	다운로드 완료 즉시	X	독립 스크립트 (분석 도구 등)

📁 외부 JS 파일로 코드 분리하기

이 섹션에서는 자바스크립트 코드를 별도의 파일로 분리하는 방법과 그 이유를 살펴보겠습니다.

프로젝트가 커질수록 HTML 안에 자바스크립트를 직접 작성하는 방식은 관리가 어려워집니다. 수백 줄의 HTML과 수백 줄의 자바스크립트가 뒤섞인 파일은 읽기도, 수정하기도 매우 힘들어집니다. 실무에서는 자바스크립트 코드를 별도의 .js 파일로 분리하는 것이 표준입니다.

파일을 분리하면 세 가지 큰 이점이 있습니다. 첫째, 코드 재사용이 가능합니다. 하나의 .js 파일을 여러 HTML 페이지에서 불러올 수 있어, 동일한 코드를 중복 작성할 필요가 없습니다. 둘째, 브라우저 캐싱을 활용할 수 있습니다. 외부 파일은 브라우저가 한 번 다운로드하면 캐시에 저장하여, 다음 방문 시 다시 다운로드하지 않아 페이지 로딩 속도가 빨라집니다. 셋째, 역할 분리로 코드를 관리하기 훨씬 쉬워집니다.

직접 실습해 보겠습니다. 먼저 프로젝트 폴더 구조를 만듭니다.

my-project/
├── index.html
└── app.js

app.js 파일의 내용입니다.

// app.js
console.log("외부 JS 파일이 실행되었습니다!");

var greeting = "안녕하세요, 자바스크립트!";
console.log(greeting);

console.log("현재 시각:", new Date().toLocaleTimeString());

index.html 파일에서 이 파일을 불러오는 방법입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>외부 JS 파일 실습</title>
  <!-- defer 속성으로 head 안에서 불러오기 -->
  <script src="app.js" defer></script>
</head>
<body>
  <h1>외부 JS 파일 연습</h1>
  <p>콘솔을 열어 결과를 확인하세요.</p>
</body>
</html>

src 속성에 JS 파일 경로를 지정하면 됩니다. 같은 폴더에 있으면 파일명만 쓰고, 하위 폴더에 있으면 src="js/app.js"처럼 경로를 포함합니다. 파일을 저장하고 index.html을 브라우저에서 열면, 개발자 도구 콘솔에 app.js에 작성한 내용이 출력되는 것을 확인할 수 있습니다.

이때 한 가지 주의할 점이 있습니다. <script src="app.js">와 같이 src 속성으로 외부 파일을 불러올 때는 태그 사이에 추가 코드를 작성해도 무시됩니다. 외부 파일과 인라인 코드를 같은 <script> 태그에 함께 쓸 수 없습니다. 별도의 <script> 태그를 추가해야 합니다.

⚠️ 자주 하는 실수와 주의점

이 섹션에서는 실행 환경과 콘솔 사용 시 입문자들이 자주 겪는 실수를 살펴보겠습니다.

콘솔에서 작성한 코드는 페이지를 새로고침하면 사라집니다. 콘솔에 입력한 코드는 브라우저 메모리에만 존재하므로, 새로고침하거나 탭을 닫으면 모두 사라집니다. 학습 중에는 문제가 없지만, 중요한 코드는 반드시 파일로 저장하세요.

파일 경로 오류가 가장 흔한 실수입니다. src="app.js"라고 작성했는데 실제 파일명이 App.js이거나, 파일이 다른 폴더에 있으면 스크립트가 로드되지 않습니다. 개발자 도구 콘솔에 Failed to load resource: net::ERR_FILE_NOT_FOUND 같은 오류가 표시됩니다. 이럴 때는 파일명 대소문자와 폴더 위치를 다시 확인하세요. Windows는 파일명 대소문자를 구분하지 않지만, Linux 서버는 구분하므로 처음부터 정확하게 쓰는 습관이 중요합니다.

HTML 파일을 더블클릭으로 열면 경로 문제가 발생할 수 있습니다. 파일 탐색기에서 HTML 파일을 더블클릭하면 file:// 프로토콜로 열립니다. 이 방식에서는 일부 브라우저 기능(특히 나중에 배울 fetch)이 보안 정책으로 차단됩니다. 입문 단계에서는 크게 문제가 없지만, VS Code의 Live Server 확장을 설치하면 http://localhost로 파일을 열어 실제 서버 환경처럼 실습할 수 있습니다. 설치 방법은 VS Code에서 Extensions(확장) 탭을 열고 "Live Server"를 검색하여 설치한 뒤, HTML 파일에서 오른쪽 클릭 → "Open with Live Server"를 선택하면 됩니다.

console.log를 삭제하지 않고 배포하는 실수를 조심하세요. 개발 중에는 console.log를 자유롭게 사용해도 좋습니다. 하지만 완성된 웹 사이트를 실제 서비스로 배포할 때는 불필요한 console.log를 제거하는 것이 좋습니다. 사용자의 개인 정보나 서버 내부 데이터가 콘솔에 출력되면 보안 문제가 될 수 있고, 불필요한 로그는 성능에도 영향을 줄 수 있습니다.

📝 핵심 요약

2강에서 배운 내용을 정리해 보겠습니다.

항목	내용
개발자 도구 주요 탭	Elements(HTML·CSS), Console(JS 실행), Sources(파일·디버깅)
콘솔 주요 메서드	`log`(일반), `warn`(경고), `error`(오류), `table`(표 출력), `clear`(초기화)
다중 값 출력	쉼표로 나열, 문자열 연결(+), 템플릿 리터럴(백틱 + ${변수})
script 태그 위치	`</body>` 앞(기본) 또는 `<head>` + `defer`(권장)
defer vs async	defer: HTML 완료 후 순서대로 실행 / async: 다운로드 즉시 실행, 순서 미보장
외부 JS 파일	`<script src="파일명.js"></script>`로 불러오기
콘솔 편의 기능	↑ 이전 명령 불러오기, Shift+Enter 줄바꿈, Ctrl+L 초기화

다음 강인 3강 — 변수(let·const)에서는 자바스크립트에서 데이터를 저장하고 이름 붙이는 방법인 변수를 배웁니다. 왜 var 대신 let과 const를 써야 하는지, 둘의 차이는 무엇인지, 그리고 변수 이름을 짓는 올바른 규칙까지 깊이 있게 다룹니다. 변수는 프로그래밍의 가장 기본적인 개념이므로 반드시 탄탄히 익혀두세요!

실행 환경과 콘솔