티스토리 뷰
HTML : Hyper Text Markup Language
- HyperText : 웹페이지를 이동할 수 있도록 만들어진 문장
CSS : Cascading Style Sheet
- HTML 문서의 모든 요소에 대해 스타일을 적용할 수 있는 표준 규격
- 디자인을 목적으로 쓰임
- 편리성, 일관성 제공
Java Script : 객체 기반의 스크립트 언어
- 장점 : DOM 탐색 등 문법이 간단하고, 여러 브라우저에서 같은 결과물을 내줌
- 단점 : 새로운 API를 배워야하는 부담감이 있음
jQuery : 자바스크립트 라이브러리
- 웹 사이트에서 자바스크립트를 사용하는 것이 훨씬 쉬워지도록 하는 것
Java Script
ES6 : ECMAScript version6
Type Script : 자바스크립트의 super set
- 장점 : 정적 타입, 제네릭, 인터페이스 등을 지원함으로 크고 복잡한 프로젝트를 만들 때 좋음
- 단점 : ECMA 표준이 아니고, 브라우저에서 쓰러면 트랜스 컴파일이 필요
Flow : 정적 타입 지원
Testing
- Jest : 페이스북에서 만든 테스트 프레임워크
- Mocha : Node.js에서 가장 많이 사용하는 테스트 프레임워크
- Jasmine : 전체가 한 패키지로 되어 있어 사용하기 쉬움
Module Loader / Bundler
- webpack : 여러개의 나누어져 있는 파일들을 하나의 파일로 만들어주는 라이브러리
- rollup : 코드와 종속관계의 라이브러리를 정적으로 분석하고, 최소한의것들만 번들링
- RequireJS / AMD : 자바스크립트는 기본적으로 a.js 파일로부터 b.js 파일을 include할 수 있는 방법이 없는 걸 해결
- Browserify : 브라우저 사이드에서 require( )를 쓸 수 있도록 구성해줌 -> node.js 모듈처럼 사용하는것과 비슷
Task Runners
- npm scripts : npm 명령어
- gulp : 자바스크립트 파일이나 CSS 파일들을 알아서 가지고 와주는 자동화 도구
- Grunt : Node.js 기반으로 하고있는 무수한 패키지들 중에 프로젝트에서 필요한 패키지들을 설치하고,
그 패키지들을 미리 설정한 순서와 옵션에 맞게 자동으로 명령어를 실행시켜주는 툴
Package Manager
- yarn : Node.js의 패키지 매니저, 페이스북 소유
- npm : Node.js의 패키지 매니저, Node.js를 설치하면 알아서 딸려옴
Framework
- Angular : SPA (Single Page Application) 개발을 위한 구글의 오픈소스 자바스크립트 프레임워크
- 웹 애플리케이션, 모바일 웹, 네이티브 모바일과 데스크탑 애플리케이션까지 프론트앤드 개발에 필요한 기능을 가짐
- 주 언어는 TypeScript
- React : 사용자 인터페이스를 개발하기 위한 자바스크립트 라이브러리
- 컴포넌트 기반
-> Flux : MVC패턴에서 M과 V가 엄청 많아졌을 경우, 원하는 부분을 찾아 수정하기 어려워지는 문제를 해결한 디자인패턴
-> Redux : Flux 아키텍처를 좀 더 편하게 사용할 수 있도록 해주는 라이브러리
-> Mobx : 주로 React와 함께 사용, 상태를 Observable하게 관리할 수 있도록 돕는 라이브러리
- Vue : View에 최적화된 프레임워크
- MVVM 패턴을 기반으로 디자인되어 있음
- Ember JS : MVV 패턴에 기반을 둔 오픈소스 자바스크립트 웹 프레임워크
- Preact : React의 크기를 1/10로 줄인 프레임워크
- Inferno : 클라이언트와 서버 둘 다 고성능 사용자 인터페이스를 구축하기 위해 엄청 빠른 리액트 형태의 라이브러리
Design Patterns : 객체 지향 프로그래밍 설계를 할 때 자주 발생하는 문제들을 피하기 위해 사용되는 패턴
Regex : 정규 표현식
GOF Design Patterns (Gang of Four) : 23가지 디자인 패턴을 3가지 유형으로 나눔
- Creational Pattern : 객체를 생성하는데 관련된 패턴들
- Structure Pattern : 프로그램 구조에 관련된 패턴들
- Behavioral Pattern : 반복적으로 사용되는 객체들의 상호작용을 패턴화 해놓은 것들
Learn Different Testing Techniques
CSS
Responsive Web (반응형) : 디바이스 종류에 따라 웹페이지 크기가 자동적으로 조정되는 것
Preprocessors (전처리기) : CSS를 확장하기 위한 스크립팅 언어이며 컴파일러를 통해 CSS 포맷으로 변환
장점
1. 재사용성
2. 시간 절약
3. 유지 및 관리가 쉬움
- Sass (Syntactically awesome style sheets) : CSS 문법을 확장하여 중복되는 코드를 줄여 보기 좋게 작성 가능
- Less (Leaner style sheets) : CSS로 컴파일한 다음 클라이언트 / 서버 사이드에서 실행할 수 있는 동적 전처리기 스타일시트
- Stylus : Sass에 영감을 받았고, Node.js로 구축되어 있으며 브러우저에서 실행 가능
- Post CSS : 플러그인을 사용하여 CSS를 변환시키는 툴
Framework : 뼈대
- Foundation : 반응형 Front-end 프레임워크
- Bootstrap : 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크
- Materialize CSS : 안드로이드 기반의 어플리케이션에서 주로 사용되는 프레임워크
- Semantic UI : React에서 주로 사용
Methodologies (방법론)
- SUIT CSS : UI 컴포넌트를 위한 스타일 도구
- BEM (Block, Element, Modifier) : 서로 다른 역할을 수행하는 CSS 클래스를 차별화하는 것
- OOCSS (Object-Oriented CSS) : 다양한 스타일 규칙 전체에서 동일한 속성의 중복을 줄이는 것
- SMACSS (Scalable and Modular Architecture for CSS) : 대규모 프로젝트를 위한 스타일링 지침
- Systematic CSS
Dive Deep CSS3
SVG : 백터(vector) 이미지를 표현하기 위한 포맷으로 w3c에서 만든 백터 이미지 표준
D3 (Data-Driven Documents) : 데이터를 랜더링할 수 있는 웹 기반 문서 라이브러리