[JSTS-001][입문] JavaScript 실행 환경과 기본 문법
페이지 정보
본문
[이번 수업]
JavaScript는 웹 브라우저에서 화면을 움직이는 데 널리 쓰이지만 브라우저 전용 언어는 아닙니다. Node.js 같은 실행환경을 사용하면 터미널에서도 JavaScript 파일을 실행할 수 있습니다. 이번에는 언어와 실행환경을 구분하고 같은 코드를 두 환경에서 실행합니다.
[선수지식]
CS-001의 변수·값·자료형과 TOOL-001의 편집기·터미널 개념을 이해하면 됩니다. Python 경험은 없어도 괜찮습니다.
[학습목표]
1. JavaScript 언어와 브라우저·Node.js 실행환경의 차이를 설명할 수 있습니다.
2. const·let·console.log()를 사용해 값을 저장하고 출력할 수 있습니다.
3. 브라우저 콘솔과 .js 파일에서 코드를 실행할 수 있습니다.
[핵심개념]
JavaScript는 프로그램의 문법과 동작 규칙을 정한 언어입니다. 실행환경은 그 코드를 실제로 실행하면서 추가 기능을 제공합니다. 브라우저는 화면 문서를 다루는 DOM, 클릭 이벤트, 웹 저장소 같은 Web API를 제공합니다. Node.js는 브라우저 밖에서 JavaScript를 실행하며 파일·프로세스·서버 작업에 필요한 API를 제공합니다. 핵심 언어 문법은 같지만 document는 브라우저에 있고, Node.js의 파일시스템 기능은 일반 웹페이지에 그대로 존재하지 않습니다.
const는 다시 할당하지 않을 이름을 선언할 때 사용하고, let은 나중에 다른 값을 다시 할당해야 할 때 사용합니다. 처음에는 기본값으로 const를 선택하고 실제 재할당이 필요할 때 let을 쓰면 의도가 분명해집니다. = 오른쪽의 값을 왼쪽 이름에 할당하고, console.log()는 개발자 콘솔이나 터미널에 값을 출력합니다.
// 뒤는 한 줄 주석입니다. JavaScript는 대소문자를 구분하므로 console과 Console은 서로 다릅니다. 문장은 보통 위에서 아래로 실행되며, 이 과정에서는 문장 끝에 세미콜론을 붙이는 일관된 형식을 사용합니다.
[따라하기]
1. Chrome·Edge·Firefox에서 개발자 도구를 열고 Console 탭을 선택합니다. Windows·Linux는 보통 F12 또는 Ctrl+Shift+I, macOS는 Option+Command+I를 사용합니다. 아래 코드를 한 줄씩 입력합니다.
const course = "JavaScript";
let lesson = 1;
const minutes = 30;
const message = course + " " + lesson + "강";
console.log(message);
console.log("예상 학습 시간:", minutes, "분");
JavaScript 1강과 예상 학습 시간 30분이 표시되면 브라우저가 코드를 실행한 것입니다. 이어서 lesson = lesson + 1;을 입력하고 console.log(lesson);을 실행하면 2가 나옵니다. let으로 선언했기 때문에 새 값을 다시 할당할 수 있습니다.
2. Node.js가 설치되어 있다면 ‘node --version’으로 확인합니다. 같은 코드를 study.js로 저장하고 Windows·macOS·Linux 모두 터미널에서 ‘node study.js’를 실행합니다. 결과는 브라우저 콘솔과 같습니다. Node.js가 없다면 이번 수업은 브라우저 콘솔 실습만 완료해도 됩니다.
[흔한 실수]
Console.log처럼 대소문자를 바꾸거나 문자열 따옴표를 닫지 않으면 오류가 납니다. const로 선언한 lesson에 새 값을 넣으면 TypeError가 발생하므로 재할당이 필요하면 let을 사용합니다. let이나 const 없이 이름에 값을 넣지 마세요. 엄격 모드에서는 오류가 나고, 환경에 따라 원치 않는 전역 값이 생길 수 있습니다. Node.js 실행 시 파일을 찾지 못하면 터미널이 study.js가 있는 폴더인지 먼저 확인하세요.
[보안 주의]
인터넷 게시물이 ‘기능 활성화’나 ‘오류 해결’을 이유로 브라우저 콘솔에 긴 코드를 붙여 넣으라고 해도 실행하지 마세요. 로그인 정보나 토큰을 훔치는 Self-XSS 수법일 수 있습니다. 브라우저에서 실행되는 JavaScript는 사용자에게 전달되므로 비밀번호·API 키를 소스 코드에 넣으면 숨길 수 없습니다. 출처를 모르는 .js 파일이나 npm 패키지도 검토 없이 실행·설치하지 않습니다.
[직접 해볼 과제]
goal이라는 const 변수에 자신의 목표를 저장하고 세 번째 console.log()로 출력하세요. lesson을 한 번 더 증가시킨 뒤 왜 const가 아니라 let이어야 하는지 한 문장으로 적어 보세요. 같은 코드를 브라우저와 Node.js에서 실행할 수 있다면 결과를 비교하세요.
[확인문제]
1. JavaScript 언어와 실행환경은 무엇이 다른가요?
2. const와 let은 어떤 기준으로 선택하나요?
3. 브라우저 콘솔에 출처 불명의 코드를 붙여 넣으면 왜 위험한가요?
[다음 학습]
다음 게시 과정은 WEB-001 ‘HTML 문서와 시맨틱 구조’입니다. JSTS 트랙의 다음 단계는 JSTS-002 ‘타입·함수·스코프·클로저’입니다.
[공식 참고 자료]
MDN — What is JavaScript?
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript
MDN — JavaScript Grammar and types
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types
Node.js 공식 Command-line API
https://nodejs.org/api/cli.html
JavaScript는 웹 브라우저에서 화면을 움직이는 데 널리 쓰이지만 브라우저 전용 언어는 아닙니다. Node.js 같은 실행환경을 사용하면 터미널에서도 JavaScript 파일을 실행할 수 있습니다. 이번에는 언어와 실행환경을 구분하고 같은 코드를 두 환경에서 실행합니다.
[선수지식]
CS-001의 변수·값·자료형과 TOOL-001의 편집기·터미널 개념을 이해하면 됩니다. Python 경험은 없어도 괜찮습니다.
[학습목표]
1. JavaScript 언어와 브라우저·Node.js 실행환경의 차이를 설명할 수 있습니다.
2. const·let·console.log()를 사용해 값을 저장하고 출력할 수 있습니다.
3. 브라우저 콘솔과 .js 파일에서 코드를 실행할 수 있습니다.
[핵심개념]
JavaScript는 프로그램의 문법과 동작 규칙을 정한 언어입니다. 실행환경은 그 코드를 실제로 실행하면서 추가 기능을 제공합니다. 브라우저는 화면 문서를 다루는 DOM, 클릭 이벤트, 웹 저장소 같은 Web API를 제공합니다. Node.js는 브라우저 밖에서 JavaScript를 실행하며 파일·프로세스·서버 작업에 필요한 API를 제공합니다. 핵심 언어 문법은 같지만 document는 브라우저에 있고, Node.js의 파일시스템 기능은 일반 웹페이지에 그대로 존재하지 않습니다.
const는 다시 할당하지 않을 이름을 선언할 때 사용하고, let은 나중에 다른 값을 다시 할당해야 할 때 사용합니다. 처음에는 기본값으로 const를 선택하고 실제 재할당이 필요할 때 let을 쓰면 의도가 분명해집니다. = 오른쪽의 값을 왼쪽 이름에 할당하고, console.log()는 개발자 콘솔이나 터미널에 값을 출력합니다.
// 뒤는 한 줄 주석입니다. JavaScript는 대소문자를 구분하므로 console과 Console은 서로 다릅니다. 문장은 보통 위에서 아래로 실행되며, 이 과정에서는 문장 끝에 세미콜론을 붙이는 일관된 형식을 사용합니다.
[따라하기]
1. Chrome·Edge·Firefox에서 개발자 도구를 열고 Console 탭을 선택합니다. Windows·Linux는 보통 F12 또는 Ctrl+Shift+I, macOS는 Option+Command+I를 사용합니다. 아래 코드를 한 줄씩 입력합니다.
const course = "JavaScript";
let lesson = 1;
const minutes = 30;
const message = course + " " + lesson + "강";
console.log(message);
console.log("예상 학습 시간:", minutes, "분");
JavaScript 1강과 예상 학습 시간 30분이 표시되면 브라우저가 코드를 실행한 것입니다. 이어서 lesson = lesson + 1;을 입력하고 console.log(lesson);을 실행하면 2가 나옵니다. let으로 선언했기 때문에 새 값을 다시 할당할 수 있습니다.
2. Node.js가 설치되어 있다면 ‘node --version’으로 확인합니다. 같은 코드를 study.js로 저장하고 Windows·macOS·Linux 모두 터미널에서 ‘node study.js’를 실행합니다. 결과는 브라우저 콘솔과 같습니다. Node.js가 없다면 이번 수업은 브라우저 콘솔 실습만 완료해도 됩니다.
[흔한 실수]
Console.log처럼 대소문자를 바꾸거나 문자열 따옴표를 닫지 않으면 오류가 납니다. const로 선언한 lesson에 새 값을 넣으면 TypeError가 발생하므로 재할당이 필요하면 let을 사용합니다. let이나 const 없이 이름에 값을 넣지 마세요. 엄격 모드에서는 오류가 나고, 환경에 따라 원치 않는 전역 값이 생길 수 있습니다. Node.js 실행 시 파일을 찾지 못하면 터미널이 study.js가 있는 폴더인지 먼저 확인하세요.
[보안 주의]
인터넷 게시물이 ‘기능 활성화’나 ‘오류 해결’을 이유로 브라우저 콘솔에 긴 코드를 붙여 넣으라고 해도 실행하지 마세요. 로그인 정보나 토큰을 훔치는 Self-XSS 수법일 수 있습니다. 브라우저에서 실행되는 JavaScript는 사용자에게 전달되므로 비밀번호·API 키를 소스 코드에 넣으면 숨길 수 없습니다. 출처를 모르는 .js 파일이나 npm 패키지도 검토 없이 실행·설치하지 않습니다.
[직접 해볼 과제]
goal이라는 const 변수에 자신의 목표를 저장하고 세 번째 console.log()로 출력하세요. lesson을 한 번 더 증가시킨 뒤 왜 const가 아니라 let이어야 하는지 한 문장으로 적어 보세요. 같은 코드를 브라우저와 Node.js에서 실행할 수 있다면 결과를 비교하세요.
[확인문제]
1. JavaScript 언어와 실행환경은 무엇이 다른가요?
2. const와 let은 어떤 기준으로 선택하나요?
3. 브라우저 콘솔에 출처 불명의 코드를 붙여 넣으면 왜 위험한가요?
[다음 학습]
다음 게시 과정은 WEB-001 ‘HTML 문서와 시맨틱 구조’입니다. JSTS 트랙의 다음 단계는 JSTS-002 ‘타입·함수·스코프·클로저’입니다.
[공식 참고 자료]
MDN — What is JavaScript?
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript
MDN — JavaScript Grammar and types
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types
Node.js 공식 Command-line API
https://nodejs.org/api/cli.html
- 이전글[WEB-001][입문] HTML 문서와 시맨틱 구조 이해하기 26.08.28
- 다음글[PY-001][입문] Python 실행과 기본 문법 첫걸음 26.08.28
댓글목록
등록된 댓글이 없습니다.