FrontendDevGuide0004

⚡ FrontendDevGuide0004 — JavaScript 기초 완전 정복 A-Z

💡 이 글을 읽고 나면...
변수·데이터 타입부터 함수, 배열 메서드, 스코프, ES6+ 문법, DOM 조작, 이벤트까지 —
현업에서 JavaScript를 자신 있게 작성할 수 있는 수준이 됩니다!

📌 예상 학습 기간: 4~6주  |  난이도: ⭐⭐⭐☆☆  |  선수 지식: HTML/CSS 기초 (Guide0002~0003)

⚡ 1. JavaScript란? — 웹을 살아 움직이게 하는 언어

JavaScript(JS)는 HTML/CSS로 만든 웹페이지에 동적인 기능(클릭, 애니메이션, 데이터 처리)을 추가하는 프로그래밍 언어입니다.
브라우저 위에서 직접 실행되는 유일한 언어이며, React·Vue·Node.js 등 모던 웹 개발의 핵심입니다.

🏠 집으로 비유하면:
HTML = 건물 골조  |  CSS = 인테리어  |  JavaScript = 전기·수도·자동문·엘리베이터 (모든 동작과 기능)

📄 JavaScript 실행 환경:
브라우저 — 크롬, 파이어폭스 등 (F12 콘솔에서 바로 실행 가능!)
Node.js — 서버 환경에서 JS 실행 (백엔드, 빌드 도구 등)
→ HTML에 연결: <script src="app.js"></script> (body 끝 바로 위 권장)

📦 2. 변수와 데이터 타입 — 데이터를 담는 그릇

변수는 데이터를 저장하는 이름 붙은 공간입니다. JS에는 다양한 데이터 타입이 있습니다.

🔑 변수 선언 const vs let vs var:
const (권장) — 한 번 선언하면 재할당 불가. 배열/객체 내부 값은 변경 가능
let — 재할당 가능. 반복문 카운터나 값이 바뀌는 경우에만 사용
var — 옛날 방식. 함수 스코프 + 호이스팅 문제로 현업에서 사용 금지
→ 실무 원칙: const 우선 → 변경 필요하면 let → var은 절대 사용 안 함

💡 자주 헷갈리는 개념 — truthy와 falsy:
falsy 값 (거짓으로 취급): false, 0, "", null, undefined, NaN
truthy 값 (참으로 취급): 그 외 모든 값 (1, "0", [], {}, 함수 등)
→ if (value) { } 처럼 조건식에서 자동으로 boolean으로 변환됩니다

⚙️ 3. 연산자 — 데이터를 계산하고 비교하기

⚠️ == vs === 차이 — 반드시 기억!
== (느슨한 비교): 타입을 자동 변환 후 비교 → 5 == "5" → true (위험!)
=== (엄격한 비교): 값과 타입 모두 같아야 → 5 === "5" → false
→ 실무에서는 항상 === 를 사용합니다!

🔀 4. 조건문 — 상황에 따라 다르게 실행

if / else if / else:
const score = 85;
if (score >= 90) { console.log('A 학점'); }
else if (score >= 80) { console.log('B 학점'); } // 실행됨
else { console.log('C 이하'); }

switch문 — 여러 경우의 수:
switch (day) {
  case 1: console.log('월요일'); break;
  case 2: console.log('화요일'); break;
  default: console.log('기타');
}
→ break 없으면 다음 case까지 실행되는 "fall-through" 주의!

삼항 연산자 — 간단한 조건 한 줄로:
const label = age >= 18 ? '성인' : '미성년';
// if/else를 한 줄로 → React에서 JSX 조건 렌더링에 많이 사용

🔁 5. 반복문 — 같은 작업을 여러 번

for 반복문 (횟수가 정해진 경우):
for (let i = 0; i < 5; i++) { console.log(i); } // 0 1 2 3 4

for...of — 배열 순회 (값에 접근):
const fruits = ['사과', '바나나', '딸기'];
for (const fruit of fruits) { console.log(fruit); }
→ 배열 순회에는 for...of 또는 forEach() 권장!

for...in — 객체 키 순회:
const user = { name: '길동', age: 25 };
for (const key in user) { console.log(key, user[key]); }
// "name 길동" / "age 25"

