Web Development Tutorial

HTML5

10 lessons

1. 1 프런트엔드 개발자 학습 방향
2. 2 HTML5 기본 문법
3. 3 시맨틱 요소와 검색 엔진
4. 4 웹페이지의 구성하는 기본 태그
5. 5 텍스트 관련 태그
6. 6 HTML의 핵심 개념인 Hyperlink
7. 7 목록(List)와 표(Table) 형식 표현을 위한 태그
8. 8 이미지의 표현과 동영상, 음악 등 멀티미디어를 지원하는 태그
9. 9 사용자와의 커뮤니케이션을 위한 폼 태그
10. 10 웹페이지의 레이아웃을 구성하기 위해 공간을 분할하는 태그

CSS3

22 lessons

1. 1 CSS 기본 문법
2. 2 셀렉터
3. 3 CSS 프로퍼티 값의 단위
4. 4 박스 모델
5. 5 display, visibility, opacity 프로퍼티
6. 6 백그라운드
7. 7 폰트와 텍스트
8. 8 요소의 위치 정의
9. 9 요소 정렬
10. 10 스타일의 상속과 적용 우선 순위
11. 11 벤더 프리픽스
12. 12 그림자
13. 13 그레이디언트
14. 14 트랜지션
15. 15 애니메이션
16. 16 트랜스폼
17. 17 웹디자인 타이포그래피(Typography)
18. 18 레이아웃
19. 19 반응형 레이아웃
20. 20 플렉스 박스 레이아웃
21. 21 수평/수직 중앙 정렬
22. 22 image 요소 아래에 패딩된 여분의 공간 제거하기

Bootstrap

2 lessons

1. 1 Bootstrap 소개와 설치
2. 2 Bootstrap 그리드 시스템

Sass

5 lessons

1. 1 Sass의 소개, 설치와 간단한 명령어 사용법
2. 2 CSS를 프로그래밍 언어와 같이 작성할 수 있게 확장한 SassScript
3. 3 Nesting, import, extend, 조건과 반복, Mixin, Function
4. 4 Sass가 제공하는 기본 내장 함수
5. 5 Webpack 개발 환경에서 Sass 사용하기

JavaScript

36 lessons

1. 1 기본 개념과 동작 원리 이해의 중요성
2. 2 자바스크립트란?
3. 3 자바스크립트 개발 환경과 실행 방법
4. 4 브라우저 동작 원리
5. 5 자바스크립트의 기본 문법
6. 6 데이터 타입과 변수
7. 7 연산자
8. 8 제어문
9. 9 타입 변환과 단축 평가
10. 10 객체
11. 11 객체와 변경불가성(Immutability)
12. 12 함수
13. 13 타입 체크
14. 14 프로토타입
15. 15 스코프
16. 16 보다 안정적인 자바스크립트 개발 환경을 위한 Strict mode
17. 17 함수 호출 방식에 의해 결정되는 this
18. 18 클로저
19. 19 자바스크립트 객체지향 프로그래밍
20. 20 빌트인 객체
21. 21 전역 객체
22. 22 Number 레퍼 객체
23. 23 수학 상수와 함수를 위한 Math 객체
24. 24 날짜와 시간을 위한 Date 객체
25. 25 정규표현식
26. 26 String 레퍼 객체
27. 27 배열
28. 28 자바스크립트 배열은 배열이 아니다
29. 29 배열 고차 함수
30. 30 문서 객체 모델(Document Object Model)
31. 31 동기식 처리 모델 vs 비동기식 처리 모델
32. 32 이벤트
33. 33 디바이스의 방향 정보를 다루는 자바스크립트 이벤트
34. 34 비동기식 처리 모델과 Ajax
35. 35 REST(Representational State Transfer) API
36. 36 Single Page Application & Routing

ECMAScript6

14 lessons

1. 1 let, const와 블록 레벨 스코프
2. 2 템플릿 리터럴
3. 3 화살표 함수
4. 4 매개변수 기본값, Rest 파라미터, Spread 문법, Rest/Spread 프로퍼티
5. 5 객체 리터럴 프로퍼티 기능 확장
6. 6 디스트럭처링
7. 7 클래스
8. 8 모듈
9. 9 프로미스
10. 10 7번째 타입 심볼(Symbol)
11. 11 이터레이션과 for...of 문
12. 12 제너레이터와 async/await
13. 13 Babel과 Webpack을 이용한 ES6 환경 구축 ①
14. 14 Babel과 Webpack을 이용한 ES6 환경 구축 ②

jQuery

4 lessons

1. 1 jQuery Basics
2. 2 jQuery Ajax & JSON
3. 3 jQuery Deferred Object
4. 4 jQuery Plugin

Node.js

5 lessons

1. 1 Node.js Basics
2. 2 Node.js & npm
3. 3 Node.js module
4. 4 Node.js file upload example
5. 5 Node.js에서 비밀 설정 정보(Secrets) 관리

Express

6 lessons

1. 1 Routing, Middleware, Static file, Template engine
2. 2 Express의 기본적인 에러 처리 방식
3. 3 MemoryStore를 사용한 Session 관리와 Redis를 사용한 영속적 Session 관리
4. 4 Node.js(Express)와 MySQL 연동
5. 5 Socket.io를 사용한 실시간 채팅 애플리케이션
6. 6 Heroku에서의 Node.js와 MongoDB 설치

MongoDB

3 lessons

1. 1 MongoDB의 기본 개념과 설치
2. 2 MongoDB Shell method를 사용한 CRUD의 기본
3. 3 Mongoose

TypeScript

7 lessons

1. 1 TypeScript의 소개와 개발 환경 구축
2. 2 Visual Studio Code에서의 TypeScript 개발 환경 구축
3. 3 정적 타이핑
4. 4 클래스
5. 5 인터페이스
6. 6 타입 앨리어스
7. 7 제네릭

Angular

13 lessons

1. 1 Angular의 소개와 특징
2. 2 Angular CLI를 사용한 프로젝트의 생성, 구성요소 추가와 빌드
3. 3 컴포넌트 소개와 기본 구조
4. 4 템플릿과 템플릿 문법
5. 5 데이터 바인딩
6. 6 빌트인 디렉티브
7. 7 서비스와 의존성 주입
8. 8 Reactive Programming과 RxJS
9. 9 Cold observable과 Hot observable
10. 10 Token 기반 인증
11. 11 Angular CLI 환경에서 jQuery 플러그인 사용하기
12. 12 Angular 파일 업로드
13. 13 Firebase를 사용한 Angular 애플리케이션 배포

Tools

12 lessons

1. 1 ESLint
2. 2 Jekyll와 GitHub Pages를 사용한 Static WebSite 구축
3. 3 JSON Server
4. 4 Docker를 사용하여 MySQL 설치하고 접속하기
5. 5 Docker를 사용하여 MongoDB 설치하고 접속하기
6. 6 Parcel
7. 7 Storybook
8. 8 Jest에서 import/export를 사용하기
9. 9 JSDoc을 사용하여 자바스크립트에 타입 힌트 제공하기
10. 10 폐지된 @babel/polyfill 대신 @babel/plugin-transform-runtime을 사용해 폴리필 추가하기
11. 11 Webpack DevServer
12. 12 tailwindcss + PostCSS + Webpack