프론트엔드 스터디방 커리큘럼
1. 프로젝트 버젼관리 시스템 Git
- Github : Git GUI(Graphic User Interface)
- GitPages : Github의 Repositories를 이용하여 웹서버 사용
- Gist : 파일 단위의 스니펫 관리
- GitBook : Markdown을 이용하여 개발문서 또는 책 제작
2. Markdown 빠르게 훑어보기
경량화된 HTML이며, 글을 쓰는 사람들을 위해 만들어 졌다. Github에서 적극 수용하여 활용되고 있다.
- HTML 보다 더 빨리 입력할 수 있고 배우기 쉬워서 글을 작성하는데 흐름이 끊기지 않는다. 마치 마크다운이 글의 일부인 것 처럼 입력할 수 있다.
- 서식이 깨지지 않으며 지원하는 환경 어디서나 사용이 가능하다.
3. Sublime text 3
해외에서 가장 핫한 툴, 모든 IDE의 장점들을 모여있어 인기가 많다. 파이썬 언어로 만들어졌으며 Package 기능을 통해 확장이 편리하다. 가장 많은 Plugin을 보유하고 있으며 모두 무료, 에디터 자체도 무료로 사용가능하다.
- 기능 및 단축키 익숙해지기
- 패키지로 기능 확장하기
- 코드의 작은 단위 스니펫 나만의 것으로 만들기
- 메크로를 활용하여 단순반복 줄이기
4. 초고속 코딩 도구 Emmet
예전에는 Zen-Coding 이라는 이름으로 사랑 받았으며, Emmet 이라는 이름으로 바뀜과 동시에 많은 기능이 추가되었다. 간단하게 정의하자면 Emmt이란 HTML/CSS 웹 문서를 빠르게 작성할 수 있도록 도와주는 플러그인 이다.
- 문법(Syntax)
- 축약코드(Abbreviation) 및 스니펫(Snippet) 활용법
- 필터(Filter)
- 개발속도를 올려주는 Action
- Lorem Ipsum(더미 텍스트)
5. 강력한 CSS 확장 언어 Sass(SCSS)
정적인 CSS에 활력을 불어넣음으로써 동적으로 활용이 가능하며, 모듈로써 관리하기에 용이해 졌다.
- 기능 확장 프레임워크 Compass
- 강력한 믹스인 라이브러리 Bourbon
- 반응형 웹 그리드 시스템 Suzy
- Sass 문서 관리 SassDoc
(normalize, reset, animate, font-awesome, material-design-icons, meteocons, ionicons)
6. Javascript / jQuery
- 타입(원시타입과 참조타입)
- IIFE 패턴(Immediately-Invoced Function Expression)
- 싱글톤 패턴(Singleton), var single 패턴
- jQuery 따라잡기
- 상속, 믹스인
- 모듈구조, 행동패턴
- MVC패턴
- CommonJS(Browserify) VS AMD(RequireJS)
- jsDoc으로 문서관리 하기
(modernizr, detectizr, jquery, requirejs, browserify)
7. Node.js 둘려보기
- Nodejs 환경 패키지 매니저 NPM
- 웹 프론트엔드에 필요한 라이브러리를 관리할 수 있는 패키지 매니저 Bower
8. 업무를 향상시키는 자동화 시스템 Gulp
- 확장 패키지를 이용하여 업무등록, 감시 알아보기
- Gulp를 활용하여
Sass, browser-sync, browerify등등 관리하기
9. AngularJS about SPA Framework
angular2가 곧 나올 예정..(2버전부터는 Typescript(MS사에서 만든 Javascript 상위 버전)를 사용하기 때문에 ECMAScript6와 Typescript에 대한 사전지식이 필요).
angular2가 나온다는데 angular1을 배울 필요가 있을 까? (2버전은 1버전과 문법 및 모든 사용방법이 다르다.)
angular2는 페이스북에서 만든 reat와 비슷한 구조 MVC에서 View에 특화된 프레임워크이므로 재사용성이 뛰어나다. 반대로 angular1는 풀스택 프레임워크 구조이며 SPA(Single Page Application)를 구성하는데 장점이 있다. (구글에서 angular1과 2는 목적에 따라 사용되길 권장하며, 향후 1과 2를 같이 사용할 수 있게 할거라고 주장.)
- 애플리케이션 구조(Architecture)
- 지시자(Directives)와 표현식(Expression), 필터(Filters)
- 컨트롤러(Controller), 모델(Model) 그리고 스코프(Scope)
- 서비스(Services)
- 라우팅(Routing)
10. AngularJS + Ionic
ionic은 하이브리드 앱을 개발하기에 최적화된 환경을 제공, HTML5 API를 사용할 수 있는 컴포넌트들과 클래스 플랫폼을 개발하는 Cordova 기반으로 구성된 하이브리드 앱 개발 프레임 워크
0. 향후 다뤄야 할것들
| - | - | - | - | - | - |
|---|---|---|---|---|---|
| 버전관리 | Git | SVN | CVS | - | - |
| ECMAScript | ECMAScript5 | ECMAScript6 | RegExp | - | - |
| 코드품질관리 | HTMLHint | CSSLint | JSHint | Flow | Recess |
| JS 전처리 | TypeScript | Babel | CoffeScript | - | - |
| CSS 전처리 | Sass(SCSS) | Less | Stylus | - | - |
| HTML 템플릿 | HAML | JADE | Handlebars | Markdown | - |
| Back-End | Node.js | Express | - | - | - |
| 패키지 매니저 | NPM | Bower | - | - | - |
| 업무자동화 | Gulp | Grunt | - | - | - |
| 테스트 | Jasmine | Mocha | - | - | - |
| 문서 관리 | jsDoc | SassDoc | - | - | - |
| 모듈화 및 빌드 | Browserify | RequireJS | Webpack | - | - |
| 워크 플로우 | Emmet | - | - | - | - |
| UI Frameworks | Ionic | Bootstrap | - | - | - |
| JS Frameworks | jQuery | Backbone | React | Angular1 | Angular2 |
Accessibility/WAI-ARIACSS AnimationWeb Components/WebRTC/Web App Manifest/Service Workers/Web Notifications/Pointer Events/Performance Timing
99. 그 외 관심분야들
알고리즘R&Python업무자동화텍스트마이닝머신러닝데이터시각화CanvasD3WebGL
NoSQLMongoDBRedis
Amazon Web ServiceGoogle Analytics