1주차 — JavaScript 기초

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

---

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

학습목표

• 개발 환경을 스스로 세팅할 수 있다.
• 변수, 자료형, 연산자, 조건문을 이해하고 사용할 수 있다.

시간 배분

시간 내용

0:00~0:20	Node.js 설치, VSCode 세팅, 확장 프로그램(ESLint, Prettier)
0:20~0:40	콘솔 실행 방법 (node 파일, 브라우저 콘솔), console.log 활용
0:40~1:10	변수(var/let/const) 차이, 데이터 타입(number, string, boolean, null, undefined)
1:10~1:30	연산자(산술/비교/논리), 조건문(if/else, switch), 삼항연산자
1:30~2:00	실습: 성적 계산기 만들기 (점수 입력 → 등급 출력)

예제 코드

const score = 85;
let grade;

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

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

과제

• 짝수/홀수 판별기, BMI 계산기 만들기

---

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

학습목표

• 반복문으로 데이터를 순회할 수 있다.
• 함수 선언 방식(선언식/표현식/화살표 함수)의 차이를 이해한다.

시간 배분

시간 내용

0:00~0:30	반복문(for, while, for...of, for...in)
0:30~1:00	함수 선언/표현식, 매개변수와 반환값
1:00~1:30	화살표 함수(arrow function) 문법, 기존 함수와 차이
1:30~1:50	콜백 함수 개념 (함수를 값처럼 넘기는 감각 잡기)
1:50~2:00	실습: 1~100 중 3의 배수 합 구하기, 배열 순회 함수 만들기

예제 코드

// 함수 선언식
function add(a, b) {
  return a + b;
}

// 화살표 함수
const addArrow = (a, b) => a + b;

// 콜백 함수 맛보기
function repeat(n, callback) {
  for (let i = 0; i < n; i++) {
    callback(i);
  }
}
repeat(3, (i) => console.log(`실행 ${i}`));

과제

• 구구단 출력기, 특정 조건의 숫자만 필터링하는 함수 만들기

---

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

학습목표

• map/filter/reduce 등 배열 메서드로 데이터를 가공할 수 있다.
• 구조 분해 할당과 스프레드 연산자를 사용할 수 있다.

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

시간 배분

시간 내용

0:00~0:20	배열 기본(생성, 인덱스, length, push/pop)
0:20~1:00	map, filter, find, forEach — 각각 언제 쓰는지 비교
1:00~1:20	reduce (합계, 카운트 등 실전 예시)
1:20~1:40	객체 리터럴, 구조 분해 할당(destructuring)
1:40~2:00	스프레드/레스트 연산자, 실습: JSON 데이터 가공

예제 코드

const users = [
  { name: '민수', age: 25 },
  { name: '지영', age: 17 },
  { name: '태호', age: 30 },
];

// filter + map 조합 (React/Vue에서 매우 흔한 패턴)
const adultNames = users
  .filter((user) => user.age >= 20)
  .map((user) => user.name);

console.log(adultNames); // ['민수', '태호']

// 구조 분해 할당
const { name, age } = users[0];
console.log(name, age);

// 스프레드
const newUser = { ...users[0], age: 26 };

과제

• 상품 목록 데이터에서 가격이 10000원 이상인 상품 이름만 추출하기
• reduce로 배열 총합/평균 구하기

---

1주차 마무리 체크리스트

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

1주차_JavaScript_기초.md.pdf

0.26MB