반응형 챌린지67 패스트캠퍼스 챌린지 16일차 (Zustand) 22.2.8 (화) +16days Zustand small / fast / scalable bearbones state-management simplified flux principles comfy api based on hooks isn’t boilerplatey or opinionated 설치 npm install zustand 기본 사용법 import React from 'react'; import create from 'zustand'; const useStore = create((set) => ({ fontSize: 14, increaseFontSize: () => set((state) => ({ fontSize: state.fontSize + 1 })), })); export default f.. 2022. 2. 8. 패스트캠퍼스 챌린지 15일차 (Recoil) 22.2.7 (월) +15days Recoil https://recoiljs.org/ko/ Recoil A state management library for React. recoiljs.org Minimal and Reactish Data Flow Grpah Cross App Observation 소개 동기 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 가장 좋다. 그러나 React는 다음과 같은 한계가 있다. 컴포넌트의 상태는 공통된 상위요소까지 끌어올림으로써 공유될 수 있지만, 이 과정에서 거대한 트리가 다시 렌더링되는 효과를 야기하기도 한다. Context는 단일 값만 저장할 수 있으며, 자체 소비자(consumer)를 .. 2022. 2. 7. 패스트캠퍼스 챌린지 14일차 (MobX) 22.2.6 (일) +14days MobX https://mobx.js.org/README.html Simple, scalable state manage ment A quick example import React from "react" import ReactDOM from "react-dom" import { makeAutoObservable } from "mobx" import { observer } from "mobx-react" // Model the application state. class Timer { secondsPassed = 0 constructor() { makeAutoObservable(this) } increase() { this.secondsPassed += 1 } reset(.. 2022. 2. 6. 패스트캠퍼스 챌린지 13일차 (Redux) 22.2.5 (토) +13days 1. Redux 총 3가지 타입의 공식 문서가 존재 Redux (https://redux.js.org/) React Redux (https://react-redux.js.org/) React Toolkit (https://redux-toolkit.js.org/) Getting Started with React Redux React Redux is the official React UI bindings layer for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update state. API Overview Provider Rea.. 2022. 2. 5. 패스트캠퍼스 챌린지 12일차 (Mock Service Worker) 22.2.4 (금) +12days Mock Service Worker 모킹(Mocking)이란? Mock(모의 데이터)을 만들어서 활용하는 방식 통상적으로 data fetch를 해야하는 경우 통신을 통해 응답을 내려주는 서버가 있어야 함 서버가 없는 경우, API 요청으로 내려올 데이터를 프론트에서 모킹하거나 서버의 역할을 해주는 무언가(데이터 fetch 해보기 강의에서는 github)가 필요 MSW https://mswjs.io/ - Interception on the network level - Service Worker API - REST API & GraphQL support Examples Learn by inspecting how Mock Service Worker integrates with.. 2022. 2. 4. 패스트캠퍼스 챌린지 11일차 (Framer Motion) 2022.2.3 (목) +11days https://www.framer.com/motion/ Framer는 애니메이션, 터치 기반 제스처 및 스크롤, 페이징 및 인터페이스 흐름을 위한 여러 재사용 컴포넌를 제공하는 라이브러리이다. 아래는 공식문서에서 제공하는 기본 설치 방법과 몇몇 중요한 강의에서 언급하는 몇몇 중요한 코드 예제들만 작성했다. Installation npm install framer-motion Importing import { motion } from "framer-motion" Example import React from "react"; import { motion } from "framer-motion"; export default function Scale() { return (.. 2022. 2. 3. 패스트캠퍼스 챌린지 10일차 (React Spring) 2022.2.2(수) +10days react-spring react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfaces. Installation yarn add react-spring Platforms @react-spring/konva @react-spring/native @react-spring/three @react-spring/web @react-spring/zdog Why springs and .. 2022. 2. 2. 패스트캠퍼스 챌린지 9일차 (Tailwind CSS) 2021.2.1 (화) +9days Tailwind CSS Tailwind CSS는 Utility-FIrst 컨셉을 가진 CSS 프레임워크다. 부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다. An API for your design system Utility classes help you work within the constraints of a system instead of littering your stylesheets with arbitrary values. They make it easy to be consistent with color choices, spacing, typography, shadows.. 2022. 2. 1. 패스트캠퍼스 챌린지 8일차 (Material UI) 2021.1.31 (월) +8days Material Design https://material.io/design Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io 머터리얼 디자인은 플랫폼 및 기기 전반의 시각적 요소, 모션 및 상호작용 디자인을 위한 포괄적인 가이드이다. 구글이 2014년 안드로이드 스마트폰에 적용하면서 알려지기 시작한 디자인 시스템이다. Material UI https://mui.com/ MUI:.. 2022. 1. 31. 패스트캠퍼스 챌린지 7일차 (React Bootstrap) 2021.1.30 (일) +7days React Bootstrap https://getbootstrap.com/ 굉장히 유명한 frontend open source toolkit jQuery와 강하게 결합되어 있음 / 반응형 웹 개발에 특화 기존의 Bootstrap을 React로 그래도 옮긴 버전이 React Bootstrap Installaion npm install react-bootstrap bootstrap@5.1.3 Importing Components import Button from 'react-bootstrap/Button'; // or less ideally import { Button } from 'react-bootstrap'; CSS {/* The following line can .. 2022. 1. 30. 패스트캠퍼스 챌린지 6일차 (Semantic UI React) 2021.1.29 (토) +6days Semantic UI React https://react.semantic-ui.com/ Introduction Semantic UI React is the official React integration for Semantic UI . jQuery Free Declarative API Augmentation Shorthand Props Sub Components Auto Controlled State Install $ yarn add semantic-ui-react semantic-ui-css ## Or NPM $ npm install semantic-ui-react semantic-ui-css import 'semantic-ui-css/semantic.min.css.. 2022. 1. 29. 패스트캠퍼스 챌린지 5일차 (AntDesign) 2021.1.28 (금) +5days AntDesign https://ant.design/ Installation $ npm install antd Usage import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' Getting Started import React, { useState } from "react"; import { Alert, DatePicker, message } from "antd"; export default function GetStart() { const [date, setDate] = useState(null); const handleChange = (value) => { message.info( `Selected Date: ${v.. 2022. 1. 28. 이전 1 2 3 4 5 6 다음 반응형
