Modern CSS - Styled JSX

Styled JSX Styled JSX란 컴포넌트의 스타일을 지정하기 위해 사용하는 경량 CSS-in-JS 라이브러리로, 캡슐화되고 범위 지정(scoped)된 CSS를 작성할 수 있게 해준다. Next.js에 의해 만들어졌고 유지되며, Next.js에 기본 포함되어 있다. Styled JSX 사용법 기본 사용법 JSX라는 값을 속성으로 갖는 스타일 태그를 컴포넌트 본문에 삽입한 후, 스타일을 CSS 양식대로 작성하면 된다. 컨테이너 // `(백틱)에 유의 스타일 객체 또는 아래처럼 객체를 따로 만들어서 사용해도 된다. import css from "styled-jsx/css"; // 스타일 객체 const testStyle = css` .title { color: red; } `; // 컴포넌트 본체 c..

Modern CSS - CSS Modules

CSS Modules CSS Modules란 모든 스타일에 동적으로 파일에 선언된 CSS 선택자에 고유한 해시 문자열을 추가하여 CSS 속성이 겹치지 않게 만드는 방식을 말한다. webpack에서 사용하는 css-loader가 필요한데, CRA로 개시한 프로젝트에서는 자동으로 세팅되어 있다. React에서 CSS Modules 사용하기 CSS Modules를 사용하려면 스타일시트 파일명을 아래처럼 명명하면 된다. 컴포넌트이름.css 컴포넌트이름.scss 컴포넌트이름.sass → 컴포넌트이름.module.css 컴포넌트이름.module.scss 컴포넌트이름.module.sass /* test.module.css */ #button { color: red; font-size: 10px; } .main-con..

Modern CSS - Styled Component

Styled Component란? CSS-in-JS라고 하는 JavaScript 파일 안에서 CSS를 처리할 수 있게 해주는 라이브러리다. 클래스 네임을 중복해서 사용시 생기는 버그를 방지하고, 구조적으로 컴포넌트와 스타일이 묶여있어 유지보수를 용이하게 한다. 사용법 설치 $ npm install --save styled-components 기본 문법 import React from 'react' import styled from 'styled-components' // create styled-component const Container = styled.div` color: white; background: black; ` const Title = styled.h1` font-size: 1.5em; ..

상태 관리 라이브러리 - Vuex

Vuex란? React의 Flux 패턴에서 기인한 Vue.js를 위한 상태 관리 라이브러리. MVC 패턴에서 발생하는 구조적 오류를 해결할 수 있으며, Flux란? MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴으로 데이터의 흐름이 단일 방향(One-way data flow)이다. Flux의 데이터 흐름 방향 Actions - Dispatcher - Model - View 순서로 데이터가 단방향으로 흘러 예측이 가능하기 때문에 향후 발생할 수 있는 문제점들을 방지할 수 있다. Actions: 화면에서 발생하는 이벤트 또는 사용자의 입력 Dispatcher: 데이터(model)를 변경하는 메소드 Model: 화면에 표시할 데이터 View: 사용자에게 비춰지는 화면 Vuex 공식 문서 https..

프레임워크 - 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 (스토어) 상태가 관리되는..