1장. 자바스크립트란?

자바스크립트란 무엇인가?

자바스크립트(JavaScript)는 웹 브라우저에서 동작하는 프로그래밍 언어입니다. 1995년 넷스케이프(Netscape)의 브렌던 아이크(Brendan Eich)에 의해 개발되었으며, 현재는 웹 개발에서 필수적인 언어가 되었습니다.

자바스크립트의 역할

웹 페이지의 세 가지 핵심 기술:

HTML (HyperText Markup Language): 웹 페이지의 구조를 정의
CSS (Cascading Style Sheets): 웹 페이지의 디자인과 스타일을 정의
JavaScript: 웹 페이지의 동작과 상호작용을 구현

HTML (구조) + CSS (디자인) + JavaScript (동작) = 완성된 웹 페이지

자바스크립트의 현재

초기: 브라우저 전용 언어

처음에는 웹 브라우저에서만 동작하는 스크립트 언어였습니다.

버튼 클릭 처리
폼 유효성 검사
동적 콘텐츠 변경
애니메이션 효과

현재: 범용 프로그래밍 언어

현재 자바스크립트는 다양한 분야에서 사용됩니다:

1. 프론트엔드 (Frontend)

웹 브라우저에서 동작하는 클라이언트 사이드 개발
React, Vue, Angular 등 프레임워크 사용
SPA(Single Page Application) 개발

2. 백엔드 (Backend)

Node.js를 통한 서버 사이드 개발
RESTful API 개발
실시간 통신 (WebSocket)

3. 모바일 앱

React Native: iOS, Android 앱 개발
Ionic: 하이브리드 앱 개발

4. 데스크톱 애플리케이션

Electron: VS Code, Slack 등 데스크톱 앱 개발

5. 기타

게임 개발
IoT (Internet of Things)
머신러닝 (TensorFlow.js)

자바스크립트의 특징

1. 인터프리터 언어 (Interpreted Language)

코드를 한 줄씩 실행하는 인터프리터 방식
컴파일 과정 없이 바로 실행 가능
개발 속도가 빠름

2. 동적 타입 언어 (Dynamically Typed)

변수의 타입을 미리 선언하지 않음
실행 시점에 타입이 결정됨
유연하지만 주의가 필요함

let value = 10;      // 숫자
value = "Hello";     // 문자열로 변경 가능
value = true;        // 불린으로 변경 가능

3. 객체 지향 프로그래밍 지원

객체 기반 프로그래밍
프로토타입 기반 상속
클래스 문법 지원 (ES6+)

4. 함수형 프로그래밍 지원

함수를 일급 객체로 취급
고차 함수 지원
클로저(Closure) 지원

5. 이벤트 기반 프로그래밍

비동기 처리 지원
콜백 함수
Promise, async/await

자바스크립트와 Java의 차이

중요: 자바스크립트와 Java는 완전히 다른 언어입니다!

구분	Java	JavaScript
개발 회사	Sun Microsystems	Netscape
실행 환경	JVM 필요	브라우저 내장
컴파일	컴파일 필요 (.class)	인터프리터 방식
타입	정적 타입	동적 타입
용도	서버, 안드로이드 등	주로 웹 개발

자바스크립트 버전 (ECMAScript)

자바스크립트는 ECMAScript(ES) 표준을 따릅니다.

주요 버전

ES5 (2009): 현재 대부분의 브라우저에서 지원
ES6 / ES2015: 클래스, 화살표 함수, let/const 등 추가
ES2016 ~ ES2023: 지속적인 업데이트

자바스크립트를 배워야 하는 이유

1. 웹 개발의 필수 언어

모든 현대 웹 사이트에서 사용
프론트엔드 개발의 기본

2. 배우기 쉬움

브라우저만 있으면 바로 시작 가능
별도의 개발 환경 설정이 간단

3. 풍부한 생태계

수많은 라이브러리와 프레임워크
활발한 커뮤니티

4. 다양한 분야로 확장 가능

