← 메인으로

웹 프론트엔드

JavaScript

웹 페이지에 움직임을 주는 언어 — 변수 · 함수 · 이벤트 · 화면 바꾸기

CLICK TO OPEN

JavaScript란?

HTML 뼈대
CSS 옷과 색깔
JavaScript 움직임과 반응

JS로 할 수 있는 것

• 버튼 클릭하면 글자·그림 바꾸기
• 사용자가 적은 이름 기억하기
• 계산하고 결과 화면에 보여주기
• 게임·애니메이션 같은 움직임 만들기

이 페이지 코드 안내

모든 예제는 ES6+(2015년 이후 최신 자바스크립트) 문법으로 작성
• 변수는 let·상수는 const (옛날 var 안 씀)
• 함수는 화살표 함수 ( ) => { } 사용
• 문장 조립은 템플릿 리터럴 `${ }` (옛날 + 이어붙이기 대신)
• 색깔 규칙 — 상수·변수·메서드·함수·속성을 색으로 구분

참고 링크

• MDN — 상호작용 추가하기 — 이 페이지의 원본 문서
• MDN JavaScript 메인 — 전체 안내서

Hello world!

Hello world! — 첫 JavaScript

페이지의 큰 제목(h1)을 JS로 바꾸는 첫걸음, HTML이 제목을 만들고 CSS가 꾸미고 JS가 글자를 바꾸기, 세 파일이 협동하는 가장 작은 예제

미리보기 — 아래 코드가 실제로 실행된 결과

버튼을 누르면 아래 scripts/main.js 코드가 그대로 작동

폴더 구조

02/
├─ index.html        # 화면 (h1 + 버튼)
├─ styles/
│  └─ main.css       # 꾸미기
└─ scripts/
   └─ main.js        # 글자 바꾸기

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Hello world</title>
  <!-- CSS 연결: head 안에 -->
  <link rel="stylesheet" href="styles/main.css">
</head>
<body>
  <h1 id="title">아직 그대로예요</h1>
  <button id="btn">바꾸기</button>
  <!-- JS 연결: body 닫기 직전 -->
  <script src="scripts/main.js"></script>
</body>
</html>

styles/main.css

/* 제목을 토마토색 + 아주 큰 글씨로 */
#title { color: tomato; font-size: 40px; }

/* 버튼에 안쪽 여백 주고 손가락 커서 */
button { padding: 10px 20px; cursor: pointer; }

scripts/main.js

// 1. id가 "title"인 제목을 찾아 title 상자에 담기
const title = document.querySelector("#title");
// 2. id가 "btn"인 버튼을 찾아 btn 상자에 담기
const btn = document.querySelector("#btn");

// 3. btn을 클릭하면 안쪽 함수 실행 (이벤트 연결)
btn.addEventListener("click", () => {
  // 4. 제목 글자를 "Hello world!"로 교체 (화살표 함수 안에서)
  title.textContent = "Hello world!";
});

핵심 포인트

• const — 상수(constant) 만드는 단어, 한 번 담으면 다시 안 바뀌는 상자
• title · btn — 찾은 요소를 담는 상자 이름(상수명), const로 만들어 값이 고정된 상수
• document.querySelector("#title") — 메서드(객체에 딸린 도구), id로 요소 하나 찾기
• ( ) => { … } — 화살표 함수(ES6), 이름 없이 그 자리서 바로 쓰는 함수, 옛 function( )의 최신 표기
• addEventListener("click", 함수) — 메서드, "클릭되면 이 함수 실행" 약속
• textContent — 속성(property), 요소 안 글자 내용
• 속성 vs 메서드 — 점 뒤 이름에 괄호 ( ) 붙으면 메서드(동작), 안 붙으면 속성(값)
• 연결: CSS는 <head>에 link로, JS는 </body> 앞에 script로
• 같은 id로 셋이 연결: HTML id="title" → CSS #title → JS querySelector("#title")
• 위치는 강제 아님 — spec상 link·script 둘 다 어디든 허용, 깜빡임·blocking 때문에 생긴 관례
• CSS를 <head>에 — 그리기 전 스타일 알아야 스타일 안 입은 화면이 번쩍이는 것(FOUC) 방지
• script를 </body> 앞에 — HTML 다 그린 뒤 실행, querySelector가 요소를 찾음(위에 두면 아직 없어 null)
• 실무 권장 — <head>에 두고 defer 속성(다운로드 병렬·파싱 후 실행·순서 보장)

변수 (Variables)

변수 — 값을 담는 상자

변수는 이름표 붙은 상자, 그 안에 숫자·글자 같은 값을 넣어두고 필요할 때 꺼내 쓰기, 상자 이름만 부르면 안에 든 값이 따라옴

미리보기 — 아래 코드가 실제로 실행된 결과

이름을 넣고 버튼을 누르면, 입력값이 변수에 담겨 인사로 나옴

폴더 구조

03/
├─ index.html        # 화면 (입력 + 버튼)
├─ styles/
│  └─ main.css       # 꾸미기
└─ scripts/
   └─ main.js        # 변수에 담고 꺼내기

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles/main.css">
</head>
<body>
  <input id="name" placeholder="이름 입력">
  <button id="greet">인사하기</button>
  <p id="out">이름을 넣고 버튼을 눌러봐</p>
  <script src="scripts/main.js"></script>
</body>
</html>

styles/main.css

/* 결과 문장(id="out")을 크고 굵게 */
#out { font-size: 18px; font-weight: 700; margin-top: 12px; }

/* 입력칸과 버튼에 안쪽 여백 */
input, button { padding: 8px 12px; font-size: 14px; }

scripts/main.js

// 1. 입력칸과 결과 칸을 찾아 상자에 담기
const nameInput = document.querySelector("#name");
const out = document.querySelector("#out");

// 2. "인사하기" 버튼을 누르면 실행 (화살표 함수)
document.querySelector("#greet").addEventListener("click", () => {
  // 3. 입력한 글자를 myName 변수(상자)에 담기 (.value = 입력칸 글자)
  let myName = nameInput.value;
  // 4. 템플릿 리터럴 `${ }`로 값을 문장에 끼워 넣기
  out.textContent = `안녕, ${myName}!`;
});

핵심 포인트

• 식별자(변|상수명) — 값을 담아 이름 붙인 상자, 이름만 부르면 안에 든 값이 따라옴
• let — "새 변수(상자) 만들게" 하는 마법 단어
• = — "이 값을 상자에 넣어" 라는 뜻, 같다는 비교가 아님
• let vs const — let은 값을 나중에 바꿀 수 있는 상자, const는 한 번 담으면 고정
• .value — 입력칸에 친 글자를 꺼내는 속성
• 템플릿 리터럴 `안녕, ${이름}!` — 백틱 안 ${ }에 값 끼우기, 옛 "안녕," + 이름 이어붙이기의 최신 표기

데이터 타입

데이터 타입 — 상자에 담는 값의 종류

상자에 담는 값에도 종류가 있음, 글자·숫자·참거짓·여러 개 묶음 등, 종류에 따라 쓰는 법이 조금씩 다름

값의 종류

종류	설명	예시
`String`	글자 (따옴표로 감싸기)	`"Bob"`
`Number`	숫자 (따옴표 없음)	`10`
`Boolean`	참 또는 거짓	`true`, `false`
`undefined`	값을 아직 안 넣음 (선언만 한 변수)	`let x;` 한 뒤의 x
`null`	의도적 "비어있음" 표시	`null`
`Array`	여러 값을 한 줄에 묶기	`[1, "Bob", 10]`
`Object`	거의 모든 것 (덩어리)	`document.querySelector("h1")`

미리보기 — 아래 코드가 실제로 실행된 결과

버튼 7개로 String·Number·Boolean·undefined·null·Array·Object 각각의 값과 typeof 확인

폴더 구조

04/
├─ index.html        # 화면 (버튼들)
├─ styles/
│  └─ main.css       # 꾸미기
└─ scripts/
   └─ main.js        # 값의 타입 알아내기

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles/main.css">
</head>
<body>
  <button id="bStr">글자</button>
  <button id="bNum">숫자</button>
  <button id="bBool">참거짓</button>
  <button id="bUndef">undefined</button>
  <button id="bNull">null</button>
  <button id="bArr">배열</button>
  <button id="bObj">객체</button>
  <p id="out">버튼을 누르면 값과 타입을 보여줘</p>
  <script src="scripts/main.js"></script>
</body>
</html>