💡 break와 continue:
break — 반복문 즉시 종료
continue — 현재 반복만 건너뛰고 다음으로 (특정 조건 제외할 때)

🔧 6. 함수 — 코드를 재사용 가능하게

함수는 특정 작업을 수행하는 코드 블록입니다. 한 번 정의하고 여러 번 호출할 수 있습니다.

💡 화살표 함수 단축 규칙:
매개변수 1개 → 괄호 생략: x => x * 2
본문이 표현식 1개 → 중괄호 + return 생략: (x) => x * 2
(x, y) => x + y → 두 수의 합을 반환
→ 실무에서는 화살표 함수를 가장 많이 사용합니다!

⭐ 고차 함수(Higher-Order Function):
함수를 인수로 받거나 함수를 반환하는 함수입니다.
map, filter, reduce, forEach 모두 고차 함수입니다.
const double = arr.map(x => x * 2); // 고차함수 + 화살표함수 조합

📚 7. 배열 메서드 — 현업에서 매일 쓰는 필수 8가지

배열 메서드를 잘 알면 반복문 없이도 데이터를 우아하게 처리할 수 있습니다.

💡 map + filter + reduce 조합 패턴 (실무 자주 사용):
const result = data
  .filter(item => item.active) // 활성 항목만
  .map(item => item.name) // 이름만 추출
  .sort(); // 정렬
→ 체이닝으로 복잡한 데이터 변환을 깔끔하게 처리!

🏗️ 8. 객체(Object) — 데이터의 집합

객체 생성과 접근:
const user = { name: '홍길동', age: 25, isStudent: true };
user.name // '홍길동' (점 표기법)
user['age'] // 25 (괄호 표기법, 동적 키에 사용)
user.email = 'hong@mail.com'; // 속성 추가
delete user.isStudent; // 속성 삭제

객체 메서드:
Object.keys(user) // ['name', 'age'] — 키 배열
Object.values(user) // ['홍길동', 25] — 값 배열
Object.entries(user) // [['name','홍길동'],['age',25]] — 키+값 쌍
const copy = { ...user, email: 'new@mail.com' }; // 스프레드로 복사+추가

🔭 9. 스코프와 클로저 — JS의 핵심 원리

스코프는 변수가 "유효한 범위"를 의미합니다. 이 개념을 이해하면 버그를 훨씬 빨리 찾을 수 있습니다.

🔒 클로저(Closure):
내부 함수가 외부 함수의 변수에 접근할 수 있는 현상입니다.
function counter() {
  let count = 0;
  return () => ++count; // 내부 함수가 count에 접근
}
const increment = counter();
increment(); // 1
increment(); // 2 — count가 사라지지 않고 유지됨!
→ 상태를 안전하게 보관하는 패턴으로 React 훅에서도 사용됩니다

✨ 10. ES6+ 현대 문법 — 현업에서 매일 쓰는 문법

ES6(2015) 이후 추가된 현대 문법입니다. React 코드에서 항상 등장하므로 반드시 익혀야 합니다!

🎯 구조분해할당 심화:
// 배열 구조분해
const [first, second, ...rest] = [1, 2, 3, 4, 5];
// first=1, second=2, rest=[3,4,5]

// 객체 구조분해 + 기본값
const { name = '익명', age = 0 } = user;

// 함수 매개변수에서
function greet({ name, age }) { console.log(name, age); }
greet({ name: '길동', age: 25 }); // React 컴포넌트 props처럼!

🖱️ 11. DOM 조작과 이벤트 처리

DOM(Document Object Model)은 HTML 문서를 JS로 제어할 수 있게 해주는 인터페이스입니다.

🔍 DOM 요소 선택:
document.getElementById('id') — id로 1개 선택
document.querySelector('.btn') — CSS 선택자로 첫 번째
document.querySelectorAll('li') — CSS 선택자로 모두 (NodeList)
→ 실무에서는 querySelector / querySelectorAll 을 가장 많이 씁니다

