01 / 15
SESSION 20 · Part 5 웹 개발

JavaScript —
웹에 생명을 불어넣다

변수, 함수, 비동기 — 움직이는 웹의 언어

02 / 15
🎯

이 세션에서
배우는 것

⚡
JS의 역할
웹에서 JavaScript가 맡는 동작과 상호작용을 이해한다
📦
변수와 함수
let/const, 화살표 함수, 배열 기초를 익힌다
⏳
비동기 처리
동기와 비동기, async/await 개념을 익힌다
03 / 15
💭

왜 JavaScript가
필요한가?

HTML(구조) + CSS(스타일)만으로는 버튼을 눌러도 아무 일도 일어나지 않는다.
클릭, 입력, 데이터 요청 — 이 모든 움직임은 JavaScript의 몫이다.

오늘날 웹이 앱처럼 부드러운 경험을 주는 이유가 바로 여기에 있다.

04 / 15

변수 — let vs const vs var

변수는 값을 담는 상자. 어떤 상자를 쓸지에 따라 규칙이 달라진다.

🪣 var (구식)
재선언 가능 → 버그 위험
함수 스코프만 지원
호이스팅 혼란
현재는 사용 지양
📦 let
재할당 가능
블록 스코프
반복문 카운터 등
값이 변할 때 사용
🔒 const
재할당 불가 (상수)
블록 스코프
의도를 명확히 표현
기본 선택
05 / 15
⚡

변수·함수·이벤트 리스너 —
더 깊게 이해하기

JavaScript의 세 핵심 요소는 항상 함께 움직인다. 이 관계를 이해하면 코드가 보인다.

1
변수 — 데이터를 기억한다
const count = 0; 처럼 값을 이름에 묶어둔다. 나중에 꺼내 쓰거나 바꾸기 위해.
2
함수 — 동작을 포장한다
const addOne = () => count + 1; 처럼 반복 가능한 작업 단위. 한번 만들면 어디서든 호출.
3
이벤트 리스너 — 신호를 감지한다
btn.addEventListener('click', addOne); — 사용자가 클릭하면 함수가 실행된다.
4
세 요소가 연결되면
변수에 담긴 값 → 함수가 처리 → 리스너가 트리거 — 이것이 모든 웹앱의 기본 패턴이다.
06 / 15

함수와 조건문

재사용 가능한 작업 단위가 함수. 조건에 따라 흐름을 나눈다.

// 화살표 함수
const greet = (name) => "Hello, " + name;

// 조건문
function checkAge(age) {
  if (age >= 18) {
    return "성인";
  } else {
    return "미성년자";
  }
}

// 배열과 반복
const fruits = ["사과", "배", "감"];
fruits.forEach((f) => console.log(f));
07 / 15
🖱️

클릭부터 화면 변경까지 —
실제로는 어떻게?

버튼을 한 번 클릭하면, 내부에서는 이런 순서로 일이 벌어진다.

👆 클릭
→
📡 이벤트 발생
→
⚡ 함수 실행
→
🌲 DOM 수정

핵심: JavaScript는 혼자 화면을 바꾸지 않는다. 반드시 DOM API를 통해 요소에 접근하고, 그 요소의 속성을 수정해야 화면이 바뀐다.

08 / 15
⏳

동기 vs 비동기

서버에서 데이터를 기다리는 동안, 다른 일도 할 수 있어야 한다.

요청 전송
→
⏱️ 기다리는 동안
다른 작업 진행
→
📦 응답 도착
결과 처리
async function fetchUser() {
  const res = await fetch("/api/user");
  const data = await res.json();
  return data;
}
09 / 15
📱

실생활에서
이렇게 쓰여요

우리가 매일 사용하는 앱과 서비스 속에 JavaScript가 녹아 있다.

💬
카카오톡 읽음 표시
메시지 수신 즉시 읽음 숫자가 실시간으로 바뀐다 — JS가 DOM을 업데이트한다
🛒
쿠팡 장바구니
수량 +/- 버튼을 누르면 페이지 새로고침 없이 가격이 즉시 반영된다
🔍
네이버 자동완성
글자를 입력할 때마다 서버에 비동기 요청을 보내 추천 검색어를 가져온다

💡 이 개념이 없다면 웹은 클릭할 때마다 페이지 전체가 새로고침되는 정적 문서일 것이다.

10 / 15
💡

자주 하는
오해 바로잡기

이렇게 생각하기 쉽지만, 실제로는 조금 다릅니다.

❌ 흔한 오해
  • JavaScript는 Java의 축약어다
  • JavaScript는 웹 브라우저에서만 쓰인다
  • console.log는 단순한 출력문이다
✓ 실제로는
  • Java와 JavaScript는 완전히 다른 언어 — 이름이 비슷할 뿐이다 (마케팅 이유)
  • Node.js로 서버에서도, React Native로 앱에서도 쓰인다
  • console.log는 개발자의 디버깅 도구 — 변수 값을 실시간으로 확인하는 핵심 습관
11 / 15
🎭

HTML/CSS/JS는 인형극이다

세 언어는 각자의 역할을 맡아 하나의 무대를 만든다.

🎪 인형극 비유
인형(구조)
=
HTML — 뼈대와 내용
의상(스타일)
=
CSS — 색깔과 모양
조종사(동작)
=
JavaScript — 움직임과 반응
관객 반응
=
이벤트 — 클릭/입력 등 사용자 행동
12 / 15
🤖

이걸 알면
AI와 이렇게 대화해요

JavaScript 개념을 이해하면 Claude나 ChatGPT를 훨씬 잘 활용할 수 있다.

👤
버튼 클릭하면 텍스트가 바뀌게 해주세요.
🤖
어떤 버튼인지, 어떤 텍스트로 바꾸고 싶으신지, 어디에 표시될지 알려주시면 더 정확하게 도와드릴 수 있어요.
👤
getElementById로 id="myBtn" 버튼 클릭 시 id="result" 텍스트를 "완료!"로 바꾸는 JavaScript 코드 작성해줘.
🤖
document.getElementById('myBtn').addEventListener('click', () => { document.getElementById('result').textContent = '완료!'; }); — 이렇게 하면 됩니다!
13 / 15
✅

이렇게
이해하셨나요?

✅
맞게 이해하셨어요
JavaScript는 웹 페이지에 동적 기능(클릭, 애니메이션, 데이터 요청)을 추가한다
❌
이렇게는 아니에요
JavaScript와 Java는 같은 언어다 (전혀 다른 언어이며, 이름만 비슷하다)
✅
맞게 이해하셨어요
const는 재할당이 불가능한 상수 선언이며, 기본으로 사용하는 것이 좋다
❌
이렇게는 아니에요
비동기 코드는 항상 응답이 올 때까지 멈추고 기다린다 (다른 작업은 계속 진행된다)

💪 변수·함수·이벤트 리스너를 이해했다면, 웹 개발의 핵심을 잡은 겁니다!

14 / 15
📌

핵심 정리

📦
let / const
var는 피하고
기본은 const
🎯
함수
화살표 함수로
간결하게 재사용
📋
배열
forEach, map, filter로
데이터 다루기
⏳
비동기
async/await로
기다림을 깔끔하게
🔀
조건문
if/else로
흐름 분기
⚡
웹의 동력
모든 상호작용의
실제 동작은 JS
15 / 15
🚀

다음 세션
Session 21 · TypeScript 입문

JavaScript로 HTML 요소를 직접 조작한다.
클릭하면 색이 바뀌고, 입력하면 결과가 나타나는 — 진짜 웹앱의 시작이다.

💡 기억할 것: const가 기본, let은 필요할 때만.

슬라이드 목록