styles/main.css

/* 버튼들에 여백 + 사이 간격 */
button { padding: 8px 12px; font-size: 14px; margin: 2px; }

/* 결과(id="out")를 크고 굵게 */
#out { font-size: 16px; font-weight: 700; margin-top: 12px; }

scripts/main.js

// 결과 칸을 찾아 담기
const out = document.querySelector("#out");

// 값을 받아 "값 (타입: ...)" 형태로 보여 주는 화살표 함수
const show = (value) => {
  // 객체·배열은 보기 좋게 JSON 글자로, 나머지는 그대로
  const shown = (typeof value === "object" && value !== null) ? JSON.stringify(value) : value;
  // 템플릿 리터럴 `${ }`로 값과 타입(typeof)을 한 문장에 끼워 넣기
  out.textContent = `${shown}  (타입: ${typeof value})`;
};

// 선언만 하고 값을 안 넣으면 그 변수는 undefined (← 실제 사용 예시)
let empty;

// 버튼마다 서로 다른 타입의 값을 넣어 호출 (7가지 타입 모두)
document.querySelector("#bStr").addEventListener("click", () => show("안녕"));          // String
document.querySelector("#bNum").addEventListener("click", () => show(10));              // Number
document.querySelector("#bBool").addEventListener("click", () => show(true));            // Boolean
document.querySelector("#bUndef").addEventListener("click", () => show(empty));           // undefined (값 미할당)
document.querySelector("#bNull").addEventListener("click", () => show(null));             // null → typeof는 "object" (유명한 버그)
document.querySelector("#bArr").addEventListener("click", () => show([1, "Bob", 10]));   // Array → object
document.querySelector("#bObj").addEventListener("click", () => show({ name: "Bob" }));  // Object

핵심 포인트

• 글자는 꼭 따옴표로 감싸기, 숫자는 안 감싸기
• Array는 대괄호 [ ] 안에 값을 쉼표로 나열
• typeof 값 — 그 값의 타입을 글자로 알려 줌 (예: "string"·"number"·"object")
• undefined(값 미할당)·null(의도적 비움)도 타입의 하나
• 결과 문장은 템플릿 리터럴 `${값} (타입: ${typeof 값})`로 조립

연산자 & 주석

연산자는 값을 더하고 비교하는 기호, 주석은 컴퓨터는 무시하고 사람만 읽는 메모

연산자

기호	역할	예시
`+`	더하기 / 글자 잇기	`6 + 9` → 15
`- * /`	빼기·곱하기·나누기	`8 * 2` → 16
`=`	상자에 값 넣기	`let x = 3;`
`===`	같은지 비교 (참/거짓)	`x === 3` → true
`!==`	다른지 비교	`x !== 5` → true

미리보기 — 아래 코드가 실제로 실행된 결과

두 숫자와 기호를 고르고 계산을 누르면 연산자가 실제로 작동

폴더 구조

05/
├─ index.html        # 화면 (숫자 + 기호 + 버튼)
├─ styles/
│  └─ main.css       # 꾸미기
└─ scripts/
   └─ main.js        # 연산자로 계산

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles/main.css">
</head>
<body>
  <input id="a" type="number" value="6">
  <select id="op">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input id="b" type="number" value="9">
  <button id="calc">계산</button>
  <p id="out">두 숫자와 기호를 고르고 계산을 눌러봐</p>
  <script src="scripts/main.js"></script>
</body>
</html>

styles/main.css

/* 숫자 입력칸은 좁게 */
input { width: 60px; padding: 6px; font-size: 14px; }

/* 기호 선택과 버튼에 여백 */
select, button { padding: 6px 10px; font-size: 14px; }

/* 결과(id="out")를 크고 굵게 */
#out { font-size: 18px; font-weight: 700; margin-top: 12px; }

scripts/main.js

// 1. 입력칸·기호 선택·결과 칸을 찾아 담기
const a = document.querySelector("#a");
const b = document.querySelector("#b");
const op = document.querySelector("#op");
const out = document.querySelector("#out");

// 2. "계산" 버튼을 누르면 실행 (화살표 함수)
document.querySelector("#calc").addEventListener("click", () => {
  // Number( ): 입력칸 글자 "3"을 숫자 3으로 바꾸기
  const x = Number(a.value);
  const y = Number(b.value);
  let result;   // 결과는 나중에 정해지니 let
  // 3. 고른 기호(op)에 따라 다른 연산자로 계산 (=== 는 같은지 비교)
  if (op.value === "+") { result = x + y; }
  else if (op.value === "-") { result = x - y; }
  else if (op.value === "*") { result = x * y; }
  else { result = x / y; }
  // 템플릿 리터럴로 "3 + 5 = 8" 같은 문장 조립
  out.textContent = `${x} ${op.value} ${y} = ${result}`;
});

핵심 포인트

• +는 숫자끼리는 더하기, 글자끼리는 이어 붙이기
• =는 넣기, ===는 같은지 비교, 헷갈리지 않기
• // 뒤는 주석 — 컴퓨터는 무시, 사람만 읽는 메모
• .value로 입력 글자 꺼내고 Number( )로 숫자 변환
• 결과 문장은 템플릿 리터럴 `${x} ${기호} ${y} = ${result}` — 옛 + 이어붙이기보다 읽기 쉬움

조건문 (if/else)

조건문 — 만약 ~라면

"만약 이렇다면 이것을 하고, 아니면 저것을 해" 라고 컴퓨터에게 시키는 갈림길, if(만약)와 else(아니면)로 길을 나누기

미리보기 — 아래 코드가 실제로 실행된 결과

아이스크림을 고르고 확인을 누르면 if/else 코드가 그대로 작동

폴더 구조

06/
├─ index.html        # 화면 (선택 + 버튼)
├─ styles/
│  └─ main.css       # 꾸미기
└─ scripts/
   └─ main.js        # 조건 판단

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles/main.css">
</head>
<body>
  <select id="flavor">
    <option value="chocolate">chocolate</option>
    <option value="vanilla">vanilla</option>
    <option value="strawberry">strawberry</option>
  </select>
  <button id="check">확인</button>
  <p id="result">아이스크림을 고르고 확인을 눌러봐</p>
  <script src="scripts/main.js"></script>
</body>
</html>

styles/main.css

/* 결과 문장(id="result")을 크고 굵게 */
#result { font-size: 18px; font-weight: 700; margin-top: 12px; }

/* 선택 목록과 버튼에 안쪽 여백 */
select, button { padding: 8px 12px; font-size: 14px; }

scripts/main.js

// 1. 선택 목록(flavor)과 결과 문장(result)을 찾아 담기
const flavor = document.querySelector("#flavor");
const result = document.querySelector("#result");

// 2. "확인" 버튼을 클릭하면 조건을 판단 (화살표 함수)
document.querySelector("#check").addEventListener("click", () => {
  // 3. 만약(if) 고른 값이 "chocolate"와 같으면(===) 이 문장
  if (flavor.value === "chocolate") {
    result.textContent = "와! 초코 아이스크림 좋아! 🍫";
  } else if (flavor.value === "vanilla") {
    // 4. 첫 조건이 거짓이면 다음 조건(else if)을 검사
    result.textContent = "바닐라도 깔끔하니 좋지! 🍦";
  } else {
    // 5. 위 조건이 모두 거짓이면(else) 이 문장
    result.textContent = "음... 그래도 초코가 최고인데...";
  }
});

핵심 포인트

• if (조건) — 괄호 안 조건이 참(true)이면 바로 아래 중괄호 실행
• else — 조건이 거짓이면 이쪽 실행
• === — 두 값이 같은지 비교, 결과는 참 또는 거짓
• else if — 갈림길 여러 개일 때 (예: 초코·바닐라·딸기)

⚡=== vs == — ===는 타입까지 같아야 참, 실무는 항상 === 권장

함수 (Functions)

함수 — 재사용하는 명령 묶음

함수는 자주 쓰는 명령을 하나로 묶어 이름 붙인 것, 이름만 부르면(호출) 묶어둔 일을 척척 해줌, 마치 자판기 버튼 하나로 음료 나오기

미리보기 — 아래 코드가 실제로 실행된 결과

두 숫자를 넣고 곱하기를 누르면 multiply 함수가 그대로 호출됨

폴더 구조