✏️ DOM 조작:
element.textContent = '새 텍스트'; // 텍스트 변경
element.innerHTML = '<b>HTML</b>'; // HTML 삽입 (XSS 주의!)
element.style.color = 'red'; // 인라인 스타일
element.classList.add('active'); // 클래스 추가
element.classList.remove('hidden'); // 클래스 제거
element.classList.toggle('open'); // 있으면 제거, 없으면 추가
element.setAttribute('href', 'url'); // 속성 변경

🖱️ 이벤트 처리:
const btn = document.querySelector('#btn');
btn.addEventListener('click', (e) => {
  e.preventDefault(); // 기본 동작 막기 (폼 제출, 링크 이동 등)
  e.stopPropagation(); // 이벤트 버블링 막기
  console.log('클릭!', e.target); // e.target = 클릭된 요소
});

// 자주 쓰는 이벤트: click / input / change / submit / keydown / mouseover / scroll

🔥 이벤트 위임(Event Delegation) — 성능 최적화 패턴:
// 100개 버튼에 각각 이벤트 리스너 붙이는 대신
// 부모에 하나만 붙이고 e.target으로 분기
ul.addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') { console.log(e.target.textContent); }
});

⏳ 12. 비동기 프로그래밍 기초 — 서버와 대화하기

JS는 기본적으로 한 줄씩 실행되지만(동기), 서버 통신이나 타이머처럼 기다려야 하는 작업은 비동기로 처리합니다.

📅 setTimeout / setInterval:
setTimeout(() => console.log('3초 후'), 3000); // 한 번 실행
const id = setInterval(() => console.log('1초마다'), 1000); // 반복
clearInterval(id); // 정지

🤝 Promise — 비동기 작업의 약속:
const p = new Promise((resolve, reject) => {
  // 성공이면 resolve(), 실패면 reject()
});
p.then(result => console.log(result))
 .catch(err => console.error(err))
 .finally(() => console.log('항상 실행'));

✨ async/await — Promise를 동기처럼 작성 (현업 표준):
async function fetchUser() {
  try {
    const res = await fetch('/api/user'); // Promise 완료 대기
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error('오류:', err); // 에러 처리 필수!
  }
}
→ try/catch 없으면 에러 발생 시 앱이 멈출 수 있어요!

🛡️ 13. 에러 처리와 디버깅

try / catch / finally:
try {
  const data = JSON.parse(invalidJSON); // 에러 발생 가능
} catch (err) {
  console.error('파싱 오류:', err.message);
} finally {
  // 성공/실패 관계없이 항상 실행 (로딩 상태 해제 등)
}

🔍 크롬 DevTools 디버깅:
console.log() — 값 출력 (가장 기본)
console.error() — 빨간 에러 출력
console.table(arr) — 배열/객체를 표 형태로 보기 좋게
debugger; — 코드 실행 일시 정지 (Sources 탭에서 확인)
→ F12 → Sources 탭 → 라인 번호 클릭 = 브레이크포인트 설정!

✅ 핵심 요약 & 학습 체크리스트

"JavaScript는 외워서 하는 것이 아닙니다.
직접 코드를 써보고, 에러를 만나고, 해결하는 과정에서 진짜 실력이 쌓입니다.
콘솔(F12)을 항상 열어두고 모든 것을 직접 실행해보세요!"

📋 학습 완료 체크리스트:
☐ const/let/var의 차이와 스코프를 설명할 수 있다
☐ 7가지 데이터 타입을 안다
☐ === 와 == 의 차이를 안다
☐ 화살표 함수를 작성할 수 있다
☐ map(), filter(), reduce()를 직접 사용해봤다
☐ 구조분해할당과 스프레드 연산자를 쓸 수 있다
☐ querySelector로 DOM 요소를 선택하고 변경할 수 있다
☐ addEventListener('click')으로 이벤트를 처리할 수 있다
☐ async/await으로 fetch API를 사용해봤다
☐ try/catch로 에러를 처리할 수 있다
☐ 크롬 DevTools 콘솔에서 JS를 직접 실행해봤다
☐ 간단한 To-Do 앱(추가/삭제)을 순수 JS로 만들었다

🎉 다음 단계: FrontendDevGuide0005 — JavaScript 심화 (DOM & API) 로 넘어가세요!
JS 기초를 마스터했으니, 이제 실제 서버와 통신하는 방법을 배울 차례입니다 🚀