1. 개요 공식 사이트 링크 Tailwind CSS란? Utility-First CSS : 미리 설정된 유틸리티 클래스들을 조합하여 적용하는 방식 (예: Bootstrap) HTML 코드 안에 스타일 코드 작성 CSS 파일 별도로 관리할 필요 없음 클래스명때문에 고민할 필요 없음 로우 레벨의 스타일 제공 CSS 요소 수준의 유틸리티 클래스를 제공 세밀한 디자인 구현 가능 동일한 색상이나 사이즈, 간격등 일관된 디자인 적용 가능 2. 설치 및 설정 설치 설치 방법 tailwindcss CLI로 설치 PostCSS 플러그인으로 설치(권장) 설치 방법 PostCSS : JS플러그인을 통해 스타일 변형하는 도구 CRA에서도 사용 autoprefixer 기능 사용 가능 프레임워크에 추가 CDN 사용 설정 tail..

개요 SCSS란? Sassy CSS (Syntactically Awesome Style Sheets) CSS 에서 단순반복되는 부분이나 불편함을 해소시키기 위해 만든 언어 > SASS SASS 에는 Sass 와 SCSS 가 있음 (각각 확장자는 .sass, .scss) 기존 Sass 에서 들여쓰기와 줄바꿈에 의존하던 방식을, SCSS 에서는 중괄호를 사용하는 방식으로 사용 예제 .list width: 100px float: left li color: red background: url("./image.jpg") &:last-child margin-right: -10px .list { width: 100px; float: left; li { color: red; background: url("./image..

Radix UI 공식 사이트 링크 Vercel 과 CodeSandbox 등에서 사용하는 UI 컴포넌트 특징 메뉴를 사용 할 때 엔터키,백스페이스키,방향키등으로 제어 가능 키보드 타이핑 문자열 그대로 자동완성 선택 기능 사용 (Typeahead support) 각각의 컴포넌트를 개별로 설치 가능 스타일링 요소가 포함되어 있지 않음 다른 라이브러리와 비교 Slider 공통 속성 min , max 값 설정 RTL LTR 변경 지원 Step (단계별 value 설정) 텍스트필드 (툴팁) 좌우 방향키 지원 Vuexy 컬러 사이즈 조절 Ticks 구간단위로 슬라이더가 이동되도록 지정 가능 Icon Google Material Icons 을 사용해 툴팁에 아이콘 추가 가능 마우스 휠 지원 DevExtreme 사이즈 ..

ReScript 개요 공식 홈 : https://rescript-lang.org/ 한글화 : https://green-labs.github.io/rescript-in-korean/ ReScript 란? Reason + BuckleScript ⇒ Rescript Ocaml 을 기반으로 만든 함수형 프로그래밍언어 Reason 과, 이를 Javascript 로 변환해주는 컴파일러 BuckleScript 를 합쳐 만든 언어 Javascript의 서브셋 언어이며, 확장자로 .res 사용 ReScript 부트캠프 개발 환경 구축 rescript 프로젝트 실행 .res 파일에서 자동 추전하는 플러그인 설치 패키지 받기 : npm install 또는 yarn install yarn 미설치인 경우 npm install ..

Redux Redux 로 상태 관리 하기 Redux 란? 프로젝트 규모가 커지거나, 관리해야 할 상태 (State)가 많아질때, 혹은 컴포넌트 구조가 복잡해질때 보다 쉽게 상태관리를 하기 위해서 사용. 예시 이미지 (출처 : 링크) Redux 에서 사용되는 키워드 Action, Reducer, Store 핵심 3가지 + dispatch, Subscribe 추가 키워드 2가지 액션 (Action) 상태에 어떠한 변화가 필요할때, 발생시킴. 하나의 객체로 표현됨. "액션 타입 선언"과, "액션 생성 함수"를 만든뒤 상태변화가 필요할때 dispatch를 통해 reducer로 보내주는 구조. 액션 생성자를 통해 액션 객체를 만들고 리덕스 스토어로 보냄 리덕스 스토어가 액션 객체를 받으면 스토어의 상태값이 변경됨..

1. React 소개 리액트 설치 및 기초 Docs 링크 npm install -g create-react-app // 리액트 설치 create-react-app . // 디렉토리 생성 Vue와 마찬가지로 VirtualDOM 을 사용하는 라이브러리. 기본적으로 CSR (Client Side Rendering) 로 동작. 리액트 핵심 모듈 2가지. //1. 리액트 컴포넌트 => HTMLElement 연결하기 import ReactDOM from 'react-dom'; //2. 리액트 컴포넌트 만들기 import React from 'react'; JS/JSX 를 이용한 리액트 컴포넌트 사용. //main ReactDOM.render( ); //component class Vhows extends React..