07/
├─ index.html        # 화면 (입력 + 버튼)
├─ styles/
│  └─ main.css       # 꾸미기
└─ scripts/
   └─ main.js        # 함수 만들고 호출

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles/main.css">
</head>
<body>
  <input id="a" type="number" value="4">
  <span>×</span>
  <input id="b" type="number" value="7">
  <button id="calc">곱하기</button>
  <p id="out">곱하기 버튼을 눌러봐</p>
  <script src="scripts/main.js"></script>
</body>
</html>

styles/main.css

/* 계산 결과(id="out")를 크고 굵게 */
#out { font-size: 20px; font-weight: 700; margin-top: 12px; }

/* 숫자 입력칸은 좁게 */
input { width: 60px; padding: 6px; font-size: 14px; }

/* 버튼에 안쪽 여백 */
button { padding: 6px 14px; font-size: 14px; }

scripts/main.js

// 1. 두 숫자를 곱하는 화살표 함수 (num1, num2 = 받아올 재료=매개변수)
//    => 뒤가 한 줄이면 { return } 없이 그 값이 바로 반환됨
const multiply = (num1, num2) => num1 * num2;

// 2. 입력칸 두 개와 결과 칸을 찾아 담기
const a = document.querySelector("#a");
const b = document.querySelector("#b");
const out = document.querySelector("#out");

// 3. "곱하기" 버튼을 누르면 함수를 불러서(호출) 답을 표시
document.querySelector("#calc").addEventListener("click", () => {
  // Number( ): 입력칸 글자를 숫자로 바꿔 곱하기, 템플릿 리터럴로 문장 조립
  out.textContent = `${a.value} × ${b.value} = ${multiply(Number(a.value), Number(b.value))}`;
});

핵심 포인트

• const 이름 = (재료) => { } — 화살표 함수 만들기, 괄호 안 num1, num2는 매개변수(받아올 재료)
• => 뒤가 한 줄이면 return·중괄호 생략 — (a, b) => a * b 는 곱한 값을 자동으로 돌려줌
• multiply(4, 7) — 재료 4와 7 넣고 함수 부르기(호출), 답 28
• 옛 표기 function multiply( ){ return … } 와 같은 동작, 화살표가 더 짧음

이벤트 (Events)

이벤트 — 사용자 행동에 반응하기

이벤트는 클릭·키 누르기 같은 사용자 행동, "이 행동이 일어나면 이걸 해줘" 라고 미리 약속해두면 페이지가 반응함

미리보기 — 아래 코드가 실제로 실행된 결과

버튼을 누를 때마다 click 이벤트가 일어나 횟수가 늘어남

폴더 구조

08/
├─ index.html        # 화면 (버튼 + 횟수)
├─ styles/
│  └─ main.css       # 꾸미기
└─ scripts/
   └─ main.js        # 클릭 이벤트 처리

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles/main.css">
</head>
<body>
  <button id="btn">여기를 클릭!</button>
  <p id="count">0번 눌렀어요</p>
  <script src="scripts/main.js"></script>
</body>
</html>

styles/main.css

/* 버튼을 크게 + 손가락 커서 */
button { padding: 10px 20px; font-size: 15px; cursor: pointer; }

/* 누른 횟수(id="count")를 크고 굵게 */
#count { font-size: 20px; font-weight: 700; margin-top: 12px; }

scripts/main.js

// 1. 누른 횟수를 셀 상자 n을 0으로 시작 (값이 변하니 let)
let n = 0;
// 2. 버튼과 횟수 표시 칸을 찾아 담기
const btn = document.querySelector("#btn");
const out = document.querySelector("#count");

// 3. 버튼이 클릭될 때마다(이벤트) 실행 (화살표 함수)
btn.addEventListener("click", () => {
  n++;                              // 횟수를 1 늘리기 (n = n + 1 과 같음)
  out.textContent = `${n}번 눌렀어요`;   // 템플릿 리터럴로 갱신
});

핵심 포인트

• addEventListener("click", 함수) — "클릭되면" 그 함수를 실행하라는 약속
• ( ) => { ... } — 화살표 함수(ES6), 이름 없이 그 자리서 바로 쓰는 함수
• n++ — n을 1 늘리기 (n = n + 1 과 같음)
• click 말고도 mouseover(마우스 올림), keydown(키 누름) 등 많음

이미지 바꾸기

이미지 바꾸기 — 클릭하면 그림 토글

그림을 클릭할 때마다 두 그림이 번갈아 바뀌는 장난, 지금 그림이 무엇인지 확인하고 다른 그림으로 교체하기

미리보기 — 아래 코드가 실제로 실행된 결과

그림을 클릭하면 getAttribute/setAttribute로 두 그림이 번갈아 바뀜

폴더 구조

09/
├─ index.html        # 화면 (img)
├─ styles/
│  └─ main.css       # 꾸미기
└─ scripts/
   └─ main.js        # 그림 주소 토글

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles/main.css">
</head>
<body>
  <!-- alt: 이미지가 안 뜰 때 대신 보일 글자 (그림 설명) -->
  <img id="pic" width="96" height="96" alt="클릭하면 바뀌는 그림">
  <p id="hint">그림을 클릭해봐</p>
  <script src="scripts/main.js"></script>
</body>
</html>

styles/main.css

/* 그림(id="pic") 모서리 둥글게 + 손가락 커서 */
#pic { border-radius: 10px; cursor: pointer; }

/* 안내 문구를 회색으로 */
#hint { color: #555; margin-top: 10px; }

scripts/main.js

// 두 그림 주소 (실제 프로젝트에선 "images/cat.png" 같은 파일 주소를 씀)
// 여기선 picsum.photos 더미 이미지 서비스를 사용 — 인터넷 연결 필요
// (?random= 뒤 번호만 다르게 주면 서로 다른 사진을 받아옴)
const IMG_A = "https://picsum.photos/96?random=1";
const IMG_B = "https://picsum.photos/96?random=2";

// 1. 페이지의 그림(id="pic")을 찾아 myImage 상자에 담기
const myImage = document.querySelector("#pic");
// 2. 처음 보여 줄 그림을 IMG_A로 정하기
myImage.setAttribute("src", IMG_A);

// 3. 그림을 클릭할 때마다 실행 (onclick 속성에 화살표 함수 연결)
myImage.onclick = () => {
  // 지금 걸려 있는 그림 주소를 읽어오기 (getAttribute)
  const mySrc = myImage.getAttribute("src");
  if (mySrc === IMG_A) {
    myImage.setAttribute("src", IMG_B);   // A였으면 → B로 바꾸기
  } else {
    myImage.setAttribute("src", IMG_A);   // 아니면 → A로 되돌리기
  }
};

핵심 포인트

• getAttribute("src") — 그림의 파일 주소 읽어오기
• setAttribute("src", "...") — 그림 주소를 새 것으로 바꾸기
• onclick = ( ) => { } — addEventListener 말고 onclick 속성에 함수 거는 방법도 있음
• if/else로 지금 그림을 확인해 반대 그림으로 토글

💡같은 클릭 처리, 두 방법 — onclick은 1개만 걸리고(덮어씀), addEventListener는 여러 개 걸 수 있어 실무 권장:
myImage.addEventListener("click", () => { /* 클릭하면 실행 */ });

🔁"여러 개 건다" = 클릭 1번에 함수 여러 개를 한꺼번에 실행. onclick은 새로 쓰면 앞 함수가 지워져 마지막 1개만 남지만, addEventListener는 등록할 때마다 목록에 쌓여 등록 순서대로 전부 실행:
// onclick — 덮어써서 마지막 1개만
btn.onclick = 저장하기;
btn.onclick = 알림띄우기; // 저장하기 사라짐 → 알림만 실행

// addEventListener — 쌓여서 전부
btn.addEventListener("click", 저장하기);
btn.addEventListener("click", 알림띄우기); // 클릭 1번 → 저장 + 알림 둘 다

환영 메시지 저장

환영 메시지 저장 — 이름 기억하기

사용자에게 이름을 물어보고 브라우저에 저장, 다음에 다시 와도 이름을 기억해서 인사, localStorage가 브라우저의 작은 메모장 역할

미리보기 — 아래 코드가 실제로 실행된 결과

이름을 저장하면 localStorage에 기억됨 (이 미리보기는 새로고침 시 초기화, 실제 브라우저에선 계속 기억)

폴더 구조