프론트엔드 → 백엔드 → 풀스택
웹 → 모바일 → 데스크톱

첫 번째 자바스크립트 프로그램

브라우저 콘솔에서 실행

웹 브라우저 열기 (Chrome, Firefox, Edge 등)
F12 키를 눌러 개발자 도구 열기
"Console" 탭 선택
다음 코드 입력:

console.log('Hello, JavaScript!');

HTML 파일에서 실행

index.html 파일을 만들고:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>첫 번째 JavaScript</title>
</head>
<body>
    <h1>JavaScript 시작하기</h1>

    <script>
        // 자바스크립트 코드
        console.log('Hello, JavaScript!');
        alert('안녕하세요, 자바스크립트!');
    </script>
</body>
</html>

브라우저에서 파일을 열면 "안녕하세요, 자바스크립트!" 알림창이 나타납니다.

개발 환경 설정

필요한 도구

텍스트 에디터
- VS Code (권장)
- Sublime Text
- Atom
웹 브라우저
- Chrome (권장) - 개발자 도구가 우수
- Firefox
- Edge
로컬 서버 (선택사항)
- VS Code의 Live Server 확장
- Python의 http.server
- Node.js의 http-server

VS Code 확장 프로그램 추천

Live Server: 실시간 미리보기
JavaScript (ES6) code snippets: 코드 자동 완성
Prettier: 코드 포맷팅
ESLint: 코드 검사

자바스크립트 학습 로드맵

기초 단계

변수와 데이터 타입
연산자
조건문과 반복문
함수

중급 단계

배열과 객체
DOM 조작
이벤트 처리
비동기 프로그래밍

고급 단계

ES6+ 문법
모듈 시스템
프레임워크 (React, Vue 등)
Node.js 백엔드 개발

연습 문제

브라우저 콘솔에서 자신의 이름을 출력하는 코드를 작성하세요.
HTML 파일을 만들어 "안녕하세요!" 메시지를 alert()로 표시하세요.
console.log()를 사용하여 여러 줄의 메시지를 출력하세요.

다음 장 예고

다음 장에서는 자바스크립트를 실행하는 다양한 방법과 환경에 대해 학습합니다.

'FrontEnd > Javascript' 카테고리의 다른 글

6장. 조건문 (0)	2026.01.06
5장. 연산자 (0)	2026.01.06
3장. 변수와 상수 (0)	2026.01.05
4장. 데이터 타입 (0)	2025.12.30
2장. 자바스크립트 실행 환경 (0)	2025.12.30

1장. 자바스크립트란?

1장. 자바스크립트란?

자바스크립트란 무엇인가?

자바스크립트의 역할

자바스크립트의 현재

초기: 브라우저 전용 언어

현재: 범용 프로그래밍 언어

1. 프론트엔드 (Frontend)

2. 백엔드 (Backend)

3. 모바일 앱

4. 데스크톱 애플리케이션

5. 기타

자바스크립트의 특징

1. 인터프리터 언어 (Interpreted Language)

2. 동적 타입 언어 (Dynamically Typed)

3. 객체 지향 프로그래밍 지원

4. 함수형 프로그래밍 지원

5. 이벤트 기반 프로그래밍

자바스크립트와 Java의 차이

자바스크립트 버전 (ECMAScript)

주요 버전

최신 기능 사용 시 주의사항

자바스크립트를 배워야 하는 이유

1. 웹 개발의 필수 언어

2. 배우기 쉬움

3. 풍부한 생태계

4. 다양한 분야로 확장 가능

첫 번째 자바스크립트 프로그램

브라우저 콘솔에서 실행

HTML 파일에서 실행

개발 환경 설정

필요한 도구

VS Code 확장 프로그램 추천

자바스크립트 학습 로드맵

기초 단계

중급 단계

고급 단계

연습 문제

다음 장 예고

'FrontEnd > Javascript' 카테고리의 다른 글

관련글

티스토리툴바