프레임워크 - Vue.js

Vue.js란? 2014년에 출시된 JavaScript 기반의 프론트엔드 프레임워크다. 컨트롤러 대신 뷰 모델을 가지는 MVVM(Model-View-ViewModel) 패턴을 기반으로 디자인 되었으며, 재사용이 가능한 UI들을 묶어서 사용할 수 있다. Vue.js의 특징 MVVM(Model-View-ViewModel) 패턴 Virtual DOM 사용 React, Angular에 비해 작고 가벼움 Template와 Component를 사용하여 재사용이 가능한 사용자 인터페이스를 묶고 View Layer를 정리하여 사용 MVVM 패턴 화면을 모델(Model), 뷰(View), 뷰 모델(VewModel)로 구조화하여 개발하는 방식이다. 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직..

상태 관리 프레임워크 - NgRx란?

NgRx란? NgRx는 Angular에서 Reactive 애플리케이션을 구축하기 위해 만들어진 상태 관리 프레임워크다. NgRx의 6가지 키워드 Store Redux에서 영감을 얻은 RxJS기반 글로벌 상태 관리를 위한 저장소. Action state의 상태 변경을 위한 명령어를 입력하는 공간. Effects 요청한 action을 service에 전달하여 결과값을 전달하는 역할. Reducer Service로부터 받은 결과값을 store에 저장된 값을 업데이트 역할. Selector 필요한 값을 store에서 찾아서 컴포넌트에 전달하는 역할. Component 상태를 사용하는 곳. 공식 문서 https://ngrx.io/ NgRx Docs ngrx.io

리액티브 프로그래밍 라이브러리 - RxJS란?

RxJS (Reactive Extensions for JavaScript)란? RxJS는 Angular에 내장되어 있는 라이브러리로, JavaScript에서 리액티브 프로그래밍을 지원하기 위해 만들어졌다. 리액티브 프로그래밍이란 이벤트나 배열 같은 데이터 스트림과 전파를 중심으로 하여 변화에 유연하게 반응하는 프로그래밍 패러다임을 말한다. RxJS는 Observable 시퀀스를 이용하여 비동기와 이벤트 기반의 프로그래밍을 구현할 수 있게 해준다. RxJS의 주요 키워드 Observable RxJS는 Observer 패턴을 적용한 Observable 이라는 객체를 중심으로 동작한다. Observable은 향후 얻게될 값이나 이벤트를 호출할 수 있는 콜렉션에 대한 아이디어를 표현한다. Observer Obs..

프레임워크 - AngularJS와 Angular 2

AngluarJS (1 버전) 단일 페이지 애플리케이션(SPA, Single Page Application) 방식의 프론트엔드 개발을 위한 오픈 소스 프레임워크다. 초기 버전인 AngularJS(Angular 1)는 2012년에 V1.0이 공개되었으며, 2021년 12월 31일부로 수명 종료(EOL, End Of Life) 되어 더이상 서비스가 지원되지 않는다. Angluar (2 버전~) 2016년 9월에 공개되었다. AngularJS의 후속 버전이지만 이름만 같을 뿐 호환성이 거의 없다. 거의 단절된 수준으로 기존과 완전히 다르게 변경되었다. React와 Vue.js와 함께 프론트엔드 3대장에 속한다. React와 Vue.js의 경우 사실상 프레임워크가 아닌 JavaScript 라이브러리에 가까운 구..

상태 관리 라이브러리 - MobX란?

MobX란? 상태 관리 라이브러리. Redux와 경쟁 관계에 있다. MobX의 핵심 개념 1. Observable State - 상태 관찰하려는 상태(state)를 말한다. state의 변화는 reactions와 computations를 일으킨다. 2. Derivations (Computations) - 파생 값 Observable state의 변화에 따라 파생된 연산된 값이다. 필요한 경우에만 업데이트된다. 3. Reactions - 반응 Observable state의 변화에 따른 부가적인 변화. 값이 바뀜에 따라 해야 할 일을 정하는 함수다. 4. Actions - 액션 Observable state가 사용자가 지정한 것을 포함한 모든 변경사항을 말한다. MobX는 사용자의 액션으로 발생하는 상태 ..

상태 관리 라이브러리 - Redux 리덕스란?

