Atomic Habits

출처: https://dubaiyu.tistory.com/80 [프론트엔드 여행하려다 풀스택:티스토리] const onChange = (e) =>{ console.log(e.target) console.log('e.target.name:'+e.target.name) console.log('e.target.value:'+e.target.value) } ... 초기화 export default function UserList({testest}) { const [inputs, setInputs] = useState({ username : '', nickname:'' }) const {username, nickname} = inputs; const onChange = (e) =>{ // console.log(e..

JQuery오 ㅏ강합게 결합 / 반응형 웹 개발에 특화 프런트엔드 오픈 소스 툴킷 - w3c bootstrap https://www.w3schools.com/bootstrap/ - 리액트 전용 부트스트랩 https://react-bootstrap.github.io/ CSS {/* The following line can be included in your src/index.js or App.js file*/} import 'bootstrap/dist/css/bootstrap.min.css'; - 테마 https://react-bootstrap.github.io/getting-started/theming/

- 컴포넌트 리턴 방식이 아닌, 정해진 CSS효과를 클래스 네임으로 지정해서 적용한다. - https://tailwindcss.com/ - IntelliSense extension for VS Code를 이용하면 많은 클레스네임을 쉽게 확인하고 지정할 수 있다. - https://tailwindcss.com/docs/guides/create-react-app -

[MyIcon.jsx] import React from 'react' import { Icon } from "@material-ui/core"; import ICONS from '../../imgs/playbtn.svg'; // 방법1 const Logo = () => ( ); export default Logo; // 방법2 // const Logo = () => { // return ( // // // // ) // } // export default Logo; // 방법3 // export default function Logo() { // return ( // // // // ) // } [ShowIcon.jsx] import * as React from 'react'; import Loading..

○ Exam GIthub 자료 - https://github.com/mui-org/material-ui/tree/master/examples/create-react-app How to use Download the example or clone the repo: curl https://codeload.github.com/mui-org/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/create-react-app cd create-react-app Install it and run: npm install npm start ○ https://mui.com/getting-started/usage/ - USAGE에 보면 추가할 ..

https://ossam5.tistory.com/93

import React from 'react' import { Checkbox, Divider } from 'antd'; const CheckboxGroup = Checkbox.Group; const plainOptions = ['Apple', 'Pear', 'Orange']; const defaultCheckedList = ['Apple', 'Orange']; export default function FormEx1() { const [checkedList, setCheckedList] = React.useState(defaultCheckedList); const [indeterminate, setIndeterminate] = React.useState(true); const [checkAll, set..

○ styled components vs emotion - https://github.com/jsjoeio/styled-components-vs-emotion ○ props 전달 css /** @jsx jsx */ import { jsx, css } from '@emotion/react' const pinkInput = css` background-color: pink; `; const RedPasswordInput = props => ( ) render( ); MediaQueries - map /** @jsxImportSource @emotion/react */ import {css} from '@emotion/react' const breakpoints = [576, 768, 992, 1200] co..

https://emotion.sh/docs/introduction - 설치 = npm i @emotion/css : 프레임워크와 무관하게 사용하기 위한 설치 = npm i @emotion/react : 리액트와 함께 사욯알 때 설치

https://styled-components.com/docs/basics#getting-started Attaching additional props Overriding .attrs Animations import styled, { keyframes } from "styled-components"; import "./styles.css"; import React from "react"; import StyledComponentsExample from "./components/StyledComponentsExample"; import styled, { keyframes } from "styled-components"; const Input = styled.input.attrs((props) => ({ t..