[자바스크립트 14일 완전정복] 1일차 - 자바스크립트! 첫걸음, 환경 설정부터!

📌 자바스크립트, 대체 뭐길래 이렇게 인기일까?

자바스크립트(JavaScript) 하면 일단 웹 개발에서 빼놓을 수 없는 핵심 언어쥬?
HTML, CSS랑 삼총사처럼 붙어다니면서 웹 페이지를 더 생동감 있게 만들어주는 역할을 합니다.
근데 요즘은 프론트엔드뿐만 아니라 백엔드, 모바일 앱, 게임 개발까지도 다 활용된다는 거! 😮

그러니까 한 마디로, 자바스크립트 하나만 제대로 익혀도
웹부터 앱까지 전천후 개발자로 성장할 수 있다! 이 말입니다. 💡

오늘은 첫날이니까 자바스크립트가 정확히 뭔지,
어떻게 실행하는지, 개발 환경을 어떻게 세팅하면 되는지 깔끔하게 정리해드릴게요!

🔥 자바스크립트, 이게 왜 중요하냐면요?

자바스크립트는 원래 웹 브라우저에서 인터랙티브한 요소를 추가하려고 만들어졌습니다.
예를 들면, 버튼을 클릭했을 때 색깔이 변하거나,
페이지 스크롤에 따라 애니메이션이 작동하는 것들이 다 자바스크립트 덕분이에요!

하지만 지금은 웹사이트뿐만 아니라 서버(Node.js), 모바일 앱(React Native),
게임(Phaser.js, Three.js), AI 프로젝트(TensorFlow.js) 등 활용 분야가 어마어마합니다.

📌 주요 특징

동적 타입 언어 → 변수 타입이 유동적이라 자유도 높음
인터프리터 언어 → 코드를 한 줄씩 해석해서 실행 (컴파일 불필요)
객체 기반 프로그래밍 → 모든 게 객체(Object)로 이루어짐
이벤트 기반 프로그래밍 → 버튼 클릭, 마우스 이동 같은 이벤트를 쉽게 처리 가능
멀티 패러다임 → 객체지향, 함수형, 프로토타입 기반 프로그래밍을 모두 지원

🌐 웹 개발에서 자바스크립트의 역할

이거 이해하면 웹 개발 기본 개념이 한방에 정리됩니다!

✅ HTML → 웹 페이지의 구조(뼈대)
✅ CSS → 웹 페이지의 디자인(외형)
✅ JavaScript → 웹 페이지의 기능(상호작용)

예를 들어, 버튼을 만들고
👉 CSS로 예쁘게 꾸미고
👉 JavaScript로 클릭하면 동작하게 만드는 거쥬!

<button onclick="alert('안녕하세요!')">눌러보세요!</button>

위 코드에서 버튼을 누르면 "안녕하세요!" 라는 팝업이 뜹니다.
바로 이런 식으로 자바스크립트가 웹 페이지에 생명력을 불어넣는 역할을 합니다. 🚀

🖥️ 자바스크립트 실행 방법

자바스크립트를 실행하는 방법은 여러 가지가 있습니다!

1️⃣ 브라우저에서 실행하기

크롬, 파이어폭스, 엣지 등 모든 브라우저에서 실행 가능
F12 또는 Ctrl + Shift + I 눌러서 개발자 도구(DevTools) 열기
Console 탭에서 직접 실행 가능

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

콘솔에 Hello, JavaScript! 출력되면 성공! 🎉

2️⃣ 온라인 코드 에디터 활용하기

별도 설치 없이 온라인에서 바로 실행 가능!

3️⃣ VS Code에서 실행하기 (Node.js 활용)

본격적으로 개발할 거면 VS Code + Node.js 조합 추천!

✅ 설치 방법

VS Code 공식 사이트에서 다운로드
Node.js 공식 사이트에서 최신 버전 설치
설치 완료 후 터미널(Ctrl + ~)에서 버전 확인
```
node -v
```
index.js 파일 생성 후 아래 코드 입력
```
console.log("Hello, World!");
```
터미널에서 실행
```
node index.js
```
Hello, World! 출력되면 세팅 완료! 🎉

⚠️ 실행할 때 주의해야 할 점

자바스크립트를 실행할 때 자주 발생하는 오류들을 체크해볼까요?

✅ 브라우저에서 실행 안 될 때

자바스크립트가 비활성화 되어 있을 수도 있음 → 설정에서 활성화 필요
<script> 태그를 <body> 안에 넣거나 defer 속성 추가 필요
```
<script defer src="script.js"></script>
```

✅ Node.js 실행 오류

"node: command not found" → Node.js 설치 안 됨!
"SyntaxError: Unexpected token" → 코드 문법 오류

✅ 콘솔 출력이 안 될 때

브라우저에서 개발자 도구 Console 탭 확인 필수!
VS Code에서 터미널이 열려 있는지 확인

🎯 오늘 배운 내용 정리!

✅ 자바스크립트는 웹 개발의 필수 언어!
✅ HTML, CSS와 함께 웹의 삼총사 역할을 한다.
✅ 웹뿐만 아니라 서버, 모바일, 게임 등 다양한 분야에서 활용된다.
✅ 브라우저, 온라인 에디터, VS Code + Node.js에서 실행 가능하다.
✅ 개발 환경 세팅이 중요! (VS Code + Node.js 강추)

🚀 다음 강의 예고

오늘은 자바스크립트 개요와 환경 설정을 배웠으니,
다음 시간부터는 변수, 데이터 타입 등 기본 문법을 배워볼 거예요!

직접 코드를 실행하면서 배우는 게 제일 중요하니까
VS Code 설치하고, Node.js 실행하는 것부터 차근차근 따라 해보세요.

🔥 다음 강의에서 만나요! 🔥

저작자표시 비영리 동일조건

'코드 정리 > Javascript' 카테고리의 다른 글

[자바스크립트 14일 완전정복] 5일차 - 객체와 배열 (0)	2025.03.07
[자바스크립트 14일 완전정복] 4일차 - 함수와 스코프 (0)	2025.03.06
[자바스크립트 14일 완전정복] 3일차 - 연산자와 제어문 (1)	2025.03.05
[자바스크립트 14일 완전정복] 2일차 - 기본 문법과 변수 (0)	2025.03.04
초보 개발자가 꼭 알아야 할 흔한 실수 4가지 (그리고 해결법!) (1)	2025.02.19