10/
├─ index.html        # 화면 (입력 + 버튼)
├─ styles/
│  └─ main.css       # 꾸미기
└─ scripts/
   └─ main.js        # 저장 · 꺼내기

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles/main.css">
</head>
<body>
  <h1 id="greet">안녕하세요!</h1>
  <input id="name" placeholder="이름">
  <button id="save">저장</button>
  <button id="reset">지우기</button>
  <script src="scripts/main.js"></script>
</body>
</html>

styles/main.css

/* 인사말(id="greet")을 보라색으로 */
#greet { color: #7c3aed; }

/* 입력칸과 버튼에 여백 + 오른쪽 간격 */
input, button { padding: 8px 12px; font-size: 14px; margin-right: 4px; }

scripts/main.js

// 1. 인사말(greet)과 이름 입력칸(input)을 찾아 담기
const greet = document.querySelector("#greet");
const input = document.querySelector("#name");

// 2. 처음 열 때 — 저장된 이름이 있으면(getItem) 꺼내서 인사
const saved = localStorage.getItem("name");
if (saved) {
  greet.textContent = `안녕, ${saved}!`;
}

// 3. "저장" 버튼 — 입력한 이름을 브라우저에 저장(setItem) — 화살표 함수
document.querySelector("#save").addEventListener("click", () => {
  const myName = input.value;
  if (!myName) { return; }   // 비어 있으면 아무것도 안 함
  localStorage.setItem("name", myName);
  greet.textContent = `안녕, ${myName}!`;
});

// 4. "지우기" 버튼 — 저장된 이름 삭제(removeItem)
document.querySelector("#reset").addEventListener("click", () => {
  localStorage.removeItem("name");
  greet.textContent = "안녕하세요!";
});

핵심 포인트

• localStorage.setItem("name", 값) — 브라우저 메모장에 저장
• localStorage.getItem("name") — 저장된 값 꺼내기, 없으면 null
• removeItem("name") — 저장된 값 지우기
• 인사말은 템플릿 리터럴 `안녕, ${이름}!`로 조립
• prompt()로 물어보는 방법도 있음 (아래 참고 링크)

참고 링크

• MDN localStorage — 브라우저 저장소 설명
• MDN prompt() — 입력 창 사용법

반복문 (Loops)

반복문 — 똑같은 일을 여러 번

같은 일을 여러 번 시킬 때 똑같은 코드를 복붙하면 힘듦, for에게 "몇 번 돌지"만 정해주면 그 안의 일을 알아서 그만큼 반복, 마치 줄넘기 100번처럼 횟수만 정하기

미리보기 — 아래 코드가 실제로 실행된 결과

숫자를 정하고 버튼을 누르면 for·while이 그만큼 반복하며 목록을 그림

폴더 구조

11/
├─ index.html        # 화면 (숫자 + 버튼 + 목록)
├─ styles/
│  └─ main.css       # 꾸미기
└─ scripts/
   └─ main.js        # 반복해서 목록 그리기

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles/main.css">
</head>
<body>
  <input id="n" type="number" value="5">
  <button id="run">반복</button>
  <button id="down">카운트다운</button>
  <ul id="out"></ul>
  <script src="scripts/main.js"></script>
</body>
</html>

styles/main.css

/* 버튼에 여백 + 오른쪽 간격 */
button { padding: 6px 12px; font-size: 14px; margin-right: 4px; }

/* 목록(id="out")을 크게 + 줄 간격 */
#out { font-size: 16px; line-height: 1.8; margin-top: 12px; }

scripts/main.js

// 1. 입력칸·목록·버튼을 찾아 담기
const n = document.querySelector("#n");
const out = document.querySelector("#out");

// 2. "반복" 버튼 — for로 1부터 N까지 반복 (화살표 함수)
document.querySelector("#run").addEventListener("click", () => {
  out.innerHTML = "";                 // 목록 비우기
  const count = Number(n.value);
  // for (시작값; 계속할 조건; 매번 변화) — 반복문은 ES6에서도 그대로 씀
  for (let i = 1; i <= count; i++) {
    const li = document.createElement("li");
    li.textContent = `${i}번째 🍎`;    // 1~count까지 반복 출력
    out.appendChild(li);
  }
});

// 3. "카운트다운" 버튼 — while로 N부터 1까지
document.querySelector("#down").addEventListener("click", () => {
  out.innerHTML = "";
  let i = Number(n.value);
  // while (조건): 조건이 참인 동안 반복
  while (i > 0) {
    const li = document.createElement("li");
    li.textContent = i;               // count부터 1까지
    out.appendChild(li);
    i--;                              // 안 줄이면 무한반복 주의! (i = i - 1 과 같음)
  }
});

핵심 포인트

• for (시작; 조건; 증가) — 시작값·계속할 조건·매번 늘릴 양 세 가지
• i++ — i를 1씩 늘리기, i = i + 1과 같음
• while (조건) — 조건이 참인 동안 반복, 조건을 안 바꾸면 무한반복 주의
• 반복문(for·while)은 ES6에서도 그대로 사용

// for — 세 가지(초기화·조건·증감)가 () 안 한 줄에 모임
for (초기화식; 종료 조건; 증감식) {
  // 실행할 코드
}

// while — 세 가지가 흩어짐: 초기화는 위, 증감은 본문 안
초기화식
while (종료 조건) {
  // 실행할 코드
  증감식
}

참고 링크

• MDN 반복문 — for·while 자세히

문자열 메서드

문자열 메서드 — 글자 다루는 도구

글자(문자열)에는 길이 재기·대문자 바꾸기·일부 바꾸기 같은 편한 도구가 딸려 있음, 점(.)을 찍고 도구 이름을 부르면 글자를 척척 다루기

미리보기 — 아래 코드가 실제로 실행된 결과

글자를 넣고 버튼을 누르면 length·toUpperCase·replace 결과를 한 번에 보여줌

폴더 구조

12/
├─ index.html        # 화면 (입력 + 버튼)
├─ styles/
│  └─ main.css       # 꾸미기
└─ scripts/
   └─ main.js        # 글자 도구로 분석

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles/main.css">
</head>
<body>
  <input id="s" value="hello">
  <button id="go">분석</button>
  <p id="out">글자를 넣고 분석을 눌러봐</p>
  <script src="scripts/main.js"></script>
</body>
</html>

styles/main.css

/* 입력칸과 버튼에 안쪽 여백 */
input, button { padding: 8px 12px; font-size: 14px; }

/* 결과(id="out")를 크고 굵게 + 줄 간격 */
#out { font-size: 16px; font-weight: 700; line-height: 1.8; margin-top: 12px; }

scripts/main.js

// 1. 입력칸과 결과 칸을 찾아 담기
const s = document.querySelector("#s");
const out = document.querySelector("#out");

// 2. "분석" 버튼을 누르면 문자열 도구로 글자를 다루기 (화살표 함수)
document.querySelector("#go").addEventListener("click", () => {
  const text = s.value;
  // 백틱 ` ` 안 ${ }로 결과 끼워 넣기 — .length=속성, .toUpperCase()/.replace()=메서드
  out.innerHTML =
    `글자 수(length): ${text.length}` + "<br>" +
    `대문자(toUpperCase): ${text.toUpperCase()}` + "<br>" +
    `e→E 바꾸기(replace): ${text.replace("e", "E")}`;
});

핵심 포인트

