HTTP:! HTTP:!

https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com 컴포넌트가 유료가 많다. vs code에 extension이 있다.

https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. You will develop React applications faster. mui.com public/index.html에 font와 icon을 사용할 수 있도록 설정(CDN처럼)

bootstrap -> 굉장히 유명한 front-end open source toolkit JQuery과 강하게 결합되어 있음/' 반응형 웹 개발에 특화 https://react-bootstrap.github.io/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io css를 적용하자 import 'bootstrap/dist/css/bootstrap.min.css';

https://react.semantic-ui.com/ Introduction - Semantic UI React Semantic UI React is the official React integration for Semantic UI . Installation instructions are provided in the Usage section. jQuery is a DOM manipulation library. It reads from and writes to the DOM. React uses a virtual DOM (a JavaScript representat react.semantic-ui.com 기계가 이해할 수 있는 웹페이지(웹 접근성을 높이자) 설치 npm install semantic-u..

https://ant.design/ Ant Design - The world's second most popular React UI framework ant.design index.js에서 css를 import 시켜줘야한다. import 'antd/dist/antd.css'; //혹시 위가 안되면 아래껄 사용하자 import 'antd/dist/antd.min.css'; less 기반으로 작성된 라이브러리

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 모바일에 특화된 라이브러리 npm으로 설치후, index.js에 css 스타일을 넣어줘..

css 문제점 Global Namespace, Dependencies, Dead Code Elimination Minification, Sharing Constants ..... 글로벌 변수를 지양해야하는 JS와 대치 css간의 의존관리 안쓰는 css 인지 어려움 클래스 이름 최소화 JS의 코드와 값을 공유하고 싶음 파일 로드 타이밍 이슈 1. styled-component 자동 관리 되며, 지우기 쉽다. (css문제점 해결, 스타일을 분리) https://styled-components.com/ styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps withou..

1. 라이브러리란? 라이브러리 = 개발편의를 위한 도구 모음, 공구 framework = 기반 구조까지 잡혀 있는것, 공장 React도 도구모음 이미 잘 만들어둔 도구를 가져다가 쓰면서 React 생태계의 이점을 누리자 필요 > 검색 > 사용법 파악 > 적용 필요 특정 기능이 필요해짐 (직접 구현하기에는 벅참) 더 나은 도구가 필요해짐 검색 필요 그대로를 검색 github, npm trends, 커뮤니티, 기술 블로그 유사한 라이브러리를 검색 사용법 파악 공식문서 github code 검색 기술 블로그 검색 적용 POC(proof of concept) 부분을 적용해보고, 전체를 고민하자 2. moment react보다 사이즈가 큰 라이브러리....왠만하면 사용하지 말자...(Luxon, dayjs등을 사..