JS 커리큘럼

값을 담고 비교하고 되풀이합니다. 프로그램을 이루는 가장 작은 조각들입니다.

• 1.1 JavaScript는 무엇을 하는 언어인가 웹 페이지에서 JavaScript가 맡는 일과 HTML·CSS와의 분담을 봅니다.
• 1.2 콘솔과 첫 출력 console.log 로 값을 내보내고, 출력과 값이 어떻게 다른지 봅니다.
• 1.3 변수: let과 const 값에 이름을 붙입니다. 다시 넣을 수 있는 것과 없는 것을 구분합니다.
• 1.4 데이터 타입 숫자·문자열·불리언·undefined·null 을 구분하고 typeof 로 확인합니다.
• 1.5 문자열 다루기 따옴표와 템플릿 리터럴, 그리고 길이·자르기·합치기를 다룹니다.
• 1.6 숫자와 연산자 사칙연산과 나머지, 증감, 연산 우선순위를 봅니다.
• 1.7 비교와 논리 연산자 === 와 == 의 차이, 그리고 조건을 조합하는 방법입니다.
• 1.8 조건문 if 와 else 로 조건에 따라 다른 코드를 실행합니다.
• 1.9 switch와 삼항 연산자 여러 경우로 나누는 다른 방법과 선택 기준을 봅니다.
• 1.10 반복문 for 와 while 로 같은 일을 되풀이하고, 무한 루프를 피하는 방법을 봅니다.

코드에 이름을 붙여 묶고, 그것이 보는 범위를 정합니다.

• 2.1 함수 만들기와 호출하기 함수를 선언하고 호출합니다. 매개 변수와 반환값을 다룹니다.
• 2.2 함수 표현식과 화살표 함수 함수를 작성하는 세 가지 방법과 그 차이를 봅니다.
• 2.3 기본값·나머지 매개 변수 기본값을 정해 두고, 개수가 정해지지 않은 인자를 받습니다.
• 2.4 스코프와 호이스팅 변수가 보이는 범위를 알아보고, var 를 사용하지 않는 이유를 봅니다.
• 2.5 클로저 맛보기 함수가 만들어질 때의 바깥 변수를 계속 참조하는 것을 봅니다.
• 2.6 함수를 값으로 다루기 함수를 인자로 넘깁니다. 콜백의 개념을 익힙니다.

배열과 객체로 여러 값을 다룹니다. 실무에서 가장 오래 머무는 자리입니다.

• 3.1 배열 기초 여러 값을 순서대로 담고, 인덱스로 꺼내고 넣습니다.
• 3.2 배열 반복하기 for...of 와 forEach 로 배열을 탐색합니다.
• 3.3 map과 filter 원본을 두고 새 배열을 만듭니다. 변형과 걸러내기를 다룹니다.
• 3.4 find·some·every·reduce 배열에서 찾고, 판정하고, 하나의 값으로 모읍니다.
• 3.5 배열 정렬과 조작 sort 로 차례를 바꾸고 잘라 내고 이어 붙입니다. 얕은 복사를 주의합니다.
• 3.6 객체 기초 이름을 붙인 값들을 하나로 묶습니다. 두 가지 표기법을 봅니다.
• 3.7 구조 분해 할당과 스프레드 필요한 값만 꺼내고, ... 로 복사하고 병합합니다.
• 3.8 JSON과 데이터 형태 JSON.stringify 와 parse 로 데이터를 글자와 객체 사이에서 옮깁니다.

화면의 요소를 찾아 바꾸고, 사용자의 동작에 반응합니다.

• 4.1 HTML/CSS 최소 지식 JavaScript 를 배우는 데 필요한 만큼의 태그와 선택자를 봅니다.
• 4.2 요소 선택하기 querySelector 로 화면의 요소를 찾습니다.
• 4.3 내용과 속성 바꾸기 textContent 와 속성으로 화면의 내용을 바꿉니다.
• 4.4 스타일과 클래스 제어 classList 와 style 로 모양을 바꿉니다.
• 4.5 이벤트 다루기 addEventListener 로 클릭과 입력에 반응합니다.
• 4.6 요소 만들고 넣기 createElement 로 요소를 만들어 배열을 화면 목록으로 그립니다.
• 4.7 폼 입력과 이벤트 위임 입력값을 읽고 검사합니다. 위임으로 여러 요소를 한 번에 다룹니다.

기다리는 일을 다룹니다. 서버에서 데이터를 가져오는 방법까지 봅니다.

• 5.1 동기와 비동기 먼저 작성한 코드가 늘 먼저 끝나지는 않는다는 것을 봅니다.
• 5.2 콜백과 콜백 지옥 콜백으로 순서를 만들고, 그 방식의 한계를 봅니다.
• 5.3 Promise then 과 catch 로 결과를 받습니다. 대기·이행·거부 상태를 봅니다.
• 5.4 async와 await 비동기 코드를 위에서 아래로 읽히게 작성합니다.
• 5.5 fetch로 데이터 가져오기 서버에 요청을 보내고 응답과 상태 코드를 다룹니다.
• 5.6 에러 처리와 로딩 상태 실패했을 때와 기다리는 동안의 화면을 만듭니다.

클래스와 모듈로 코드를 나눕니다. 최근 문법도 함께 봅니다.

• 6.1 클래스와 인스턴스 class 로 형태를 정하고 객체를 만듭니다.
• 6.2 상속과 확장 extends 로 물려받고 super 로 부모를 호출합니다.
• 6.3 this 이해하기 호출하는 방식에 따라 this 가 달라지는 것을 봅니다.
• 6.4 모듈: import와 export 코드를 파일로 나누고 필요한 것만 가져옵니다.
• 6.5 알아두면 좋은 최신 문법 ?. 와 ?? , 단축 속성, Map 과 Set 을 봅니다.

오류를 읽고 고치는 방법, 그리고 다음에 배울 것을 정리합니다.

• 7.1 에러 읽는 법 자주 만나는 오류 메시지를 읽고 원인을 찾습니다.
• 7.2 개발자 도구로 디버깅 중단점을 걸고 한 줄씩 실행하며 값을 확인합니다.
• 7.3 코드를 읽기 좋게 이름 짓기와 함수 분리, 조기 반환을 다룹니다.
• 7.4 브라우저 저장소 localStorage 로 새로 고침 뒤에도 값을 남깁니다.
• 7.5 다음 단계 로드맵 npm 과 번들러, 프레임워크, TypeScript 로 가는 길을 봅니다.

배운 것을 모아 완성된 앱을 만듭니다. 단계별로 따라가며 작성합니다.

• 8.1 할 일 관리 앱 DOM 과 배열, 저장소를 모아 하나의 앱을 만듭니다.
• 8.2 환율·날씨 조회기 fetch 와 async/await 로 외부 데이터를 화면에 냅니다.
• 8.3 퀴즈 앱 객체 배열과 상태 관리, 타이머를 다룹니다.
• 8.4 간단 대시보드 클래스로 나누어 데이터를 모아 보여 줍니다.