• .length — 글자 수, 괄호 없는 속성
• .toUpperCase() — 모두 대문자로, 괄호 붙는 메서드
• .replace(찾을것, 바꿀것) — 일부를 다른 글자로
• 구분법 — 괄호 ( ) 있으면 메서드, 없으면 속성
• ` 백틱 — 키보드 숫자 1 왼쪽 키, 작은따옴표 ' 와 다름
• `${ }` — 템플릿 리터럴, 백틱 안에 값 끼워 문장 만들기

참고 링크

• MDN 문자열 메서드 — 더 많은 도구

배열 메서드

배열 메서드 — 여러 값을 한 줄에

배열은 값 여러 개를 한 줄에 차곡차곡 담는 묶음, 마치 사물함처럼 칸칸이 들어 있어 추가·개수 세기·이어붙이기를 도구로 쉽게 하기

미리보기 — 아래 코드가 실제로 실행된 결과

과일 이름을 넣고 추가를 누르면 push로 배열에 쌓이고 length·join 결과가 갱신됨

폴더 구조

13/
├─ index.html        # 화면 (입력 + 버튼 + 목록)
├─ styles/
│  └─ main.css       # 꾸미기
└─ scripts/
   └─ main.js        # 배열에 추가하고 보여주기

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles/main.css">
</head>
<body>
  <input id="fruit" placeholder="과일 이름">
  <button id="add">추가</button>
  <p id="out">사과, 바나나</p>
  <p id="info"></p>
  <script src="scripts/main.js"></script>
</body>
</html>

styles/main.css

/* 입력칸과 버튼에 여백 */
input, button { padding: 8px 12px; font-size: 14px; }

/* 과일 목록(id="out")을 크고 굵게 */
#out { font-size: 18px; font-weight: 700; margin-top: 12px; }

/* 개수 안내(id="info")는 회색 */
#info { color: #555; margin-top: 4px; }

scripts/main.js

// 1. 과일 배열을 fruits 상자에 담기 (대괄호 [ ] 안에 쉼표로 나열)
const fruits = ["사과", "바나나"];

// 2. 입력칸·결과 칸·개수 칸을 찾아 담기
const fruit = document.querySelector("#fruit");
const out = document.querySelector("#out");
const info = document.querySelector("#info");

// 3. 화면을 다시 그리는 화살표 함수
const render = () => {
  out.textContent = fruits.join(", ");          // .join(", "): 사이 글자로 이어 붙이기
  info.textContent = `개수(length): ${fruits.length}`;
};
render();

// 4. "추가" 버튼 — 입력한 과일을 배열 끝에 push (화살표 함수)
document.querySelector("#add").addEventListener("click", () => {
  if (!fruit.value) { return; }   // 비어 있으면 아무것도 안 함
  fruits.push(fruit.value);       // .push(값): 배열 끝에 새 값 추가
  fruit.value = "";              // 입력칸 비우기 (다음 입력 준비)
  render();
});

핵심 포인트

• .push(값) — 배열 끝에 새 값 추가 (메서드)
• .length — 담긴 값의 개수 (속성)
• .join(", ") — 값을 사이 글자로 이어 한 문장으로
• 대괄호 [ ] 안에 쉼표로 나열해 배열 만들기
• const — 배열은 const로 선언 (push로 내용이 바뀌어도 변수 자체를 재할당하지 않으니까)
• render — 화면을 다시 그리는 화살표 함수, 데이터가 바뀔 때마다 호출해 화면 갱신

참고 링크

• MDN 배열 — push·pop·map 등

객체 (Objects)

객체 — 한 덩어리로 묶기

객체는 서로 관련된 값들을 이름표 붙여 한 덩어리로 묶은 것, 사람 한 명을 이름·나이로 묶듯, 점(.)을 찍고 이름표를 불러 값을 읽고 바꾸기

미리보기 — 아래 코드가 실제로 실행된 결과

버튼을 누르면 person 객체의 age·name 속성을 점(.)으로 읽고 바꿔 화면이 갱신됨

폴더 구조

14/
├─ index.html        # 화면 (정보 + 버튼)
├─ styles/
│  └─ main.css       # 꾸미기
└─ scripts/
   └─ main.js        # 객체 값 읽고 바꾸기

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles/main.css">
</head>
<body>
  <p id="out"></p>
  <button id="up">나이 +1</button>
  <button id="rename">이름 바꾸기</button>
  <script src="scripts/main.js"></script>
</body>
</html>

styles/main.css

/* 사람 정보(id="out")를 크고 굵게 + 보라색 */
#out { font-size: 22px; font-weight: 700; color: #7c3aed; margin-bottom: 10px; }

/* 버튼에 여백 + 오른쪽 간격 */
button { padding: 8px 12px; font-size: 14px; margin-right: 4px; }

scripts/main.js

// 1. 관련된 값을 "이름표: 값" 쌍으로 묶어 person 객체 만들기
const person = {
  name: "콩이",   // 이름표(속성) name → 값 "콩이"
  age: 10         // 이름표(속성) age → 값 10
};

// 2. 결과 칸을 찾아 담기
const out = document.querySelector("#out");

// 3. 객체 값을 화면에 그리는 화살표 함수
const render = () => {
  // 점(.)으로 값 읽기, 템플릿 리터럴로 조립
  out.textContent = `${person.name} (${person.age}살)`;
};
render();

// 4. "나이 +1" 버튼 — 점(.)으로 age 값 바꾸기 (화살표 함수)
document.querySelector("#up").addEventListener("click", () => {
  person.age++;          // person.age = person.age + 1 과 같음
  render();
});

// 5. "이름 바꾸기" 버튼 — 점(.)으로 name 값 바꾸기
document.querySelector("#rename").addEventListener("click", () => {
  person.name = "두부";
  render();
});

핵심 포인트

• { 이름: 값, … } — 중괄호 안에 이름표와 값을 쌍으로
• person.name — 점 찍고 이름표(속성)로 값 읽기
• person.age++ — 점 표기로 값 바꾸기
• 이름표 하나하나를 속성(property)이라 부름
• 같은 모양 객체를 여러 개 찍어내는 틀이 클래스(class) — 다음 STEP 15에서 배움

참고 링크

• MDN 객체 기본 — 속성·메서드

클래스 (Class)

클래스 — 객체 찍어내는 틀

객체(STEP 14)를 하나하나 손으로 만들면 번거로움, 클래스는 같은 모양 객체를 여러 개 찍어내는 틀(붕어빵 틀), new로 찍으면 객체(인스턴스)가 나옴, ES6부터 class 문법 정식 지원

미리보기 — 아래 코드가 실제로 실행된 결과

버튼을 누르면 Dog 클래스로 찍어낸 두 객체가 각자 이름으로 짖음

폴더 구조

15/
├─ index.html        # 화면 (버튼 + 결과)
├─ styles/
│  └─ main.css       # 꾸미기
└─ scripts/
   └─ main.js        # 클래스로 객체 찍어내기

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles/main.css">
</head>
<body>
  <button id="bark">멍멍 시키기</button>
  <p id="out">버튼을 누르면 강아지들이 짖어요</p>
  <script src="scripts/main.js"></script>
</body>
</html>

styles/main.css

/* 결과 문장(id="out")을 크고 굵게 */
#out { font-size: 18px; font-weight: 700; margin-top: 12px; }

/* 버튼에 안쪽 여백 */
button { padding: 8px 12px; font-size: 14px; }

scripts/main.js

// 1. Dog 클래스 — 강아지를 찍어내는 "틀"
class Dog {
  constructor(name) {   // new로 만들 때 자동 호출, 받은 이름을 보관
    this.name = name;   // this = 지금 만들어지는 객체 자신
  }
  bark() {              // 메서드 — 모든 Dog 객체가 함께 쓰는 동작
    return `${this.name}: 멍멍!`;
  }
}

// 2. 결과 칸 찾기
const out = document.querySelector("#out");

// 3. 틀로 객체(인스턴스) 두 개 찍어내기 (new)
const poppy = new Dog("뽀삐");   // 변수명은 의미 있게 (a·b 대신)
const choco = new Dog("초코");

// 4. 버튼 누르면 각 객체가 자기 이름으로 짖기 (화살표 함수)
document.querySelector("#bark").addEventListener("click", () => {
  out.textContent = `${poppy.bark()}  ${choco.bark()}`;
});

핵심 포인트

• class 이름 { } — 객체를 찍어내는 틀(설계도)
• constructor(재료) — new로 만들 때 자동 실행, this.속성에 값 저장
• this — 지금 만들어지는 객체 자신을 가리킴
• new Dog("뽀삐") — 틀로 객체(인스턴스) 찍어내기, 여러 개 가능
• 틀 안의 함수는 메서드 — 모든 객체가 함께 사용
• Document(대문자)는 클래스, document(소문자)는 그 틀로 찍은 객체

참고 링크

• MDN 클래스 — class·constructor·메서드
• MDN new 연산자 — 인스턴스 생성

디버깅 (Debugging)

디버깅 — 에러 잡고 값 확인하기

코드가 안 될 때 추측은 금물, 개발자도구(F12)의 Console 탭에서 console.log(JS의 프린트 · 파이썬 print와 같은 역할)로 값을 직접 확인하고 빨간 에러 메시지를 읽기, 에러는 적이 아니라 어디가 틀렸는지 알려주는 힌트

폴더 구조

16/
├─ index.html        # 화면 (버튼)
└─ scripts/
   └─ main.js        # 콘솔 로그 + 에러 확인

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <button id="buy">구매</button>
  <script src="scripts/main.js"></script>
</body>
</html>

scripts/main.js

// 1. console.log — JS의 "프린트", 실행 중 값 보기 (F12 → Console 탭)
const price = 1000;
const count = 3;
console.log("price:", price);          // price: 1000
console.log("총합:", price * count);  // 총합: 3000
console.log(price, count, "확인");     // 여러 값 한 번에 (쉼표로 나열)

// 2. typeof — 값의 종류 확인 (숫자인지 글자인지 헷갈릴 때)
console.log(typeof price);   // "number"
console.log(typeof "3");     // "string" (따옴표 있으면 글자!)

// 3. debugger — 이 줄에서 실행이 멈춤 (F12 열려 있을 때만 작동)
const sum = price + count;
debugger;   // 멈춘 상태로 콘솔에 price·sum 쳐서 값 확인 → ▶로 재개
console.log("sum:", sum);

// 4. 자주 만나는 에러 — id 오타로 요소를 못 찾음
const btn = document.querySelector("#by");  // 진짜 id는 #buy인데 오타
btn.addEventListener("click", () => {});
// ❌ TypeError: Cannot read properties of null (reading 'addEventListener')
//    → btn이 null (못 찾음) → id 철자 확인 (#by → #buy)

핵심 포인트

• F12 (또는 우클릭 → 검사) → Console 탭에서 로그·에러 확인
• console.log(값) — JS의 프린트(파이썬 print와 같은 역할), 실행 중 값을 눈으로 확인
• 왜 중요? — 코드는 눈에 안 보이게 돌아감, 찍어봐야 "내 생각 vs 실제 값"이 맞는지 알 수 있음, 버그 대부분이 "값이 내 예상과 다름"이라 출력 한 줄이 원인을 바로 드러냄
• console.log("이름:", 값) — 앞에 이름표를 붙이면 여러 개 찍어도 안 헷갈림
• typeof — 값의 종류 확인 (number·string 구분)
• Cannot read properties of null — querySelector가 못 찾음 (id 오타·script 위치)
• X is not defined — 변수·함수 이름 오타거나 선언 안 함
• X is not a function — 오타거나 그 값에 없는 메서드 호출
• 빨간 에러 줄 클릭 → 몇 번째 줄인지 표시, 거기부터 확인
• debugger — 코드에 한 줄 적으면 그 지점에서 실행이 멈춤(중단점), F12 열려 있을 때만 작동, 멈춘 상태로 변수값을 콘솔에 직접 쳐보거나 한 줄씩 실행 가능, console.log를 여러 개 찍기 귀찮을 때 강력

참고 링크

• MDN console.log — 콘솔 출력
• Chrome DevTools 콘솔 — 개발자도구 사용법

서버 연동 (CRUD)

서버 연동 — fetch로 CRUD 하기

지금까지는 localStorage(내 브라우저에만 저장)만 썼음, 진짜 서버가 있으면 fetch로 데이터를 주고받아 생성·조회·수정·삭제(CRUD)가 가능, json-server로 가짜 서버를 1분 만에 띄워 연습

미리보기 — 아래 코드가 실제로 실행된 결과 (가짜 서버로 시뮬레이션)

버튼을 누르면 CREATE·READ·UPDATE·DELETE가 순서대로 (가짜) 서버에 요청을 보내고 결과를 보여줌

폴더 구조

17/
├─ db.json           # json-server가 읽는 가짜 DB
├─ index.html        # 화면 (CRUD 버튼 4개 + 결과창)
├─ styles/
│  └─ main.css       # 꾸미기
└─ scripts/
   └─ main.js        # fetch로 CRUD 구현

db.json — json-server가 읽는 가짜 DB

{
  "users": [
    { "id": 1, "name": "Kim" },
    { "id": 2, "name": "Lee" }
  ]
}

• db.json 하나가 가짜 데이터베이스 역할, json-server가 이 파일을 읽어서 자동으로 GET·POST·PUT·DELETE API를 만들어줌
• 키 이름 "users"가 곧 주소가 됨 — http://localhost:3000/users로 요청하면 이 배열을 주고받음
• POST로 추가하면 새 항목이, PUT·DELETE하면 수정·삭제된 내용이 이 파일에 실시간으로 저장됨(서버 껐다 켜도 유지)

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>17 · 서버 연동 (CRUD)</title>
  <link rel="stylesheet" href="styles/main.css">
</head>
<body>
  <h1>사용자 CRUD</h1>
  <p class="note">먼저 이 폴더에서 <code>npm install</code> 후 <code>npm start</code> 실행 필요</p>
  <div class="btn-row">
    <button id="btn-create">CREATE (John 추가)</button>
    <button id="btn-read">READ (목록 조회)</button>
    <button id="btn-update">UPDATE (1번 → Jane)</button>
    <button id="btn-delete">DELETE (1번 삭제)</button>
  </div>
  <pre id="out"></pre>
  <script src="scripts/main.js"></script>
</body>
</html>

styles/main.css

/* 기본 스타일 */
body { font-family: sans-serif; padding: 24px; color: #24292f; }

/* 안내 문구 */
.note { color: #666; font-size: 13px; }

/* 버튼 줄 간격 */
.btn-row { display: flex; gap: 8px; margin: 12px 0; }
button { padding: 8px 14px; font-size: 14px; cursor: pointer; }

/* 결과창(id="out") — 콘솔처럼 보이게 */
#out { background: #0d1117; color: #e6edf3; padding: 12px; border-radius: 6px; min-height: 60px; white-space: pre-wrap; }

scripts/main.js

// 1. 결과 찍을 곳 + 서버 주소
const out = document.querySelector("#out");
const API = "/api/users";

// 2. 결과를 화면에 보기 좋게 찍는 함수
const show = (label, data) => {
  out.textContent = `${label}\n${JSON.stringify(data)}`;
};

// 2-1. 서버가 주는 키 순서가 매번 달라서(id/name 뒤죽박죽), 찍기 전에 { id, name } 순서로 통일
const norm = (data) =>
  Array.isArray(data)
    ? data.map(u => ({ id: u.id, name: u.name }))
    : { id: data.id, name: data.name };

// 3. CREATE (생성) — POST
document.querySelector("#btn-create").addEventListener("click", async () => {
  const res = await fetch(API, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "John" })
  });
  show("CREATE 결과", norm(await res.json()));
  // 변환 전: Response { status: 200, body: ReadableStream }
  // 변환 후: { id: 1, name: "John" }
  // res.json() → JSON 파싱 / norm() → 키 순서 정렬(id, name) / show() → 화면 출력
});

// 4. READ (읽기) — GET
document.querySelector("#btn-read").addEventListener("click", async () => {
  const res = await fetch(API);
  const users = await res.json();
  show("READ 결과", norm(users));
  // 변환 전: Response { status: 200, body: ReadableStream }
  // 변환 후: [{ id: 1, name: "Kim" }, { id: 2, name: "Lee" }]
  // res.json() 후 users는 배열 / norm() → 키 순서 정렬 / show() → 화면 출력
});

// 5. UPDATE (수정) — PUT
document.querySelector("#btn-update").addEventListener("click", async () => {
  const res = await fetch(`${API}/1`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "Jane" })
  });
  show("UPDATE 결과", norm(await res.json()));
  // 변환 전: Response { status: 200, body: ReadableStream }
  // 변환 후: { id: 1, name: "Jane" }
  // res.json() → JSON 파싱 / norm() → 키 순서 정렬(id, name) / show() → 화면 출력
});

// 6. DELETE (삭제) — DELETE
document.querySelector("#btn-delete").addEventListener("click", async () => {
  await fetch(`${API}/1`, { method: "DELETE" });
  show("DELETE 결과", "1번 사용자 삭제됨");
});

서버 실행 — json-server (실제 폴더에서 실습할 때)

# 1. 17 폴더로 이동
cd 17

# 2. json-server 설치 (이 폴더 안에서, 처음 1회만)
npm install

# 3. 서버 실행 (package.json의 start 스크립트 실행 — 로컬 버전 확실히 사용)
npm start

핵심 포인트

① fetch 기본

• fetch(주소, 옵션) — "가져오다"라는 뜻, 서버에 요청 보내기, method로 CREATE(POST)·READ(GET)·UPDATE(PUT)·DELETE(DELETE) 구분

• JSON.stringify(객체) — 보낼 때 객체를 글자로 변환
　예) { name: "John" } → '{"name":"John"}'
• res.json() — 받은 응답을 다시 객체로
　예) '{"id":1,"name":"John"}' → { id: 1, name: "John" }

② 비동기 · async / await

• fetch는 비동기 — 응답이 언제 올지 몰라서 브라우저를 멈춰놓고 기다리지 않음, 바로 다음 줄로 넘어가고 응답은 나중에 처리(그래야 기다리는 동안 클릭·스크롤이 계속 됨)

• await("기다리다") — 그 비동기 결과가 올 때까지 이 줄만 대기, 브라우저 전체가 멈추는 게 아니라 async 함수 안쪽만 순서대로 기다리게 해줌

• async("비동기") — 함수 앞에 붙여서 "이 함수 안에서 await 씀" 표시하는 팻말, async와 await은 짝꿍 — await은 async 함수 안에서만 쓸 수 있음(없으면 SyntaxError)

③ norm(await res.json()) 실행 순서

• 안에서 바깥으로 실행됨: ① res.json()으로 응답을 객체로 바꾸고 ② await로 그 결과를 기다렸다가 ③ 완성된 객체를 norm에 넣어 순서를 정리함
풀어쓰면 const data = await res.json(); const result = norm(data);와 완전히 같은 동작

• 재조립 순서는 서버가 정하는 게 아니라 norm 함수를 쓴 우리(개발자)가 정한 것 — { id: data.id, name: data.name }이라고 코드에 그 순서로 적어서 결과도 그 순서로 나옴, { name: data.name, id: data.id }로 적었으면 반대로 name이 먼저 나왔을 것
예) 서버 응답 [{name:"Jane",id:1}, {id:2,name:"Lee"}](뒤죽박죽) → norm 통과 후 [{id:1,name:"Jane"}, {id:2,name:"Lee"}](통일), 값은 그대로고 키 순서만 바뀜

④ 실행 환경 주의사항

• 위 미리보기는 브라우저 안에서 가짜 서버를 흉내 낸 것, 실제로는 json-server를 켜고 http://localhost:3000으로 요청을 보내야 함(아래 실행법 참고)

• npm install -g json-server(전역 설치)는 항상 최신 버전을 받음, 최신 json-server(v1.x)는 id를 랜덤 문자열로 만들어서 예제(id가 1,2,3 숫자)와 안 맞음

• 터미널에 그냥 json-server ...라고 치면 이미 깔려있는 전역 버전이 먼저 실행됨(로컬에 버전을 고정해놔도 무시당함) → 꼭 npm start로 실행할 것 (package.json의 start 스크립트가 이 폴더의 로컬 버전을 확실히 사용)

• JSON 객체는 키 순서가 의미 없음 — 서버가 {"id":1,"name":"Kim"}과 {"name":"Kim","id":1}을 다르게 저장해도 데이터는 똑같음(버그 아님)

• 실제 서비스에서는 이 자리에 진짜 백엔드(Node.js·Express 등)가 들어감

참고 링크

• MDN Fetch API — fetch 사용법
• json-server (GitHub) — 가짜 REST API 서버

미니 프로젝트 (HTML + CSS + JS)

지금까지 배운 HTML(뼈대)·CSS(꾸미기)·JS(기능)를 전부 모아 자유 주제로 자기만의 한 페이지 웹사이트를 직접 제작, 정답 없음 — 만들고 싶은 걸 만들기, 작게 시작해서 기능 하나씩 붙이기

이제 이만큼 할 수 있음 (복습)

• 변수·조건문·함수로 로직 짜기
• 이벤트로 버튼·입력에 반응하기
• querySelector·textContent·createElement·appendChild로 화면 바꾸기
• 배열·객체·클래스로 데이터 다루기
• console.log·debugger로 디버깅하기

만드는 순서

① 기획서 작성 + index.html 맨 위에 주석으로 심기
② 종이에 화면을 먼저 그리기 (무엇이 어디에)
③ HTML로 뼈대 — 제목·입력칸·버튼·결과칸
④ CSS로 꾸미기 — 색·여백·글꼴
⑤ JS로 기능 — 이벤트 달고 동작 만들기
⑥ F12로 디버깅 — 안 되면 console.log로 값 확인
⑦ Netlify로 배포 — URL 제출

시작 템플릿 — index.html

<!DOCTYPE html>
<!-- 기획서를 맨 위 주석으로 박아두기 (만들다 헷갈릴 때 나침반) -->
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>나의 할 일 목록</title>
  <link rel="stylesheet" href="styles/main.css">
</head>
<body>
  <main class="app">
    <h1>✓ 나의 할 일 목록</h1>
    <p id="count" class="count">할 일 0개</p>

    <!-- form = 버튼 클릭 + Enter 둘 다 제출됨 -->
    <form id="form" class="input-row">
      <input id="inp" placeholder="할 일을 입력하고 Enter" autocomplete="off">
      <button type="submit">추가</button>
    </form>

    <ul id="list" class="list"></ul>
  </main>

  <script src="scripts/main.js"></script>
</body>
</html>

시작 템플릿 — styles/main.css

/* 기본 — 페이지 전체 */
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; background: #f4f5f7; margin: 0; padding: 40px 16px; color: #222; }

/* 앱 카드 */
.app { max-width: 420px; margin: 0 auto; background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
h1 { font-size: 22px; margin: 0 0 4px; }
.count { color: #888; font-size: 13px; margin: 0 0 16px; }

/* 입력 줄 */
.input-row { display: flex; gap: 8px; margin-bottom: 16px; }
#inp { flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; }
#inp:focus { outline: none; border-color: #6c5ce7; }
.input-row button { padding: 10px 16px; border: none; border-radius: 8px; background: #6c5ce7; color: #fff; cursor: pointer; }
.input-row button:hover { background: #5a4bd1; }

/* 목록 */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid #eee; }
.list .text { flex: 1; cursor: pointer; }            /* 클릭하면 완료 토글 */
.list li.done .text { color: #bbb; text-decoration: line-through; }
.del { border: none; background: none; color: #ff7675; font-size: 16px; cursor: pointer; }

/* TODO: 색·폰트·그림자를 바꿔 나만의 스타일 만들기 */

시작 템플릿 — scripts/main.js

// 1. 요소 잡기
const form  = document.querySelector("#form");
const inp   = document.querySelector("#inp");
const list  = document.querySelector("#list");
const count = document.querySelector("#count");

// 2. 데이터 — localStorage에서 불러오기 (없으면 빈 배열)
//    할 일 하나 = { text: "내용", done: true/false } 객체
let todos = JSON.parse(localStorage.getItem("todos")) || [];

// 3. 저장하기
function save() {
  localStorage.setItem("todos", JSON.stringify(todos));
}

// 4. 화면 다시 그리기
function render() {
  list.innerHTML = "";                       // 비우고 처음부터 다시 그리기
  todos.forEach((todo, i) => {
    const li = document.createElement("li");
    if (todo.done) li.classList.add("done");  // 완료면 줄긋기

    const span = document.createElement("span");
    span.className = "text";
    span.textContent = todo.text;
    span.onclick = () => { todos[i].done = !todos[i].done; save(); render(); };  // 완료 토글

    const del = document.createElement("button");
    del.className = "del";
    del.textContent = "✕";
    del.onclick = () => { todos.splice(i, 1); save(); render(); };       // 삭제

    li.appendChild(span);
    li.appendChild(del);
    list.appendChild(li);
  });

  const left = todos.filter(t => !t.done).length;   // 남은 개수
  count.textContent = `할 일 ${left}개`;
}

// 5. 추가 (form 제출 = 버튼 클릭 + Enter 둘 다)
form.addEventListener("submit", (e) => {
  e.preventDefault();                 // 새로고침 막기
  const text = inp.value.trim();
  if (!text) return;                  // 빈 입력 무시
  todos.push({ text, done: false });  // 배열에 객체 추가
  inp.value = "";
  save();
  render();
});

// 6. 첫 화면 그리기
render();

핵심 포인트

• 기획서 먼저! — 코딩보다 기획이 더 중요, 무엇을·왜·누구를 위해·어떤 기능을 정하고 시작해야 길을 안 잃음
• 기획서 항목 — 프로젝트 이름 / 한 줄 소개 / 목표(왜 만드나) / 핵심 기능 3개 / 화면 구성(어디에 무엇)
• 기획서를 사이트에 심기 — index.html 맨 위에  주석으로 기획서를 박아두기, 만들다 헷갈릴 때 다시 보는 나침반
• 작게 시작 — 버튼 하나·기능 하나부터, 되면 다음 기능 추가
• HTML → CSS → JS 순서 — 뼈대 먼저, 꾸미기 다음, 기능 마지막
• 막히면 console.log로 값 확인 + 에러 메시지 읽기 (STEP 16)
• 한 번에 완벽 X — 일단 돌아가게 만들고 다듬기
• 다 만들면 Netlify 배포해서 친구에게 링크 공유

도전

• 기능 2개 이상 넣기 (예: 추가 + 삭제)
• localStorage로 새로고침해도 안 사라지게 저장
• 모바일에서도 보기 좋게 반응형(@media) 적용

참고 링크

• MDN 웹 개발 학습 — 막힐 때 찾아보기
• 이전 STEP 카드를 다시 열어 코드 복습하기 (특히 STEP 08 이벤트 · 13 배열 · 16 디버깅)

내장 객체 + 이벤트 목록

목록 — JS 내장 객체 · 메서드 · 이벤트 총정리

지금까지 배운 Math·String·Array·Object·JSON·Date·Number 메서드와 이벤트 목록을 한 곳에 모아둠, 실행용이 아니라 필요할 때 찾아보는 참고 카드, 실무 예시 10개도 함께 훑어보기

내장 객체 메서드

// 【 MATH 】
Math.abs(-5) // 5
Math.round(4.5) // 5
Math.floor(4.9) // 4
Math.ceil(4.1) // 5
Math.max(1,5,3) // 5
Math.min(1,5,3) // 1
Math.random() // 0~1

// 【 STRING 】
"hello".toUpperCase() // "HELLO"
"HELLO".toLowerCase() // "hello"
"hello".length // 5
"hello".includes("ell") // true
"hello".charAt(0) // "h"
"hello".substring(0,3) // "hel"
"hello".split("") // ["h","e","l","l","o"]
"hello".replace("l","L") // "heLlo"
"  hello  ".trim() // "hello"

// 【 ARRAY 】
[1,2,3].length // 3
[1,2,3].push(4) // [1,2,3,4]
[1,2,3].pop() // 3
[1,2,3].shift() // 1
[1,2,3].unshift(0) // [0,1,2,3]
[1,2,3].join(",") // "1,2,3"
[1,2,3].map(x => x*2) // [2,4,6]
[1,2,3].filter(x => x>1) // [2,3]
[1,2,3].find(x => x>1) // 2
[1,2,3].includes(2) // true
[1,2,3].reverse() // [3,2,1]
[1,2,3].sort() // [1,2,3]

// 【 OBJECT 】
Object.keys({a:1,b:2}) // ["a","b"]
Object.values({a:1,b:2}) // [1,2]
Object.entries({a:1,b:2}) // [["a",1],["b",2]]

// 【 JSON 】
JSON.stringify({name:"John"}) // '{"name":"John"}'
JSON.parse('{"name":"John"}') // {name:"John"}

// 【 DATE 】
new Date() // 현재 날짜/시간
new Date().getFullYear() // 2026
new Date().getMonth() // 0~11
new Date().getDate() // 1~31
new Date().getDay() // 0~6 (0=일요일)
new Date().getTime() // 밀리초

// 【 NUMBER 】
Number("123") // 123
Number.isInteger(123) // true
(123).toString() // "123"
parseFloat("3.14") // 3.14
parseInt("123abc") // 123

이벤트 목록

// 【 클릭 / 더블클릭 】
btn.addEventListener("click", () => console.log("클릭됨"));
btn.addEventListener("dblclick", () => console.log("더블클릭"));

// 【 마우스 】
btn.addEventListener("mouseover", () => console.log("마우스 올림"));
btn.addEventListener("mouseout", () => console.log("마우스 떠남"));
document.addEventListener("mousemove", (e) => console.log(e.clientX, e.clientY));

// 【 입력 】
input.addEventListener("input", (e) => console.log(e.target.value));
input.addEventListener("change", (e) => console.log("변경됨:", e.target.value));

// 【 키보드 】
document.addEventListener("keydown", (e) => console.log("키:", e.key));
document.addEventListener("keyup", (e) => console.log("키 뗌:", e.key));

// 【 포커스 】
input.addEventListener("focus", () => console.log("포커스 받음"));
input.addEventListener("blur", () => console.log("포커스 떠남"));

// 【 폼 】
form.addEventListener("submit", (e) => { e.preventDefault(); console.log("제출됨"); });

// 【 페이지 】
document.addEventListener("DOMContentLoaded", () => console.log("페이지 로드"));
window.addEventListener("scroll", () => console.log("스크롤:", window.scrollY));
window.addEventListener("resize", () => console.log("창 크기:", window.innerWidth));

// 【 터치 (모바일) 】
element.addEventListener("touchstart", () => console.log("터치 시작"));
element.addEventListener("touchend", () => console.log("터치 끝"));
element.addEventListener("touchmove", () => console.log("터치 이동"));

실무 예시 10개

// 1. 검색 기능
const searchInput = document.querySelector("#search");
const searchBtn = document.querySelector("#search-btn");

searchBtn.addEventListener("click", () => {
  const keyword = searchInput.value.toLowerCase();
  const items = ["Apple", "Banana", "Orange"];
  const result = items.filter(item => item.toLowerCase().includes(keyword));
  console.log("검색결과:", result);
});

// 2. 목록 추가
const addBtn = document.querySelector("#add-btn");
let list = [];

addBtn.addEventListener("click", () => {
  const name = searchInput.value;
  if (!name) return;

  list.push({
    id: Math.floor(Math.random() * 10000),
    name: name.toUpperCase(),
    created: new Date().toLocaleDateString()
  });

  console.log("추가됨:", list);
  localStorage.setItem("list", JSON.stringify(list));
  searchInput.value = "";
});

// 3. 수정/삭제
const deleteBtn = document.querySelector("#delete-btn");
deleteBtn.addEventListener("click", () => {
  if (list.length > 0) {
    const deleted = list.pop();
    console.log("삭제됨:", deleted.name);
    localStorage.setItem("list", JSON.stringify(list));
  }
});

// 4. 정렬
const sortBtn = document.querySelector("#sort-btn");
sortBtn.addEventListener("click", () => {
  list.sort((a, b) => a.name.localeCompare(b.name));
  console.log("정렬됨:", list.map(x => x.name));
});

// 5. 통계
const statsBtn = document.querySelector("#stats-btn");
statsBtn.addEventListener("click", () => {
  const stats = {
    total: list.length,
    names: list.map(x => x.name),
    lengths: list.map(x => x.name.length),
    avgLength: Math.round(
      list.map(x => x.name.length).reduce((a,b) => a+b, 0) / list.length
    )
  };
  console.log("통계:", stats);
});

// 6. 데이터 로드
const loadBtn = document.querySelector("#load-btn");
loadBtn.addEventListener("click", () => {
  const saved = localStorage.getItem("list");
  if (saved) {
    const parsed = JSON.parse(saved);
    list.push(...parsed);
    console.log("로드됨:", list);
  }
});

// 7. 데이터 내보내기
const exportBtn = document.querySelector("#export-btn");
exportBtn.addEventListener("click", () => {
  const json = JSON.stringify(list, null, 2);
  console.log(json);
});

// 8. 실시간 입력
searchInput.addEventListener("input", (e) => {
  const text = e.target.value;
  console.log("입력중:", text);
  console.log("길이:", text.length);
  console.log("대문자:", text.toUpperCase());
});

// 9. 엔터키 입력
searchInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    console.log("엔터 눌림");
    addBtn.click();
  }
});

// 10. 무작위 선택
const randomBtn = document.querySelector("#random-btn");
randomBtn.addEventListener("click", () => {
  if (list.length === 0) return;
  const idx = Math.floor(Math.random() * list.length);
  console.log("선택됨:", list[idx].name);
});

핵심 포인트

• 이 카드는 실행용이 아니라 참고용 — btn·input·form 같은 요소가 실제로 없어서 그대로 실행하면 에러남, 필요할 때 찾아서 내 프로젝트에 맞게 옮겨 쓰기
• 괄호 ( ) 있으면 메서드, 없으면 속성 — .length vs .toUpperCase()
• 이벤트는 addEventListener("이벤트이름", 함수) 형태로 통일
• 실무에서는 이 목록을 전부 외우기보다, 필요할 때 검색해서 찾아 쓰는 습관이 더 중요

참고 링크

• MDN 전역 객체 — Math·String·Array·Object 등 전체 목록
• MDN 이벤트 레퍼런스 — 이벤트 종류 전체 목록

🐣 브론즈