2주차 — JavaScript 심화

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

---

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

학습목표

• 스코프와 클로저 개념을 이해한다.
• 일반 함수와 화살표 함수의 this 차이를 구분할 수 있다.

시간 배분

시간 내용

0:00~0:30	스코프(전역/함수/블록 스코프)
0:30~1:00	클로저(closure) 개념과 활용 예시
1:00~1:40	this 바인딩 — 일반 함수 vs 화살표 함수 (★ React/Vue에서 매우 중요)
1:40~2:00	템플릿 리터럴, 실습: this 동작 비교

예제 코드

const obj = {
  name: '민수',
  sayHiNormal: function () {
    setTimeout(function () {
      console.log(`안녕 ${this.name}`); // undefined - this가 사라짐
    }, 100);
  },
  sayHiArrow: function () {
    setTimeout(() => {
      console.log(`안녕 ${this.name}`); // 민수 - 화살표는 상위 this 유지
    }, 100);
  },
};

obj.sayHiNormal();
obj.sayHiArrow();

왜 중요한가

• React 클래스 컴포넌트, Vue의 methods 옵션 등에서 this 문제가 실제로 자주 발생합니다.
• 화살표 함수를 쓰는 이유(this를 캡처하기 위해)를 이해해야 나중에 헷갈리지 않습니다.

과제

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

---

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

학습목표

• Promise와 async/await로 비동기 코드를 작성할 수 있다.
• fetch로 외부 API 데이터를 가져올 수 있다.

시간 배분

시간 내용

0:00~0:20	동기 vs 비동기 개념, 콜백의 한계(콜백 지옥)
0:20~0:50	Promise 기본 문법(.then, .catch)
0:50~1:20	async/await 문법, Promise와의 관계
1:20~1:40	fetch API로 데이터 가져오기
1:40~2:00	try/catch 에러 처리, 실습: 공개 API 호출

예제 코드

// async/await 방식
async function getUser() {
  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);
  }
}

getUser();

과제

• JSONPlaceholder API에서 게시글 목록(posts)을 가져와 제목만 콘솔에 출력하기
• 존재하지 않는 URL로 요청해서 에러 처리가 되는지 확인하기

---

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

학습목표

• DOM 조작의 기본 원리를 이해한다 (프레임워크가 왜 필요한지 체감).
• import/export로 모듈을 나눌 수 있다.
• Vite로 프로젝트를 생성할 수 있다.

시간 배분

시간 내용

0:00~0:25	DOM 선택(querySelector), 조작(innerText, classList), 이벤트 리스너
0:25~0:40	DOM 직접 조작의 한계 → 프레임워크가 해결하는 문제 소개
0:40~1:10	ES6 모듈(import/export), npm 기본 명령어(init, install)
1:10~1:30	번들러 개념, Vite 소개
1:30~2:00	실습: Vite 프로젝트 생성 → 파일 여러 개로 나눠서 import/export 연습

예제 코드

// 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);

DOM 조작 vs 프레임워크 (설명용 비교)

// Vanilla JS: 버튼 클릭 시 숫자 증가 - DOM을 직접 찾아서 수정
let count = 0;
document.querySelector('#btn').addEventListener('click', () => {
  count++;
  document.querySelector('#count').innerText = count;
});

→ "이걸 React/Vue에서는 count라는 상태값만 바꾸면 화면이 자동으로 갱신된다"는 점을 미리 예고

과제

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

---

2주차 마무리 체크리스트

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

2주차_JavaScript_심화.md.pdf

0.29MB