2주차 — JavaScript 심화(상세)

목표: 비동기 처리와 모듈 시스템을 이해하고, React/Vue 학습에 필요한 사전 개념(this, 클로저)을 정리한다.

---

4회차 (2시간): 스코프와 this

0:00~0:30 | 스코프

• 전역 스코프 / 함수 스코프 / 블록 스코프({} 단위, let·const는 블록 스코프 적용)

if (true) {
  let x = 10;
}
console.log(x); // 에러 - 블록 밖에서 접근 불가

0:30~1:00 | 클로저

• 함수가 자신이 선언될 때의 스코프를 기억하는 것. 상태를 유지하는 함수를 만들 때 사용

function makeCounter() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}
const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

1:00~1:40 | this 바인딩 (★ React/Vue에서 중요)

• 일반 함수: 호출 시점에 따라 this가 바뀜 (콜백 안에서는 this가 사라지기 쉬움)
• 화살표 함수: 상위 스코프의 this를 그대로 유지

const obj = {
  name: '민수',
  sayHiNormal: function () {
    setTimeout(function () {
      console.log(`안녕 ${this.name}`); // undefined
    }, 100);
  },
  sayHiArrow: function () {
    setTimeout(() => {
      console.log(`안녕 ${this.name}`); // 민수
    }, 100);
  },
};

화살표 함수를 쓰는 이유 중 하나가 바로 이 this 문제 때문 — React 클래스 컴포넌트, Vue methods에서 실제로 겪는 이슈

1:40~2:00 | 템플릿 리터럴, 실습

const name = '민수';
console.log(`안녕하세요, ${name}님. 오늘은 ${new Date().getDay()}요일입니다.`);

과제

• 클로저를 활용한 카운터 함수 만들기 (increment() 호출마다 값 누적)

---

5회차 (2시간): 비동기 처리

0:00~0:20 | 동기 vs 비동기

• 동기: 코드가 순서대로 하나씩 실행됨
• 비동기: 시간이 걸리는 작업(네트워크 요청 등)을 기다리지 않고 다음 코드를 먼저 실행
• 콜백만으로 처리하면 콜백 지옥(callback hell) 발생 → Promise/async-await로 해결

0:20~0:50 | Promise

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('데이터 완료'), 1000);
  });
}
fetchData().then((result) => console.log(result));

0:50~1:20 | async/await

• Promise를 더 읽기 쉽게 쓰는 문법. await는 async 함수 안에서만 사용 가능

async function getData() {
  const result = await fetchData();
  console.log(result);
}

1:20~1:40 | fetch API

async function getUser() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const data = await response.json();
  console.log(data.name);
}
getUser();

1:40~2:00 | try/catch, 실습

async function getUserSafe() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    const data = await response.json();
    console.log(data.name);
  } catch (error) {
    console.error('에러 발생:', error);
  }
}

과제

• JSONPlaceholder API에서 posts 목록 가져와 제목만 출력
• 존재하지 않는 URL로 요청해서 에러 처리 확인

---

6회차 (2시간): DOM & 모듈 시스템

0:00~0:25 | DOM 조작

document.querySelector('#btn').addEventListener('click', () => {
  document.querySelector('#count').innerText = '클릭됨';
});

0:25~0:40 | DOM 직접 조작의 한계

• 상태가 많아질수록 "어디를 수정해야 하는지" 추적하기 어려워짐 → 프레임워크가 해결하는 문제 (React/Vue 예고)

0:40~1:10 | 모듈 시스템 (import/export), npm

// math.js
export function add(a, b) {
  return a + b;
}
export const PI = 3.14;

// main.js
import { add, PI } from './math.js';
console.log(add(2, 3), PI);

• npm 기본 명령: npm init, npm install 패키지명

1:10~1:30 | 번들러 개념, Vite

• 여러 파일을 하나로 묶고 최적화해주는 도구. React/Vue 실습 모두 Vite로 진행

1:30~2:00 | 실습

• Vite 프로젝트 생성 → npm run dev 실행 확인
• 파일 3개로 나눠서 각각 export한 함수를 main.js에서 import해서 사용

과제

• Vite 프로젝트 생성 후 정상 실행 확인
• 모듈 나눠서 import/export 연습 마무리

---

2주차 마무리 체크리스트

• [ ] 화살표 함수의 this가 왜 다르게 동작하는지 설명할 수 있다
• [ ] async/await로 fetch 요청을 작성할 수 있다
• [ ] import/export로 파일을 나눠 작성할 수 있다
• [ ] Vite 프로젝트를 생성하고 실행할 수 있다

2주차_JavaScript_심화.md2.pdf

0.30MB