CSS 프레임워크 - Chakra (차크라)

Chakra Chakra (이하 차크라)는 TypeScript로 만들어진 UI 프레임워크다. 오리엔탈적인 이름이 특이한데, Segun Adebayo라는 두바이 사람이 만 만들었다. 검색을 해보면 정보가 정말 없는 걸로 봐서는 사용률이 높진 않은 것 같은데, 문서는 아주 잘 정리되어 있다. 대부분의 컴포넌트들이 다크 모드가 호환되기 때문에 다크 모드를 구현하기 수월하다고 한다. 단, date picker, autocomplete, table과 같은 중요한 컴포넌트들이 없어서 커뮤니티에서 불만이 있는 것 같다. 컴포넌트 수로는 Material UI가 우위에 있는 듯. 사용하기 1. 설치 // npm 사용시 npm i @chakra-ui/react @emotion/react@^11 @emotion/styled..

CSS 프레임워크 - Tailwind CSS

Tailwind CSS Tailwind CSS는 Utility-First 콘셉트를 가진 CSS 프레임워크다. Bootstrap과 비슷하게 m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하여 HTML 코드 내에서 in-line 방식으로 스타일링 할 수 있다. Tailwind CSS의 장점 HTML 내에서 인라인으로 작성하기 때문에 별도의 CSS 파일(또는 스타일 컴포넌트)을 관리하지 않아도 된다. 클래스명을 고민하지 않아도 된다. 미리 지정된 클래스명으로 스타일링 하기 때문에 프로젝트를 일관된 스타일로 통일하기 쉽다. 각 CSS 요소 수준의 유틸리티 클래스를 제공하여, 다른 프레임워크들에 비해 기본 스타일 값을 디테일한 부분까지 쉽게 커스텀할 수 있다. emotion이나 styled-compo..

CSS 프레임워크 - Material UI (MUI)

Material UI란? Material UI (이하 MUI)는 리액트 개발에서 쉽게 사용할 수 있는 UI 프레임워크다. autocomplete, 버튼, 체크박스, 슬라이더, alert 등 아주 다양한 컴포넌트를 제공하여, 빠르고 손쉽게 퀄리티 있는 UI를 완성할 수 있게 한다. 개인적으로 스타일링을 커스터마이징 하는데 애를 먹은 기억이 있는데, 그 외에는 만족스러웠다. 필요한 컴포넌트를 고른 뒤 문서에서 각 컴포넌트에 대한 사용법을 보고 적용하면 된다. 설치하기 MUI는 emotion이라는 스타일링 엔진을 기본으로 사용한다. npm install @mui/material @emotion/react @emotion/styled emotion이 아닌 Styled-component를 사용하고 싶다면 아래처럼..

CSS 프레임워크 - reactstrap

reactstrap이란? reactstrap은 React.js에서 Bootstrap*을 더 쉽게 사용하기 위한 라이브러리다. *Bootstrap이란? 각종 레이아웃과 버튼, 입력창 등의 디자인과 기능을 CSS와 JavaScript로 만들어 놓은 오픈 소스 프론트엔드 프레임워크다. 사용법 설치하기 React 16.8 이상에서 지원된다. npm install --save reactstrap bootstrap import import 'bootstrap/dist/css/bootstrap.css'; 예시 1 : 버튼 import React from 'react'; import { Button } from 'reactstrap'; export default (props) => { return ( Danger! )..

웹 컴포넌트란? HTML Template, Custom Elements, Shadow DOM

웹 컴포넌트(Web Component)란? 웹 컴포넌트는 모든 주요 브라우저에서 지원하는 웹 표준 기반의 재사용 가능한 클라이언트 사이드 컴포넌트다. 코드에서 원하는 부분을 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고, 모든 웹 애플리케이션과 웹 페이지에서 재사용할 수 있다. 웹 컴포넌트를 사용하면 React나 VueJS와 같은 프론트엔드 프레임워크(또는 라이브러리)로부터 완전히 독립적인 개발이 가능해진다. 웹 컴포넌트는 HTML, CSS, JavaScript 들을 컴포넌트화 하기 위해 필요한 4개의 표준이 있다. Custom Elements : 새로운 HTML 요소의 이름과 동작을 정의할 수 있도록 해주는 JavaScript API의 집합. Shadow DOM : 완전히 캡슐화된 sub-DOM ..

Modern CSS - Emotion이란?

Emotion.js Emotion.js는 JavaScript 안에서 스타일을 작성할 수 있게 해주는 CSS-in-JS 라이브러리 중 하나다. Emotion.js의 특징 CSS-in-JS 형식 컴포넌트로 만들어 재사용 가능 className이 자동으로 부여되여 중복 방지 (Global namespace) JavaScript에서 쓰이는 상수, props, 함수 공유하여 스타일 지정 가능 상속에 의한 영향이 없도록 격리 (Isolation) 미사용 코드 처리 (Dead Code Elimination) Styled-component와 구조적으로 유사하지만 파일 사이즈는 더 작음 서버 사이드 렌더링이 필요 없음 Emotion.js 사용법 설치 # Framework Agnostic: 프레임워크를 사용하지 않는 경우..

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..