promise 예제 function increase(number) { const promise = new Promise((resolve, rejecct) => { //resolve는 성공, reject는 실패 setTimeout(() => { const result = number + 10; if (result > 50) { //50보다 높으면 에러 발생시키기 const e = new Error("NumberTooBig"); return rejecct(e); } resolve(result); }, 1000); }); return promise; } increase(0) .then((number) => { //Promise에서 resolve된 값은 .then을 통해 받아 올 수 있음 console.log(..
immer를 사용하여 더 쉽게 불변성 유지하기 yarn add immer 기본 코드 import produce from 'immer'; cosnt nextState=produce(originalState,draft=>{ //바꾸고 싶은 값 바꾸기 draft.somewhere.deep.inside=5; }) //produce의 첫번째인자를 함수로 넣어도 돼 아래처럼 cosnt nextState=produce(draft=>{ //바꾸고 싶은 값 바꾸기 draft.somewhere.deep.inside=5; }) ex import React, { useRef, useCallback, useState } from "react"; import produce from "immer"; const App = () =>..
자동완성을 만들려면 jsconfig.json 파일생성을 해서 ctl+space를 눌르면 코드 생성. { "compilerOptions": { "target": "es6" } } flex 알고싶으면 추천 flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com yarn add react-icons react 아이콘 react-icons.github.io/react-icons/#/icons/md React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports t..
컴포넌트 스타일링 1. CSS selector ex) .app .logo{~~} 2. Sass yarn add node-sass $으로 변수, @mixin으로 함수, @include로 함수사용, &.으로 함께 사용 됐을 때 utils.scss //변수 사용하기 $red: #fa5252; $orange: #fd7e14; $yellow: #fcc419; $green: #40c057; $blue: #339af0; $indigo: #5c7cfa; $violet: #7950f2; //믹스인 만들기(재사용되는 스타일 블록을 함수처럼 사용할 수 있음) @mixin square($size) { $calculated: 32px * $size; width: $calculated; height: $calculated; } ..
useState const [name, setName] = useState(""); useEffect 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. componentdidmount useEffect(() => { console.log("componentdidmount"); }, []); 특정 값 업데이트 useEffect(() => { console.log(name); }, [name]); 뒷정리하기 (언마운트되기 전이나 업데이트 직전에 작업 수행) useEffect(() => { console.log("effect"); console.log(name); return () => { console.log("cleanup"); console.log(name); }; ..
const MyComponent = ({ name, favoriteNumber, children }) => { children은 여기서 리액트 리액트 props가 없을때 defaul MyComponent.defaultProps = { name: "기본 이름", }; yarn add prop-types 타입확인 isRequired 쓰면 prop이 제공되지 않을때 경고 MyComponent.propTypes = { name: propTypes.string, favoriteNumber: propTypes.number.isRequired, }; 이벤트 import React, { useState } from "react"; const EventPractice = () => { const [form, setFor..
그리드
display : grid; grid-template-columns: 40% 60%; (4:6) 이거보단 grid-template-columns: 4fr 6fr; 이거를 써. 왜냐면 %는 스크롤할때 공간이생겨서 grid-template-columns: repeat(3,1fr); 1fr을 3번반복 (grid-template-columns: 1fr 1fr 1fr 이거랑 위에꺼랑 같아) grid-template-columns: 200px 1fr; 200px고정 나머지는 화면 크기 조절할때마다 움직여 grid-auto-rows: 300px; 이거는 모든 행 높이 같게 할려고 근데 이러면 height가 300보다 큰 행이 있으면 이상해 grid-auto-rows: minmax(200px, auto); 이거는 20..
and & 둘다 1일때만 참 9 : 01001(앞에 0은 생략함 뒤에도 마찬가지) 5 : 00101 9&5 : 1 or | 둘 중 하나만 1이어도 참 9 : 01001 5 : 00101 9|5 : 01101 => 1+4+8=13 xor ^ 하나만 1일때 참 9 : 01001 5 : 00101 9^5 : 01100 => 12 not ~ 모든 비트를 뒤집는다. 9 : (000000000000000000000~~)01001 ~9 : (11111111111111111~~)10110 =>-10 왼쪽 이동 1 : 00100 =>4 위의 예에서 오른쪽 이동은 9를 2로 나눈다.(정수 나눗셈) 오른쪽 이동 후 0으로 채우기 >>> 부호 비트가 이동한 후에 0ㅇ로 변한다. 이로 인해 결과는 음이 아닌 숫자가 된다. 오른..