생활 속의 컴퓨팅 실습 2주차

Shared on March 18, 2026

자바스크립트 기초 및 개발 환경 설정

개요

목표: 자바스크립트의 핵심 개념과 실습 환경을 이해하고, 기본 코드를 작성·실행할 수 있도록 한다.
대상: 전공 외 교양 과목으로 참여하는 대학생(프로그래밍 기초가 없는 1학년 포함).
방법: 강의와 실습(Chrome 개발자 도구, VS Code)를 병행한다.

핵심 개념

주제	핵심 내용
자바스크립트의 역할	웹 클라이언트뿐 아니라 Node.js를 이용한 서버, 모바일 앱, 데스크탑 앱까지 폭넓게 활용.
ES6 이후 변화	`let`, `const`, 화살표 함수, 템플릿 리터럴 등 문법 혁신이 도입되어 현재 버전의 근간이 됨.
데이터베이스 연계	MongoDB 같은 NoSQL DB가 자바스크립트와 밀접하게 연동, 백엔드와 프론트엔드 통합에 유리.
개발 도구	- Chrome DevTools: 콘솔, 디버깅, 실시간 코드 실행<br>- VS Code: 가볍고 확장성 높은 코드 편집기
기본 문법	`console.log()`는 파이썬의 `print()`와 동일한 출력 함수. `Hello, World!` 예제로 시작.

상세 노트

1. 자바스크립트의 중요성

프론트엔드: HTML/CSS와 결합해 동적 UI 구현.
백엔드: Node.js로 서버 로직 작성, REST API 제공.
멀티 플랫폼: 모바일 앱(React Native, Ionic)·데스크탑 앱(Electron) 등에서 활용.

2. ES6 이후 주요 문법

var → let / const (블록 스코프)
화살표 함수(=>)
템플릿 문자열(\${var}``)
모듈(import/export)
프로미스, async/await

3. 개발 환경 설치

3.1 VS Code 설치

공식 사이트(https://code.visualstudio.com/) 접속 → “Download for Windows/Mac/Linux” 클릭.
설치 파일 실행 → “Install” 클릭.
“Add to PATH” 옵션 선택(한 번만).
설치 완료 후 VS Code 실행.

3.2 Chrome DevTools 활용

Chrome 열기 → F12 또는 우클릭 → “검사”.
Console 탭에서 console.log('Hello, World!'); 입력 → 엔터.
결과 확인 → 실시간 코드 실행 경험.

4. 첫 번째 코드: Hello, World!

코드 console.log('Hello, World!');
실행
- DevTools 콘솔에 입력 → 출력 확인.
- VS Code에서 .js 파일 생성 후 실행(터미널 node 파일명.js).

5. 학생 질문 및 답변

Python 배경 여부
- 1학년은 Python 수업이 없으므로 **자바스크립