Category362 패스트캠퍼스 챌린지 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. 패스트캠퍼스 챌린지 4일차 (Onsen UI) 2021.1.27 (목) +4days Onsen UI 모바일에 특화된 UI 라이브러리 https://onsen.io/ Onsen UI 2: Beautiful HTML5 Hybrid Mobile App Framework and Tools Native look and feel with lots of ready-to-use components and automatic styling A rich variety of UI components specially designed for mobile apps. Onsen UI provides tabs, side menu, stack navigation and tons of other components such as lists and forms. Th onsen.io .. 2022. 1. 27. 패스트캠퍼스 챌린지 3일차 (Emotion) 2021.1.26 (수) +3days emotion.js란? emotion.js는 CSS-in-JS의 종류 중 하나로 JavaScript 안에서 스타일을 작성할 수 있게 해준다. emotion.js는 주로 Framework Agostic과 React 두 가지 방식으로 사용된다. 공식문서 https://emotion.sh/docs/introduction Install # Framework Agnostic $ npm install @emotion/css # React $ npm install @emotion/react import emotion을 사용할 컴포넌트에 import 한다 /** @jsx jsx */ import { jsx, css } from '@emotion/react' /** @jsx jsx .. 2022. 1. 26. 패스트캠퍼스 챌린지 2일차 (스타일링 라이브러리) 2021.1.25 (화) +2day CSS의 문제점 Global Namespace / Dependencies / Dead Code Elimination Minification / Sharing Constants Non-deterministic Resolution / Isolation Global Namespace: 글로벌 변수를 지양해야하는 JS와 대치 Dependencies: css 간의 의존 관리 Dead Code Elimination: 안쓰는 css인지 어려움 Minification: 클래스 이름 최소화 Sharing Constants: JS의 코드와 값을 공유하고 싶음 Non-deterministic Resolution: css 파일 로드 타이밍 이슈 Isolation: 격리 이 문제들을 해결하기.. 2022. 1. 25. 패스트캠퍼스 챌린지 1일차 (라이브러리란?) 2021.1.14 (월) +1day 1. 라이브러리란? 라이브러리 vs 프레임워크 라이브러리는 개발 편의를 위한 도구의 모음 프레임워크는 기반 구조까지 잡혀 있음 라이브러리는 공구 프레임워크는 공장 리액트는 도구 모음 JSX / 컴포넌트의 상태 관리 / 렌더링 최적화 / 성능 확인 그 외에도 필요한 것들이 많음 이미 잘 만들어둔 도구들을 가져다가 쓰면서 리액트 생태계의 이점을 누리자 라이브러리 적용 과정 필요 > 검색 > 사용법 파악 > 적용 필요 특정 기능이 필요해짐 (직접 구현하기에는 조금 벅참) 더 나은 도구가 필요해짐 트렌드에 따른 새로운 기술에 대한 호기심 검색 필요 그대로를 검색 github / npm trends / 프론트엔드 커뮤니티 / 기술 블로그 유사한 라이브러리들을 후보로 비교(기능 .. 2022. 1. 24. 패스트캠퍼스 챌린지 -1일차 (Part 1. React 기초 정리) 챌린지 시작 전에 미리 볼 리스트를 정리해 두고 오늘까지 내용을 훑었다. 강의는 "React의 모든 것"이고 큰 커리큘럼은 아래 목록으로 구성되어 있다. Part 1. React 기초 Part 2. React 라이브러리 Part 3. React 실무 기능 Part 4. React 클론 코딩 Part 5. 트러블슈팅 Part 6. TypeScript Essentials Part 7. React로 나의 책장 만들기(TypeScript) 이중 "Part 1. React 기초"는 실제 챌린지 기간동안 챌린지 하기에는 이미 어느정도 아는 내용들을 포함하고 있을거라 챌린지 시작 전에 패스하고 싶었고, 그래서 지난 1주일 동안(사실 챌린지 시작이 지난주인줄 알고 그때 시작했던..😑) 아침, 출퇴근 시간에 훑다가 다 .. 2022. 1. 24. 이전 1 ··· 22 23 24 25 26 27 28 ··· 31 다음 반응형
