frontend/javascript

⚡ 자바스크립트 쉽게 배우는 법

mirabo01 2025. 11. 3. 22:04

웹 개발을 시작하려면 반드시 마주하게 되는 언어, 자바스크립트(JavaScript).
프로그래밍 초보자에게는 다소 낯설지만,
이 언어는 오늘날 웹의 90% 이상을 움직이는 핵심 기술이다.

이 글에서는 자바스크립트를 ‘쉽게, 직관적으로’ 배우는 방법을 정리했다.
기초 개념부터 실전 예시까지, 웹 브라우저만 있으면 바로 실습 가능한 방식으로 안내한다.

#자바스크립트입문 #코딩공부 #웹개발기초

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

“HTML이 구조를 만들고, CSS가 꾸민다면, JavaScript는 움직이게 한다.”

자바스크립트는 웹페이지를 동적으로 변화시키는 언어다.
버튼을 클릭했을 때 팝업이 뜨거나, 입력창에서 실시간으로 글자가 바뀌는 등
웹에서 ‘움직이는 모든 것’은 대부분 자바스크립트가 담당한다.

🌱 2. 첫 코드 — 콘솔 출력하기

브라우저의 개발자 도구(Console)에 아래 코드를 입력해보자.

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

결과:

Hello, JavaScript!

이 한 줄이 자바스크립트의 첫걸음이다.
console.log()는 코드 실행 결과를 확인할 때 가장 많이 사용하는 함수다.

⚙️ 3. 변수 선언과 자료형

자바스크립트에서 값을 저장하려면 변수가 필요하다.
세 가지 키워드(var, let, const)로 변수를 선언한다.

let name = "기범";
const age = 25;
var city = "서울";
  • let: 재할당 가능
  • const: 상수(값 변경 불가)
  • var: 오래된 방식(지양하는 추세)
let count = 1;
count += 1; // 2

💡 Tip: 최신 자바스크립트(ES6+)에서는 let과 const를 사용하는 것이 표준이다.

🔁 4. 조건문과 반복문

조건문 (if, else)

let score = 90;

if (score >= 90) {
  console.log("A등급");
} else {
  console.log("B등급");
}

반복문 (for)

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

이 코드를 실행하면 콘솔에 1 2 3 4 5가 출력된다.
조건문은 분기, 반복문은 루프의 개념이다.

🧩 5. 함수(Function)

함수는 코드를 재사용하기 위한 가장 기본적인 단위다.

function greet(name) {
  return `안녕하세요, ${name}님!`;
}

console.log(greet("기범"));

결과:

안녕하세요, 기범님!

💡 Tip: 함수 표현식도 가능하다.

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

🎨 6. HTML과 함께 쓰기

HTML 파일에 직접 자바스크립트를 삽입할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JS 예제</title>
</head>
<body>
  <button onclick="alert('버튼이 클릭되었습니다!')">클릭</button>
  <script>
    console.log("페이지가 로드되었습니다!");
  </script>
</body>
</html>

버튼을 누르면 알림창이 뜨고, 콘솔에는 메시지가 출력된다.
즉, 자바스크립트는 HTML 요소와 직접 상호작용할 수 있다.

🔍 7. DOM 조작 (Document Object Model)

DOM은 웹페이지를 구성하는 HTML 구조를 자바스크립트로 제어할 수 있게 만든 개념이다.

<p id="text">기본 문장</p>
<button onclick="changeText()">변경</button>

<script>
  function changeText() {
    document.getElementById("text").innerText = "문장이 변경되었습니다!";
  }
</script>

버튼을 누르면 <p> 태그의 문장이 바뀐다.
이처럼 자바스크립트는 이벤트(클릭, 입력 등) 를 감지하고 HTML을 실시간으로 수정할 수 있다.

⚡ 8. 배열과 객체

배열 (Array)

const fruits = ["사과", "바나나", "포도"];
console.log(fruits[1]); // 바나나

객체 (Object)

const person = { name: "기범", age: 25 };
console.log(person.name); // 기범

파이썬의 리스트·딕셔너리처럼,
자바스크립트도 데이터를 구조적으로 저장할 수 있다.

🚀 9. 초보자를 위한 학습 루틴

  1. 개념 → 실습 → 응용 3단계로 반복하라.
  2. 브라우저 콘솔에서 바로 코드를 테스트해라.
  3. 30줄 이하의 간단한 미니 프로젝트를 꾸준히 만들어라.
    (ex. 계산기, 할 일 목록, 랜덤 문구 생성기 등)

💡 실습이 곧 학습이다.
이론만 공부하면 금방 잊지만, 손으로 친 코드는 몸에 남는다.

🎯 10. 마무리 — “눈에 보이는 결과로 재미를 느껴라”

자바스크립트의 장점은 즉각적인 시각적 피드백이다.
내가 입력한 코드가 바로 화면에서 반응하는 경험은
프로그래밍의 ‘재미’를 가장 빠르게 느낄 수 있는 순간이다.

  • 복잡한 기능보다 작은 변화를 먼저 시도하자.
  • HTML 요소 하나라도 바꿔보면, 코드가 살아 있다는 걸 느낄 수 있다.
  • 익숙해지면 React나 Next.js 같은 프레임워크로 자연스럽게 확장 가능하다.

👉 코드는 어렵지 않다. 결과가 재미있어야 오래 간다.