HTTP:! HTTP:!

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등을 사..

JS와 React를 개발하다보면 UI에서 Error가 난 경우에는 아무것도 보여지지 않는다. Error가 발생하기 전까지는 그려져야할것 같은데, JS나 React에서는 그렇지 않다. (왜인지는 모르겠다.) 이번에 다룰 내용은 UI에서 Error가 났을 때, 해당 컴포넌트만 Error를 처리하는 방법이다. 여기서 참고했다.. https://ko.reactjs.org/docs/concurrent-mode-suspense.html#handling-errors 기본 코드 App과 Child Component가 있고, Child에서 Error를 발생시켜보자 더보기 기본 Error 발생 시키기 console에 Error가 나오며, 브라우저에는 아무것도 나오지 않는다. 더보기 Child안에서 'throw new Er..

이번에는 상태관리 라이브러리중에 하나인 ReduxToolkit에 대해서 알아보겠습니다. Redux도 있지만, 최근에는 ReduxToolkit을 더 많이 사용하는 것 같습니다. 이유는 Redux의 단점을 보완해서 나온게 Redux Toolkit이기때문입니다. https://redux-toolkit.js.org/ Redux Toolkit | Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development redux-toolkit.js.org Redux는 라이브러리로써 React에서 많이 사용됩니다. Flux 패턴으로 구현되어 있으며 데이터를 단방향으로만 보내 데이 Redux 도입이전 React ..