1주차 — JavaScript 기초(상세)

목표: JS 문법에 익숙해지고, 함수/배열/객체를 다루는 기본기를 갖춘다.

---

1회차 (2시간): 개발 환경 & 기본 문법

0:00~0:20 | Node.js 설치, VSCode 세팅

• Node.js LTS 설치 → 터미널에서 node -v, npm -v로 확인
• VSCode 설치 + 확장 프로그램: ESLint(문법 오류 검사), Prettier(코드 스타일 자동 정리)
• 설정에서 "Format on Save" 켜두기

0:20~0:40 | 콘솔 실행, console.log

• 실행 방법 2가지: node 파일명.js / 브라우저 콘솔(F12 → Console)

console.log('Hello, JavaScript!');
console.log('score:', 90); // 라벨 붙여서 출력하는 습관

0:40~1:10 | 변수, 데이터 타입

• const(기본, 재할당 불가) / let(값이 바뀔 때) / var(예전 방식, 지금은 잘 안 씀)
• 타입: number, string, boolean, null(의도적 빈값), undefined(할당 전 상태)

const name = '민수';
let age = 25;
age = 26;

console.log(typeof age);   // 'number'
let empty;
console.log(empty);        // undefined

1:10~1:30 | 연산자, 조건문, 삼항연산자

• ==(타입변환 후 비교) vs ===(정확히 비교, 기본으로 사용)
• if/else if/else, switch(값이 여러 개로 나뉠 때, break 필수)
• 삼항연산자: 조건 ? 참 : 거짓

const num = 7;
console.log(num % 2 === 0 ? '짝수' : '홀수');

1:30~2:00 | 실습: 성적 계산기

const score = 85;
let grade;

if (score >= 90) grade = 'A';
else if (score >= 80) grade = 'B';
else if (score >= 70) grade = 'C';
else grade = 'D';

console.log(`${score}점 → ${grade}등급`);

과제

• 짝수/홀수 판별기
• BMI 계산기 (키, 몸무게 → BMI 계산 → 저체중/정상/과체중 출력)

---

2회차 (2시간): 함수와 반복문

0:00~0:30 | 반복문

• for(횟수 정해짐) / while(조건 기반) / for...of(배열 순회) / for...in(객체 순회)

const fruits = ['사과', '바나나', '포도'];
for (const fruit of fruits) {
  console.log(fruit);
}

0:30~1:00 | 함수 선언/표현식

• 선언식: function 함수명() {} / 표현식: const 함수명 = function() {}
• return이 없으면 함수는 undefined를 반환

function add(a, b) {
  return a + b;
}

function greet(name = '손님') {
  return `안녕하세요, ${name}님`;
}

1:00~1:30 | 화살표 함수

• 매개변수 1개 → 괄호 생략 가능 / 본문 한 줄 → {}와 return 생략 가능

const square = (x) => x * x;

• 객체를 바로 반환할 땐 () => ({ name: '민수' })처럼 괄호로 감싸야 함

1:30~1:50 | 콜백 함수

• 함수를 다른 함수의 매개변수로 전달하는 것 (map/filter, 이벤트 처리에서 계속 등장)

function repeat(n, callback) {
  for (let i = 0; i < n; i++) callback(i);
}
repeat(3, (i) => console.log(`실행 ${i}`));

⚠️ callback()처럼 괄호를 붙이면 즉시 실행되어버리니, 함수 자체(callback)를 전달해야 함

1:50~2:00 | 실습

// 1~100 중 3의 배수 합
let sum = 0;
for (let i = 1; i <= 100; i++) {
  if (i % 3 === 0) sum += i;
}
console.log(sum);

과제

• 구구단 출력기 (2단~9단)
• 배열에서 짝수만 걸러내는 함수 (for문으로 직접 구현)

---

3회차 (2시간): 배열과 객체

⚠️ 이 회차는 React/Vue에서 가장 많이 쓰는 패턴이라 특히 중요합니다.

0:00~0:20 | 배열 기본

• 인덱스는 0부터, length로 길이 확인, push(추가)/pop(제거)

const fruits = ['사과', '바나나'];
fruits.push('포도');
console.log(fruits.length); // 3

0:20~1:00 | map / filter / find / forEach

메서드 역할 반환값

map	각 요소 변형	새 배열
filter	조건에 맞는 요소만	새 배열
find	조건에 맞는 첫 요소 하나	요소 하나
forEach	각 요소 순회(반환 없음)	undefined

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((n) => n * 2);
const evens = numbers.filter((n) => n % 2 === 0);
const found = numbers.find((n) => n > 3);

1:00~1:20 | reduce

• 배열을 하나의 값으로 누적 계산 (합계, 총합 등). 초기값(두 번째 인자) 꼭 넣기

const cart = [{ price: 4000 }, { price: 3000 }];
const total = cart.reduce((acc, item) => acc + item.price, 0);
console.log(total); // 7000

1:20~1:40 | 객체, 구조 분해 할당

const user = { name: '민수', age: 25 };
const { name, age } = user;

1:40~2:00 | 스프레드/레스트, 실습

// 스프레드: 기존 객체 복사 + 값만 변경 (React/Vue 상태 업데이트에서 자주 사용)
const user = { name: '민수', age: 25 };
const updatedUser = { ...user, age: 26 };

// 레스트: 나머지 인자를 배열로 묶음
function sumAll(...numbers) {
  return numbers.reduce((acc, cur) => acc + cur, 0);
}

실습: JSON 데이터 가공

const products = [
  { id: 1, name: '노트북', price: 1200000 },
  { id: 2, name: '마우스', price: 15000 },
];

const expensiveNames = products
  .filter((p) => p.price >= 10000)
  .map((p) => p.name);

console.log(expensiveNames);

과제

• 가격이 10000원 이상인 상품 이름만 filter+map으로 추출
• reduce로 배열 총합/평균 구하기

---

1주차 마무리 체크리스트

• [ ] let/const 차이를 설명할 수 있다
• [ ] 화살표 함수를 자유롭게 작성할 수 있다
• [ ] 콜백 함수가 무엇인지 예를 들어 설명할 수 있다
• [ ] map/filter/reduce의 차이를 설명할 수 있다
• [ ] 구조 분해 할당과 스프레드 연산자를 읽고 쓸 수 있다

1주차_JavaScript_기초.md2.pdf

0.41MB