자바스크립트는 왜 필요한가?
웹 페이지를 처음 만들던 시절에는 HTML만 있어도
정보 전달에는 큰 문제가 없었어.
하지만 사용자들이 웹에서 점점 더 많은 걸 기대하게 되면서,
정적인 HTML과 CSS만으로는 부족한 상황이 찾아왔지.
예를 들어 이런 것들이야:
- 버튼을 클릭하면 창이 뜨는 기능
- 사용자가 입력한 값을 검사해서 경고 메시지를 보여주는 기능
- 스크롤하면 애니메이션이 재생되는 기능
- 실시간으로 서버에 데이터를 요청해서 새로운 내용을 불러오는 기능
이런 인터렉티브한 기능을 가능하게 만들어주는 것이 바로 자바스크립트(JavaScript)
자바스크립트는 어떤 언어인가?
자바스크립트(JavaScript)는
웹 브라우저에서 동작하는 인터프리터 기반의 프로그래밍 언어
초기에는 단순한 스크립트 언어였지만, 지금은 웹 개발의 핵심 언어로 자리 잡았어.
자바스크립트의 특징 몇 가지를 간단히 볼게:
- 인터프리터 언어
- 브라우저가 코드를 한 줄씩 읽으며 바로 실행
- 동적 타이핑(Dynamic Typing)
- 변수가 어떤 자료형이든 자유롭게 담을 수 있음
- 객체 기반
- 대부분의 것이 객체처럼 동작함 (배열, 함수 등도 객체)
- 함수형 프로그래밍 지원
- 함수를 값처럼 전달할 수 있음 (콜백 함수 등)
- 이벤트 기반
- 사용자와의 상호작용(클릭, 입력 등)에 반응하는 구조
- 범용성
- 브라우저뿐 아니라 Node.JS, React Native, Electron등 다양한 환경에서 사용 가능
HTML, CSS, JavaScript의 역할 비교
자바스크립트는 보통 HTML, CSS와 함께 사용돼.
이 셋의 관계를 건축물에 비유해보면 이렇게 정리할 수 있어.
- HTML
- 구조와 내용
- 건물의 뼈대
- CSS
- 스타일과 디자인
- 건물의 외관, 인테리어
- JavaScript
- 동작과 기능
- 엘리베이터, 자동문, 조명 센서 등
즉, 자바 스크립트는 웹 페이지를 '살아 움직이게' 만들어주는 기술이야
자바스크립트는 어디에 사용될까?
자바 스크립트는 웹 브라우저에서만 쓰이는 게 아니라
이제는 앱, 서버, 데스크탑 프로그램까지 진출했어
- 웹 프론트엔드
- 버튼 클릭, 스크롤 애니메이션
- 모달 창, 탭 메뉴, 이미지 슬라이드
- 폼 유효성 검사
- 실시간 검색 자동완성
- 웹 백엔드 (Node.JS)
- 서버 구축
- 데이터베이스 연결
- API 제공
- 앱 개발
- React Native를 사용해 ios/Android 앱 개발
- 데스크탑 애플리케이션
- Electron으로 Slack, VSCode 같은 앱 개발 가능
간단한 코드 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function sayHello() {
alert("안녕하세요! 자바스크립트 세계에 오신 걸 환영합니다");
}
</script>
</head>
<body>
<h2>JS 연재 시리즈 #1</h2>
<button onClick="sayHello()">인사하기</button>
</body>
</html>
- <script> 태그 안에 자바스크립트 코드가 있어
- SayHello() 함수는 버튼 클릭 시 실행되
- alert()는 브라우저에 팝업을 띄어주는 내장 함수야
이 예제는 브라우저에서 자바스크립트가 어떻게 동작하는지 보여주는 아주 기본적인 구조야.
자바스크립트의 진짜 힘 : 동적 웹
정적인 HTML은 매번 새로고침해야 페이지 내용이 바뀌지만,
자바스크립트를 사용하면 사용자가 어떤 행동을 했을 떄 페이지 일부만 변경하거나,
서버에서 데이터를 받아와서 자동으로 화면을 갱신할 수 있어.
예를 들면,
- 쇼핑몰 상품 수량 + 버튼
- 실시간 채팅
- 무한 스크롤 뉴스 피드
자바스크립트로 할 수 있는 것들
- 웹 페이지 제어 (DOM 조작)맘
- 이벤트 처리 (클릭, 키보드 입력 등)
- 서버와 비동기 통신 (fetch, axios)
- 애니메이션 구현
- 브라우저 저장소 (LocalStorage, SessionStorage 등)
- 프론트엔드 프레임워크 사용 (React, Vue, Angular 등)
- 백엔드 (Node.js) 개발
- 모바일 앱, 데스크탑 앱 개발
마무리 정리
자바스크립트는 더 이상 단순한 웹용 언어가 아니야
웹의 중심 언어이자, 다양한 플랫폼에서 사용되는 범용 프로그래밍 언어로 성장했어.
앞으로 이 연재 시리즈를 통해 자바스크립트를 기초부터 실전까지 차근차근 익혀보자!
다음 편 예고
JavaScript 기본 연재 #2 - 변수와 상수의 차이점 (let, const, var)
- 변수를 선언하는 방식은 왜 여러 개일까?
- var은 왜 잘 안 쓸까?
- let과 const는 언제 사용하는 걸까?
'Front > JavaScript' 카테고리의 다른 글
| [JavaScript 기본 연재 #2] 💡변수와 상수 - 데이터를 저장하는 그릇 (3) | 2025.07.22 |
|---|---|
| [JavaScript] 자바스크립트 브라우저 객체 모델 (0) | 2024.08.21 |
| [JavaScript] Array 객체 (0) | 2024.08.06 |
| [JavaScript] 사용자 정의 객체 (0) | 2024.08.06 |
| [JavaScript] 객체 (0) | 2024.08.05 |