수강대상
•
국민내일배움카드 발급 대상이면서 K-디지털 기초역량훈련에 성실히 참여할 것으로 확인되는 사람
•
JavaScript 및 프로그래밍 중급 학습이 필요하거나 관심있는 국민 누구나
◦
개발자 취업 준비생
◦
웹 사이트 만드는 방법이 궁금한 분
◦
중급 수준의 공부를 통해 실전에서 필요한 지식을 습득하고 싶은 분
◦
자바스크립트를 정복하고 싶은 분
교육과정 소개
본 교육 과정은 개발자로 일하고 싶은 분과 웹 개발 전반을 이해하고 싶은 IT 관련 직무 종사자를 위한 과정입니다. JavaScript 프로그래밍 기초 과정을 수강하셨거나, 자바스크립트에 대한 기초적인 이해와 지식이 있는 분들께 추천합니다.
본 과정에서는 최신 자바스크립트와 Node.js의 모든 주요 개념을 다루며, 실무에 바로 적용 가능한 실습과 과제를 통해 이해를 돕습니다. 모듈, 비동기 처리, 웹 서버 구축과 같은 필수적인 기술을 깊이 있게 학습하여, 복잡한 웹 애플리케이션 개발의 기반을 다질 수 있습니다. 실무에서 자주 사용하는 패키지 매니저인 npm과 Express 모듈도 배우며, 웹 애플리케이션의 효율적인 구현과 유지 보수성을 높이는 방법을 익히는 과정입니다.
커리큘럼
연번 | 차시명 | 세부내용 |
1 | 자바스크립트의 동작 원리 | - 모던 자바스크립트가 무엇인지 이해하기
- 모던 자바스크립트에서 사용되는 자료형(Symbol, Bigint 등)에 대해 이해하기
- 자바스크립트 데이터 타입의 특징 이해하기
- 논리 연산자의 우선순위에 대해 이해하기
- null 병합 연산자에 대해서 이해하기
- 변수와 스코프의 개념에 대해서 이해하기 |
2 | 함수 다루기 | - 함수를 만드는 방법 중 함수 선언과 함수 표현식에 대하여 이해하기
- 즉시 실행 함수에 대해 이해하고 필요한 상황에 적절하게 활용하기
- Parameter와 arguments 객체에 대해 이해하기
- 화살표 함수에 대해 이해하고 올바르게 변환해보기
- this에 대해 이해하고 활용하기
- (실습 과제) 줄임말 대잔치: 단어의 첫 글자를 따서 줄임말을 만들어주는 firstWords 함수 완성하기
- (실습 과제) 1세대는 거르는게 답?: 첫 번째 아규먼트는 무시하고 두 번째 아규먼트부터 출력하는 ignoreFirst 함수 완성하기 |
3 | 자바스크립트의 문법과 표현 | - 문장과 표현식의 차이 구분하기
- 조건부 연산자에 대해 이해하기
- Spread 구문에 대해 이해하고 연습해보기
- 모던한 프로퍼티 표기법과 접근법 익히기
- 옵셔널 체이닝에 대해 이해하기
- 배열과 객체를 대룰 때 활용하는 구조 분해 문법 연습하기
- 에러와 에러 객체에 대해 이해하기
- try cathch문의 에러 처리 방법 익히기
- finally문에 대해 이해하기
- (실습 과제) Spread 구문 연습하기: Spread 구문을 활용해 배열을 복사, 할당, 전달하여 출력하는 연습하기
- (실습 과제) 배열 Destructuring 연습하기: Destructuring 문법을 활용해 배열의 요소들을 변수에 할당, 교체하여 출력하는 연습하기
- (실습 과제) 객체 Destructuring 연습하기: Destructuring 문법을 활용해 변수에 프로퍼티를 할당하고, 코드를 수정하여 출력하는 연습하기
- (실습 과제) 퀴즈왕의 길은 험난하다: 퀴즈 게임 중 에러가 발생하면, 콘솔에 에러 객체의 이름만 출력되도록 하기 |
4 | 자바스크립트의 유용한 내부 기능 | - 자바스크립트의 다양한 배열 메소드(forEach, map, filter, find, some, every, reduce, sort, reverse)에 대해 이해하기
- Map에 대해 이해하기
- Set에 대해 이해하기
- (실습 과제) 할 일 정리: 배열 안의 객체의 형태로 오늘 해야 할 일들을 정리해두고 화면에 그려보는 기능 개발하기
- (실습 과제) 셜록 훈즈: 주어진 배열의 map 메소드를 활용해서 새로운 배열을 변수에 담기
- (실습 과제) 서울 김서방 찾지 않기 : filter 메소드를 활용해 김씨 성을 갖지 않은 사람들을 추려내어 다른 변수에 담기
- (실습 과제) 이메일 찾기: find 메소드를 활용해 이름, 전화번호가 일치하는 객체를 찾아 변수에 할당하기
- (실습 과제) 이중 스파이가 있다: 스파이 전문 파견 기업 내에 있는 이중 스파이를 찾아내는 함수 만들기
- (실습 과제) 세계적인 경력의 소유자: reduce 메소드를 활용해 일한 경력을 합산한 값을 출력하기 |
5 | 자바스크립트 모듈 | - 모듈에 대해 이해하기
- 모둘 스코프와 문법에 대해 이해하기
- 이름 바꿔 import 하는 방법 익히기
- 한꺼번에 import, export 하는 방법 익히기
- default export 활용하기
- (실습 과제) 메뉴 추가 기능 붙이기: 점심시간 메뉴를 무작위로 골라주는 메뉴 정하기 프로그램 만들기
- (실습 과제) 이름 바꿔 붙이기: 메뉴 정하기 프로그램 내부의 함수 이름 바꾸기
- (실습 과제) 태그 정리하기: 미리 태그를 선택하고 선택한 요소 노드를 모듈화할 수 있도록 파일 내부의 변수를 한꺼번에 export한 다음, 필요한 곳에 필요한 만큼 import하기
- (실습 과제) 간결하게 기능 붙이기: 만든 함수들을 default export하여 좀 더 간결한 문법으로 import하기
- (실습 과제) 가져와서 다시 내보내기: 필요한 모듈 파일을 하나로 묶어 관리하기 위해 필요한 함수를 import 하기 |
6 | 웹 기초 다지기 | - 웹에 대한 기초적 이해하기
- 웹브라우저와 서버 사이의 통신에 대해 이해하기
- fetch 함수에 대해 이해하기
- response 객체에 대하여 파악하기
- URL과 리퀘스트에 대해 이해하기
- 프로토콜 HTTP에 대해 이해하기
- (실습 과제) 원하는 URL로 리퀘스트 보내보기: URL에 리퀘스트를 보내고 리스폰스의 내용을 출력하는 코드 작성하기 |
7 | Web API 배우기 | - 객체 표기법과 JSON 문법의 차이에 대해 이해하기
- JSON 객체의 메소드에 대해 파악하기
- Request의 Head와 Body에 대해 이해하기
- POST request, DELETE request 보내고 활용하기
- Web API, REST API에 대해서 이해하기
-Status Code에 대해 파악하기
- Content-Type 설정하는 방법 이해하기
- (실습 과제) 코드잇 토픽 데이터 처리하기: URL에 리퀘스트를 보내서 코드잇 토픽들 중 난이도 '초급'에 해당하는 토픽만을 추려 평균 별점을 계산하기
- (실습 과제) 직원 정보 직접 추가해보기: 새 직원 정보를 추가한 후에 전체 직원 정보를 조회하는 코드 구현하기
- (실습 과제) Response의 Status Code 보기: fetch() 함수 안 URL을 다른 URL로 변경해보기 |
8 | 비동기 실행과 Promise 객체 | - 웹 통신 관련 자바스크립트 코드 작성법 습득하기
- 동기 실행과 비동기 실행에 대해 이해하기
- 프로미스 객체가 무엇인지 이해하기
- 프로미스 체이닝에 대해 이해하고 활용하기
- 메소드(then, catch, finally) 이해하기
- 여러 프로미스 객체를 다루고 활용하기
- (실습 과제) 신입 사원 정보 반영하기: 코드잇몰 신입사원 채용에서 합격한 사람들의 정보를 기존 직원 정보에 추가하기
- (실습 과제) then 메소드 제대로 익히기: then 메소드가 리턴한 Promise 객체가 콜백의 리턴값에 따라 달라지는 것 확인하기
- (실습 과제) 어디서 발생한 에러인지 확인해보기: 각 에러 정보를 확인할 수 있는 방법을 처리하고 실행하기
- (실습 과제) 로딩 아이콘 코드 수정해보기: JSON 데이터가 오는 URL, HTML 등 코드가 오는 URL이 있는 미완성 코드에 코드를 추가하여 정상적인 값 출력하기
- (실습 과제) 코드 원상복구하기: 순서가 바뀐 메소드를 올바르게 맞추고, 각 유저의 이름과 이메일 정보만 출력하기
- (실습 과제) 점심 메뉴 랜덤 선택기: 랜덤 메뉴 선택기에서 생성된 객체를 fulfilled 상태로 만드는 함수 작성하기 |
9 | async/await을 활용한 세련된 비동기 코드 | - 비동기 실행 관련 문법에 대해 전반적으로 이해하기
- async와 await을 기반으로 프로미스 객체 다루기
- async와 await의 리턴에 대해 이해하기
- catch문과 finally문 이해하기
- 두 가지 종류의 콜백을 이해하고 활용하기
- (실습 과제) 세련된 비동기 실행 코드 작성해보기: Promise Chaining 코드를 async/await 구문을 사용하는 코드로 바꾸기
- (실습 과제) await이 리턴하는 것: 작업 성공 결과를 추출해서 출력하는 코드 확인하기
- (실습 과제) try, catch, finally문의 위치: 주석 내 지워진 키워드를 채워넣고 코드 실행하기
- (실습 과제) 개선된 점심 메뉴 랜덤 선택기 코드: 기존에 있던 코드를 async/await를 사용한 코드로 바꿔 가독성을 높이기 |
10 | Node.js 시작하기 | - Node.js에 대하여 전반적으로 이해하기
- Node.js로 직접 자바스크립트 실행해보기
- REPL 모드에 대해 이해하고 실행해보기
- (실습 과제) Node.js 시작하기 실습: 문자열을 출력하는 자바스크립트 코드를 작성하고 실행하기 |
11 | Node.js 기본 개념 | - Node.js의 핵심 개념인 모듈과 비동기에 대해 이해하기
- 모듈(직접 제작, 코어, 서드 파티)의 특성에 대해 파악하기
- 모듈을 외부에 공개하는 방법에 대해 익히기
- Node.js의 비동기 실행 중심 실행환경 특성을 파악하고 비동기 함수 활용하기
- 퀴즈를 통해 비동기 프로그래밍과 콜백에 대해 이해하기
- EventEmitter 객체를 이해하고 사용하기
- 비동기 실행의 내부 원리 이해하기
- (실습 과제) 모듈 실습: math-tools.js 모듈을 로드하는 함수를 작성해서 5의 팩토리얼 구하기
- (실습 과제) 비동기 프로그래밍과 콜백 실습: readFile() 함수의 콜백에 적절한 코드를 추가해서 test.js 파일 출력하기
- (실습 과제) 비동기 프로그래밍과 이벤트 과제: emitter 객체 이벤트를 발생시켰을 때, 문자열을 출력하는 콜백 설정하기 |
12 | 초간단 웹서버 만들기 | - 서버와 클라이언트 개념에 대해 확실히 이해하기
- Node.js로 실행할 서버 프로그램 만들어보기
- 클라이언트 요청에 따른 서버 응답 내용 서버 객체에 설정하기
- 퀴즈를 통해 URL의 구조에 대해 이해하기
- 도메인 네임과 IP주소에 대해 이해하기
- 라우팅에 대해 이해하고 라우팅해보기
- 코드 개선하는 방법 파악하기 |
13 | 서드파티 모듈과 npm 제대로 배우기 | - 서드파티 모듈과 npm에 대해 깊이있게 학습하기
- 모듈이 검색되는 순서와 절차에 대해 이해하기
- package.json 파일의 각 필드에 대해 살펴보고 이해하기
- 내 모듈을 패키지로 만들어 npm 공개 저장소에 올려보기
- nodemon 패키지를 기반으로 전역 설치에 대해 이해하기
- npm의 중요성과 Yarn에 대해 파악하기 |