01. JS 시작하기
JavaScript 는 원래 브라우저에서 동작하는 언어로 시작했지만, 지금은 Node.js 덕분에 서버, CLI, 빌드 도구 등 거의 모든 곳에서 사용됩니다. 같은 코드라도 실행 환경에 따라 사용 가능한 API 가 다릅니다 (예: 브라우저는 `window`, Node 는 `process`).
이 강의에서 배우는 것
- 1JavaScript 가 어떤 환경에서 실행되는지(브라우저, Node.js) 이해한다.
- 2`console.log` 로 값을 출력하고 결과를 확인할 수 있다.
- 3HTML 에 `<script>` 태그로 JS 를 연결할 수 있다.
- 4브라우저 개발자 도구(DevTools) 의 Console 탭을 사용할 수 있다.
- 5`"use strict"` 모드의 의미와 효과를 설명할 수 있다.
소개
JavaScript 는 원래 브라우저에서 동작하는 언어로 시작했지만, 지금은 Node.js 덕분에 서버, CLI, 빌드 도구 등 거의 모든 곳에서 사용됩니다. 같은 코드라도 실행 환경에 따라 사용 가능한 API 가 다릅니다 (예: 브라우저는 `window`, Node 는 `process`).
핵심 개념
1. JavaScript 실행 환경
JavaScript 는 원래 브라우저에서 동작하는 언어로 시작했지만, 지금은 Node.js 덕분에 서버, CLI, 빌드 도구 등 거의 모든 곳에서 사용됩니다. 같은 코드라도 실행 환경에 따라 사용 가능한 API 가 다릅니다 (예: 브라우저는 `window`, Node 는 `process`).
console.log("Hello, JavaScript!");위 한 줄은 브라우저 Console 과 Node `node file.js` 모두에서 동일하게 동작합니다.
2. 스크립트 연결과 실행 순서
HTML 에서 JS 를 실행하려면 `<script>` 태그를 사용합니다. `defer` 속성을 붙이면 HTML 파싱이 끝난 뒤 실행되어 DOM 접근이 안전합니다.
<script src="src/01_console.js" defer></script>Node 환경에서는 터미널에서 `node src/01_console.js` 로 실행합니다.
3. 개발자 도구와 디버깅 기초
브라우저에서 F12 (또는 Cmd+Option+I) 를 누르면 DevTools 가 열립니다. Console 탭에서 즉시 JS 표현식을 평가할 수 있고, Sources 탭에서는 코드에 중단점을 걸 수 있습니다. `console.log`, `console.table`, `console.error` 를 상황에 맞게 사용하면 디버깅이 훨씬 쉬워집니다.
4. 엄격 모드 (strict mode)
파일 상단에 `"use strict";` 를 적으면 흔한 실수(선언하지 않은 변수에 값 할당 등)를 에러로 알려줍니다. ES 모듈(`type="module"`) 은 자동으로 strict 입니다.
"use strict";
x = 10; // ReferenceError: x is not defined핵심 예제
| 파일 | 다루는 내용 |
|---|---|
| `01_console.js` | 다양한 `console` 메서드 출력 비교 |
| `02_script_tag.js` | HTML 에서 로드되어 DOM 에 메시지 출력 |
| `03_devtools.js` | DevTools 에서 활용하는 디버깅 패턴 |
| `04_strict_mode.js` | strict 모드의 효과 확인 |
src/01_console.js
/** 다양한 console 메서드를 비교한다. */
console.log("log: 일반 메시지");
console.info("info: 정보성 메시지");
console.warn("warn: 경고 메시지");
console.error("error: 오류 메시지");
const users = [
{ id: 1, name: "Ada" },
{ id: 2, name: "Linus" },
];
console.table(users);
console.time("loop");
let sum = 0;
for (let i = 0; i < 1000; i += 1) sum += i;
console.timeEnd("loop");
console.log("sum =", sum);
src/02_script_tag.js
/** index.html 에서 defer 로 로드되어 DOM 에 메시지를 출력한다. */
const target = typeof document !== "undefined" ? document.getElementById("app") : null;
if (target) {
target.textContent = "스크립트가 성공적으로 연결되었습니다!";
} else {
console.log("브라우저가 아닌 환경입니다. node 로 실행 중일 수 있습니다.");
}
src/03_devtools.js
/** DevTools Console 에서 활용하면 좋은 패턴들. */
const user = { name: "Grace", age: 36, role: "admin" };
console.log("객체:", user);
console.dir(user); // 객체의 속성 트리 보기
console.assert(user.age >= 18, "성인이어야 합니다");
console.group("user 정보");
console.log("이름:", user.name);
console.log("역할:", user.role);
console.groupEnd();
src/04_strict_mode.js
"use strict";
/** strict 모드에서는 선언하지 않은 변수에 할당하면 에러가 발생한다. */
try {
// 아래 줄의 주석을 풀면 ReferenceError 발생
// undeclared = 10;
const value = 10;
console.log("strict 모드에서도 정상 동작:", value);
} catch (err) {
console.error("에러 발생:", err.message);
}
src/index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>01. JS 시작하기</title>
<script src="02_script_tag.js" defer></script>
</head>
<body>
<h1>JS 시작하기</h1>
<p id="app">스크립트 로딩 중...</p>
</body>
</html>
자주 하는 실수
- `console.log` 의 `l` 을 대문자로 쓰는 경우 (`console.Log` 는 에러).
- `<script>` 를 `<head>` 에 그냥 넣어 DOM 이 아직 없을 때 접근하려는 경우 → `defer` 사용.
- 세미콜론 없이 줄을 이어 써서 ASI(자동 세미콜론 삽입) 가 잘못 동작하는 경우.
- Node 실행 파일에서 `alert`, `document` 같은 브라우저 전용 API 호출.
- 파일을 저장하지 않고 브라우저를 새로고침해 변경 사항이 반영되지 않은 줄 모르는 경우.
FAQ
Q1. Node 와 브라우저 중 어디서 연습하면 좋나요?
입출력만 다루는 동안은 `node` 가 빠르고 편합니다. DOM 단원부터는 브라우저가 필수입니다.
Q2. `console.log` 외에 어떤 것을 자주 쓰나요?
`console.table` (배열/객체 표), `console.error` (빨간 출력), `console.time/timeEnd` (성능 측정) 가 유용합니다.
Q3. strict 모드를 꼭 써야 하나요?
새 코드는 ES 모듈로 쓰는 게 일반적이므로 자동으로 strict 입니다. 명시적으로 적으면 의도를 분명히 할 수 있습니다.
과제
- `homework_01.js` — 자기소개 문자열 3 줄을 서로 다른 console 메서드로 출력하기.
- `homework_02.html` — 외부 JS 를 `defer` 로 연결하고 페이지에 메시지를 표시하는 페이지 만들기.
homework/README.md
## homework_01.js
- 자신의 이름, 좋아하는 언어, 한 줄 다짐을 각각 `console.log`, `console.info`, `console.warn` 으로 출력하세요.
- 마지막에 `console.table` 로 위 세 항목을 객체로 묶어 출력해 보세요.
## homework_02.html
- `defer` 속성을 사용하는 외부 스크립트를 연결하세요.
- 스크립트는 페이지의 특정 요소 텍스트를 "안녕하세요, <이름>!" 으로 바꿔야 합니다.
- 브라우저에서 열어 결과를 확인하세요.
정답은 `answer/` 폴더를 참고하세요.
homework/answer/homework_01.js
/** 자기소개를 다양한 console 메서드로 출력한다. */
const profile = {
name: "홍길동",
language: "JavaScript",
motto: "매일 한 줄이라도 코딩하자",
};
console.log("이름:", profile.name);
console.info("좋아하는 언어:", profile.language);
console.warn("다짐:", profile.motto);
console.table(profile);
homework/answer/homework_02.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>과제 02</title>
<script defer>
document.addEventListener("DOMContentLoaded", () => {
const name = "홍길동";
document.getElementById("greeting").textContent = `안녕하세요, ${name}!`;
});
</script>
</head>
<body>
<h1 id="greeting">로딩 중...</h1>
</body>
</html>
왜 JavaScript 인가 — 입문자가 알아두면 좋은 강점
JavaScript 는 1995년 Brendan Eich 가 단 10일 만에 만든 브라우저용 스크립트 언어로 시작했지만, 30년이 지난 지금은 **웹의 표준 언어이자 가장 광범위하게 쓰이는 프로그래밍 언어**가 되었습니다. Stack Overflow Developer Survey 11년 연속(2014-2024) 가장 많이 사용된 언어 1위입니다.
1) 브라우저만 있으면 시작
다른 언어와 달리 **컴파일러·인터프리터 설치 불필요** — 어떤 브라우저(Chrome·Edge·Safari·Firefox)든 개발자 도구(F12) 의 Console 탭에서 즉시 코드 실행 가능. 환경 구축 마찰이 0에 가까운 유일한 주력 언어입니다.
// 브라우저 F12 → Console 탭에서 즉시 실행
console.log("Hello, JS!");
const greeting = name => `안녕, ${name}!`;
console.log(greeting("코딩나우"));2) 무엇을 만들 수 있나
- **프론트엔드 웹** — React·Vue·Svelte (모든 현대 웹사이트의 표준)
- **백엔드** — Node.js·Express·Next.js (Netflix·Uber·PayPal 등 사용)
- **모바일 앱** — React Native (Facebook·Instagram·Discord)
- **데스크톱 앱** — Electron (VS Code·Slack·Discord 모두 Electron)
- **서버리스/엣지** — Cloudflare Workers·Vercel Edge Functions
- **3D/게임** — Three.js·Babylon.js·Phaser
3) JavaScript vs ECMAScript
**ECMAScript (ES) 는 언어 표준 명세**, JavaScript 는 그 표준의 구현체입니다. 흔히 "ES6"(2015) 가 분수령으로 꼽히며 `let`/`const`/화살표 함수/클래스/모듈 등 현대적 문법이 이때 도입됐습니다. 본 강의는 ES2020+ 기준입니다.
자주 묻는 질문 (FAQ)
Q1. JavaScript 와 Java 가 다른 언어인가요?
네, **이름만 비슷할 뿐 완전히 다른 언어**입니다. 1995년 출시 당시 마케팅상 Java 의 인기에 편승하려고 비슷한 이름을 붙였던 것이 굳어졌을 뿐, 문법·생태계·실행 환경 모두 다릅니다. 비유: 햄 ≠ 햄스터. 입문자가 가장 자주 헷갈리는 부분이므로 한 번 정리해 두세요.
Q2. `var` / `let` / `const` 중 어느 걸 써야 하나요?
**기본은 `const`, 재할당이 필요할 때만 `let`, `var` 는 절대 쓰지 마세요**. `var` 는 함수 스코프·호이스팅 등 직관에 어긋나는 동작을 합니다 (ES6 이전 유산). 모던 코드는 `var` 0개가 정상입니다. ESLint 의 `no-var` 규칙으로 자동 검출 가능합니다.
Q3. TypeScript 도 처음부터 배워야 하나요?
**JavaScript 기본을 6주차 정도 익힌 뒤 TypeScript 로 옮겨가는 것이 표준 루트**입니다. TypeScript 는 JS 의 상위집합이라 JS 문법을 모르면 TS 도 못 씁니다. 본 강의 25편을 마친 뒤 TS 공식 핸드북으로 1-2주 정도면 전환 가능합니다.
Q4. Node.js 도 같이 설치해야 하나요?
**입문 단계에서는 필요 없습니다** — 브라우저 콘솔만으로 충분. 8주차쯤 "외부 라이브러리 설치"·"빌드 도구" 단계로 가면 Node.js (LTS 버전) 가 필요해집니다. 미리 깔아두고 싶다면 https://nodejs.org/ 에서 LTS (22.x 등) 다운로드.
Q5. 브라우저 콘솔에서 만든 코드를 파일로 어떻게 저장하나요?
콘솔은 일회성 실험용입니다. 코드를 보존하려면 `hello.html` 파일을 만들어 `<script>` 태그 안에 코드를 넣거나, 별도 `hello.js` 파일을 만들어 HTML 에서 `<script src="hello.js"></script>` 로 불러옵니다. 본 강의 2주차에 자세히 다룹니다.
Q6. JavaScript 가 "느리다" 는 말은 사실인가요?
옛말입니다. 현대 V8 엔진 (Chrome·Node.js) 의 JIT 컴파일러는 매우 빠르며, 많은 벤치마크에서 Python 보다 5~50배 빠릅니다. 1ms 단위의 게임 루프나 GPU 압축은 여전히 C++/Rust 가 빠르지만, 웹 백엔드·CLI·자동화 같은 90% 사용처에서는 충분히 빠릅니다.
다음 단원
[02_변수와_타입](../02_변수와_타입/) — 데이터를 담는 그릇과 자료형을 배웁니다.