Redux란? Redux (이하 리덕스)는 리액트 생태계에서 가장 사용률이 높은 상태 관리 라이브러리다. 하지만 리액트에서만 쓰는 라이브러리는 아니다. Redux의 기본 개념 1. Single Source of Truth 동일한 데이터는 항상 같은 곳(스토어)에서 가지고 온다. 따라서 스토어는 프로젝트 당 한 개를 사용한다. 2. State is read-only 상태(state)는 setState 메소드를 통해서만 상태 변경이 가능하다. 리덕스에서는 action이라는 객체를 통해서만 상태 변경이 가능하다. 3. Changes are made with pure functions 변경은 순수 함수로만 가능하다. Redux 기본 용어 3가지: 스토어, 액션, 리듀서 1. Store (스토어) 상태가 관리되는..

프레임워크 - React.js 리액트란?

React.js React (이하 리액트)는 facebook이 제공하는 프론트엔드 웹 프레임워크로, SPA(Single Page Application)를 위한 사용자 인터페이스를 구축하는데 사용된다. 애플리케이션을 개발하기 위해서는 보통 데이터를 처리하는 비즈니스 로직 (M), 사용자가 조작하기 위한 UI (V), UI를 컨트롤하기 위한 로직 (C) 등 3가지 부분으로 나뉘어 개발되는데, 이 방법론을 MVC 패턴이라고 한다. 여기서 리액트가 V를 완전히 담당하는 것이다. 리액트의 특징 1. Data Flow (데이터의 흐름) 리액트는 단방향의 데이터 흐름을 가진다 2. Component (컴포넌트) 컴포넌트(Component)는 독립적인 단위의 소프트웨어 모듈을 말한다. 리액트는 UI (view)를 여러..

빌드 도구 - Linter, ESLint

ESLint ESLint는 JavaScript 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구다. 보통 프로그래밍 언어에는 컴파일 과정에서 수행되는 Linter가 기본적으로 내장되어 있지만, 별도의 컴파일 과정 없이 Node나 브라우저에서 바로 실행되는 JavaScript의 경우에는 Linter가 없기 때문에 이 ESLint를 사용해주면 된다. ESLint에서 ES는 Ecma Script, 즉 Ecma라는 기구에서 만든 스크립트인 표준 JavaScript를 말하며, Lint는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 flag를 다는 것을 말한다. 사용 방법 1. 설치 npm install -D eslint 2. 초기화 .\node_modules\.bi..

빌드 도구 - Code Formatter, Prettier

Prettier Prettier는 코드를 정해놓은 규칙에 따라 자동으로 정렬하여 가독성을 높이고 스타일을 통일시켜 정리해주는 도구(Code Formatter)다. 코드 작성 시 들여 쓰기를 2칸을 할지, 4칸을 할지 등을 정하여 설정해두면, Prettier가 코드 내용은 건드리지 않고 구조적 뷰만 변경하여 새로 작성하는 것이다. 코딩 컨벤션을 갖고 팀 프로젝트를 할 때 유용한 도구다. ESLint vs. Prettier ESLint: 코드 포맷터의 역할도 하지만, 주로 코드 에러를 잡아내고 문법을 강제하는 등 코드 품질 개선에 중점을 둠. Prettier: 코드가 예쁘게 보이도록 하는 것에 중점을 두며, 코드 에러를 잡아내지는 못함. Prettier가 지원하는 언어 JavaScript, including..

빌드 도구 - 모듈 번들러, Parcel

Parcel Parcel은 2017년에 나온 모듈 번들러로, dependancy가 있는 JavaScript 파일들을 최적화하고 압축하여 하나 혹은 여러 개의 static 파일로 빌드해준다. Parcel의 장점 캐싱을 사용하여 (두 번째 빌드부터) 속도가 매우 빠르다. 설정이 필요없는 zero-configuration이다(금방 사용할 수 있기에 러닝 커브가 낮다). 코드 분할(Code Splitting)을 지원한다. HOT 모듈 교체(Hot Module Replacement, HMR): 변경된 코드를 감지해서 브라우저에 최신 코드를 반영하여 자동으로 모듈을 교체한다. 모듈 안의 설정 파일(.babelrc, postcssrc 등)을 발견하면 이를 자동으로 변환하여 실행한다. 설치하기 # npm npm ins..