[javascript 초급 중급 고급] 자바스크립트 초급부터 고급까지 - 자바스크립트 커리큘럼 추천

 

 

 

 

자바스크립트를 공부하긴 해야겠는데,
뭐부터 공부해야할지 모르겠고
어디까지 알아야 '나 자바스크립트 좀 친다' 고 말할 수 있을지
기준을 잡는데 도움이 되었으면 한다.

 

 

 

초급 (Beginner)

목표: 자바스크립트의 기초 문법을 익히고, 브라우저에서 동작하는 간단한 스크립트를 작성할 수 있도록 한다.

1. 기본 문법

• 변수와 상수 (var, let, const 차이)
• 데이터 타입 (문자열, 숫자, 불리언, 배열, 객체 등)
• 연산자 (산술, 비교, 논리, 할당, 비트 연산자)
• 조건문 (if, switch)
• 반복문 (for, while, do-while)
• 함수 선언 (function, return)
• 기본적인 콘솔 출력 (console.log() 활용)

2. 자바스크립트의 핵심 개념

• 스코프(Scope)와 호이스팅(Hoisting)
• 함수 표현식과 화살표 함수 (function vs const foo = () => {})
• 객체(Object)와 배열(Array)의 기초
• 배열 메서드 (push(), pop(), shift(), unshift(), slice(), splice() 등)
• ES6+ 문법 (let, const, 템플릿 리터럴, 디스트럭처링 할당)

3. DOM 조작 기초

• document.querySelector() 및 getElementById()
• 이벤트 리스너 (addEventListener)
• 간단한 DOM 조작 (텍스트 변경, 스타일 변경, 요소 추가 및 삭제)

4. 브라우저와 자바스크립트

• window 객체와 document 객체
• alert(), confirm(), prompt()
• 기본적인 이벤트 핸들링 (click, mouseover, keydown)

5. 실습 프로젝트

• 간단한 계산기 만들기
• 버튼 클릭 시 배경색 변경하기
• 할 일 목록(To-Do List) 만들기

---

 

 

중급 (Intermediate)

목표: 비동기 처리, ES6+ 문법, 객체 지향 프로그래밍(OOP) 개념을 익히고, 간단한 웹 애플리케이션을 만들 수 있도록 한다.

1. 심화된 자바스크립트 개념

• 클로저(Closure)
• 고차 함수(Higher-Order Functions)
• map(), filter(), reduce() 활용
• this 키워드와 바인딩 (call(), apply(), bind())
• 깊은 복사와 얕은 복사 (Object.assign(), JSON.stringify(), structuredClone())

2. 비동기 처리 (Async Programming)

• setTimeout(), setInterval()
• Promise와 then(), catch()
• async/await의 개념 및 활용
• fetch() API와 AJAX 요청

3. 객체 지향 프로그래밍 (OOP)

• 생성자 함수와 프로토타입
• 클래스 (class와 constructor())
• 상속 (extends와 super())
• ES6 모듈 (import, export)

4. 모던 자바스크립트와 툴링

• ES6+ 문법 심화 (스프레드 연산자, rest 파라미터, 옵셔널 체이닝)
• Webpack과 Babel 기본 개념
• NPM과 패키지 관리 (package.json)

5. 브라우저 API 활용

• Local Storage / Session Storage
• Canvas API 기초
• Geolocation API
• Web APIs (File API, Notification API 등)

6. 실습 프로젝트

• 비동기 데이터 불러오기 (REST API와 fetch() 활용)
• 날씨 앱 만들기 (공공 API 활용)
• 간단한 메모장 웹 앱 (LocalStorage 활용)
• 모달 창 구현하기

---

 

 

고급 (Advanced)

목표: 프레임워크와 라이브러리를 활용하여 복잡한 웹 애플리케이션을 개발할 수 있도록 한다.

1. 심화된 비동기 처리

• Promise.all(), Promise.race(), Promise.allSettled()
• WebSockets을 활용한 실시간 데이터 처리
• Service Worker를 이용한 PWA 구축

2. 성능 최적화

• Debounce & Throttle 개념 및 구현
• 가비지 컬렉션(Garbage Collection)
• 렌더링 최적화 (Repaint, Reflow 최소화)
• 코드 스플리팅(Code Splitting) 및 Lazy Loading

3. 프레임워크 및 라이브러리 활용

• React.js / Vue.js 기본 개념
• 상태 관리 (Redux, Pinia, Recoil 등)
• 컴포넌트 기반 개발 방식
• Next.js / Nuxt.js 같은 SSR(서버 사이드 렌더링) 프레임워크 이해

4. Node.js 및 백엔드 기초

• Express.js를 이용한 간단한 서버 구축
• 데이터베이스 연동 (MongoDB, Firebase, MySQL)
• RESTful API 설계 및 GraphQL 기본 개념

5. 테스트 및 배포

• 유닛 테스트 (Jest, Mocha, Chai)
• E2E 테스트 (Cypress, Puppeteer)
• CI/CD 개념 및 GitHub Actions 활용
• AWS, Vercel, Netlify 등을 활용한 배포

6. 보안 및 접근성

• XSS, CSRF 등 보안 이슈 및 방어법
• JWT 인증 방식
• 웹 접근성 (ARIA, Lighthouse 활용)

7. 실전 프로젝트

• 풀스택 블로그 웹사이트 개발 (React + Node.js + MongoDB)
• 실시간 채팅 애플리케이션 (WebSockets 활용)
• 간단한 대시보드 만들기 (차트 라이브러리 활용)
• PWA(Progressive Web App) 개발