먼저, 이 커리큘럼이 왜 이런 순서로 배치되었는지 조심스레 말씀드리고자 합니다.
프로그래밍이라는 길을 처음 걸을 때, 한 걸음 한 걸음 땅을 디디며 걷듯, 기본부터 차분히 쌓아 올려 자연스레 다음 단계로 나아가도록 설계되었기 때문입니다.
아래 각 장에서는 무엇을 배우는지, 그리고 그것을 가장 쉽게 표현해 보았습니다.
천천히 마음을 열고 따라와 주시면 좋겠습니다.
1. 데이터 상자 만들기 (변수 선언)
이제 막 발을 내딛는 분들께, 가장 기본이 되는 ‘데이터 상자’, 즉 변수를 먼저 알려드리고자 합니다.
컴퓨터 속 세상에서 무엇인가를 담고 보관하는 작은 그릇, 상자를 만든다는 것은 아주 중요한 첫걸음입니다.
- 변수 이야기
옛날 방식과 현대 방식의 상자를 소개하며, 바꿀 수 있는 상자와 변하지 않는 상자를 배웁니다.
쉬운표현 : 컴퓨터 안에 물건을 담을 수 있는 상자를 만드는 법을 배워요. - 데이터 타입
숫자, 글자, 참과 거짓, 그리고 특별한 빈 상자까지, 상자에 담을 수 있는 여러 가지 물건을 살펴봅니다.
쉬운표현 : 상자 안에 어떤 물건을 넣을 수 있는지 알아봐요. - 변수명 규칙
상자에 이름을 지어주는 법을 배워, 나중에 헷갈리지 않도록 다듬어봅니다.
쉬운표현 : 상자 이름을 보기 좋고 이해하기 쉽게 짓는 방법이에요.
2. 계산하고 비교하기 (연산자)
데이터를 손에 넣었으면, 그걸로 무언가를 해야 하지요.
더하기, 빼기, 비교, 논리적인 생각까지 컴퓨터가 계산하고 판단하는 방법을 하나하나 배웁니다.
- 산술 연산자
숫자를 더하고 빼는 기본 계산법부터 시작합니다.
쉬운표현 : 숫자를 더하거나 빼는 방법이에요. - 비교 연산자
‘같다’, ‘크다’, ‘작다’를 컴퓨터가 판단하게 하는 법을 배웁니다.
쉬운표현 : 숫자들이 서로 어떤 관계인지 비교하는 거예요. - 논리 연산자
‘그리고’, ‘또는’, ‘아니다’ 같은 논리를 배우며 생각을 확장합니다.
쉬운표현 : 예 아니오를 잇고 뒤집는 방법이에요. - 할당 연산자
상자에 값을 넣고, 더해 넣거나 빼는 법도 익힙니다.
쉬운표현 : 상자에 숫자를 넣거나 더해서 바꾸는 방법이에요. - 타입 확인과 형변환
데이터가 어떤 종류인지 확인하고, 필요하면 다른 종류로 바꾸는 법도 배우지요.
쉬운표현 : 상자 안 물건 종류를 확인하고 바꾸는 방법이에요.
3. 선택하고 결정하기 (조건문)
컴퓨터에게 여러 갈래 길 앞에서 어떤 길을 선택할지 알려주는 방법입니다.
‘만약 이렇다면 이렇게, 아니라면 저렇게’라고 말하는 순간이지요.
- if, else if, else
기본적인 조건문을 익힙니다.
쉬운표현 : “만약 이렇다면 이렇게 하세요”라고 지시하는 법이에요. - switch
여러 가지 중 하나를 골라야 할 때 유용한 방법을 배웁니다.
쉬운표현 : 여러 선택지 중에서 딱 하나를 고르는 방법이에요.
4. 같은 일 반복하기 (반복문)
언제나 새로운 일만 하는 것이 아니라, 같은 일을 여러 번 하는 법도 배워야 합니다.
컴퓨터에게 ‘몇 번’ 혹은 ‘조건이 맞는 동안’ 계속 반복하게 하는 법이지요.
- for, while, do...while
각각 반복하는 여러 가지 방법을 익힙니다.
쉬운표현 : 같은 일을 여러 번 시키는 방법이에요. - for...in, for...of
배열이나 객체 속 내용을 하나씩 꺼내어 처리하는 방법도 알아봅니다.
쉬운표현 : 여러 상자 속 물건을 하나씩 꺼내는 거예요.
5. 일을 대신해주는 도우미 (함수)
복잡한 일을 여러 번 반복하지 않게, 함수를 배우며 ‘일을 대신해주는 도우미’를 만듭니다.
필요할 때 불러 쓸 수 있기에 우리 삶의 동반자 같지요.
- 함수 선언과 호출
함수를 만들고 부르는 법을 익힙니다.
쉬운표현 : ‘이 일을 해 주세요’ 하고 부르는 방법이에요. - 화살표 함수
더 짧고 간결한 함수 쓰는 법도 배웁니다.
쉬운표현 : 작고 빠른 도우미 만드는 법이에요. - 함수 스코프
함수 안팎에서 변수가 어디서 어떻게 쓰이는지 살핍니다.
쉬운표현 : 변수들이 어디에 사는지 알아봐요.
6. 함수의 비밀 (클로저)
함수 안에 숨겨진 작은 마법, 클로저를 만나러 갑니다.
함수가 자신이 태어난 환경을 기억하는 힘이지요.
- 렉시컬 스코프와 클로저 개념
변수 찾는 규칙과 클로저의 의미를 배웁니다.
쉬운표현 : 함수가 자기 주변을 기억하는 힘을 알아봐요. - 클로저 활용
데이터 보호와 함수 공장 만들기 같은 활용법도 살펴봅니다.
쉬운표현 : 중요한 것을 숨기고 필요할 때 꺼내 쓰는 법이에요.
7. 여러 개 모아두기 (배열)
하나가 아닌 여러 개를 한꺼번에 다루어야 할 때가 많습니다.
배열은 그런 여러 데이터를 순서대로 모아두는 상자이지요.
- 배열 만들기와 조작하기
배열 생성, 추가, 삭제, 순회하는 방법을 배웁니다.
쉬운표현 : 여러 물건을 한 상자에 담고 꺼내는 법이에요.
8. 정보 꾸러미 만들기 (객체)
서로 관련된 여러 정보를 하나로 묶는 방법, 객체를 배웁니다.
마치 주소록이나 명함처럼 정보를 깔끔하게 정리하지요.
- 객체 만들기, 속성 다루기, 배열과 함께 사용하기, 객체를 이해하고 조작하는 방법을 익힙니다.
쉬운표현 : 여러 정보들을 한 꾸러미에 담는 방법이에요. - 구조 분해 할당
필요한 정보만 쏙쏙 꺼내 쓰는 법도 알아봅니다.
쉬운표현 : 상자에서 필요한 물건만 꺼내는 거예요.
9. this와 친해지기
객체 안에서 ‘나’라고 할 때 가리키는 ‘this’를 이해하는 시간이 옵니다.
이 ‘나’는 상황에 따라 달라지기에 조심스럽게 다뤄야 합니다.
- this의 의미와 제어
상황별 this가 가리키는 대상을 알아봅니다.
쉬운표현 : ‘나’라는 말이 누구를 가리키는지 배워요. - 화살표 함수의 this
특별한 this를 가진 화살표 함수도 익힙니다.
쉬운표현 : 화살표 함수는 ‘나’를 다르게 기억해요.
10. 오류와 친구하기
코딩하며 마주하는 오류도 낯설지 않도록, 그것과 잘 지내는 법을 배웁니다.
어떻게 잡고, 어떻게 고치는지 알면 두렵지 않습니다.
- 에러 처리와 디버깅 도구
문제를 포착하고 해결하는 방법을 배웁니다.
쉬운표현 : 문제가 생겨도 멈추지 않고 해결하는 법이에요.
11. 웹페이지 조종하기 (DOM 조작)
웹페이지 속 요소들을 찾아내어 마음대로 바꾸는 방법을 배웁니다.
웹이 살아 움직이도록 하는 중요한 기술이지요.
- 요소 찾기, 조작, 추가와 삭제
웹페이지의 작은 부품을 다루는 법을 익힙니다.
쉬운표현 : 웹페이지를 내 마음대로 바꾸는 방법이에요.
12. 클릭하고 반응하기 (이벤트 처리)
사용자의 행동에 반응하는 프로그램을 만듭니다.
이벤트를 감지하고 적절히 처리하는 법을 배우지요.
- 이벤트 등록과 활용, 전파 이해하기
이벤트의 흐름을 따라가며 제어법도 익힙니다.
쉬운표현 : 누군가 클릭하면 바로 반응하는 방법이에요.
13. 시간을 다루는 마법 (비동기 처리)
어떤 작업은 시간이 걸려도 기다리지 않고 다음 일을 해야 할 때가 있습니다.
비동기 처리란 그런 일을 쉽게 해내는 마법과도 같습니다.
- 시간 지연, 콜백, Promise, async/await
복잡한 시간 흐름을 차분히 다루는 방법을 배웁니다.
쉬운표현 : 일이 끝날 때까지 기다렸다가 다음 일을 하는 법이에요. - fetch로 데이터 불러오기
인터넷에서 필요한 정보를 가져오는 방법도 익힙니다.
쉬운표현 : 밖에서 필요한 정보를 가져오는 방법이에요.
14. 고급 배열 마법사 (고급 배열 메서드)
배열을 더욱 편리하고 똑똑하게 다루는 방법입니다.
map, filter, reduce 같은 마법 같은 도구를 익히면 코드가 훨씬 간결해집니다.
- 배열 변환, 필터링, 줄이기, 검색, 정렬
배열을 자유자재로 다루는 법을 배웁니다.
쉬운표현 : 배열 속 물건을 마음대로 바꾸고 고르고 합치는 방법이에요.
15. 클래스로 틀 만들기 (클래스)
비슷한 객체들을 찍어내는 틀을 만드는 방법입니다.
효율적으로 많은 객체를 관리하기 위해 꼭 필요하지요.
- 클래스 선언과 인스턴스 생성, 상속
클래스를 만들고 상속하는 법을 배웁니다.
쉬운표현 : 틀을 만들어 여러 상자를 쉽게 찍어내는 법이에요.
16. 프로토타입과 상속의 비밀
자바스크립트 특유의 프로토타입 개념과 상속을 깊이 이해하는 시간입니다.
이는 클래스 뒤에 숨겨진 신비로운 구조입니다.
- 프로토타입과 생성자 함수 상속
연결된 상자의 비밀과 옛날 방식 상속을 배웁니다.
쉬운표현 : 상자들이 서로 어떻게 연결되는지, 옛 방식도 알아봐요.
17. 코드 정리하고 나누기 (모듈 시스템)
큰 코드를 여러 조각으로 나누고 불러 쓰는 법입니다.
함께 일하는 이들을 위해, 그리고 나 자신을 위해 꼭 필요한 습관이지요.
- ES6 모듈, CommonJS, Node.js, npm
다양한 모듈 시스템과 도구를 살펴봅니다.
쉬운표현 : 코드를 조각내고 필요할 때 꺼내 쓰는 법이에요.
18. 똑똑한 코드 패턴 (디자인 패턴)
효율적이고 깔끔한 코드를 위한 다양한 패턴을 배웁니다.
이미 검증된 방법들로 코드를 빚어내면 더욱 아름다운 작품이 됩니다.
- 싱글턴, 팩토리, 모듈, 옵저버 패턴, JSON 다루기
여러 패턴과 데이터 처리 방법을 익힙니다.
쉬운표현 : 잘 다듬어진 코드 설계 방법과 데이터 소통법이에요.