분류 전체보기 (87) 썸네일형 리스트형 javascript find, filter 차이 find는 하나의 값을 찾는 것 filter는 배열을 반환한다. 각자가 반환하는 값이 다르다. 이에 따라 예외처리를 해줘야 한다. 아무것도 없을 경우 find : undefined filter : 빈 배열 를 각각 반환한다 Mobx 기초 정리 1. Observable State - 바뀌는 부분 즉각 보임. 2. Computed - 계산이 필요한 부분에 적용 3. Reaction - 내부값 변환시 특정 log 호출 4. Actions - 상태에 변화를 일으킴 Redux는 단일 스토어지만 Mobx는 다중 Store를 사용한다. Mobx에서는 State를 사용하지 않고 이를 observable이 대체한다. class를 사용한다. Provider로 index.tsx 내부를 감싸줘야 한다. Provider useStore = {useStores} --> 이 스토어를 사용하겠다. 그리고 Container단과 스토어가 소통을 하고 있다면 Container 전체를 observer로 감싸줘야한다. 이런 식으로.(inject가 조금 더 안정성이 높다) ----.. Css 자잘한 Tip 헤더는 px로 고정해두는 것도 괜찮음. flex를 사용하는게 수정사항 반영에 유리함 @mixin 사용하면 테마 변경에 좋다.(변수에 색깔 지정하기) align-content 는 align-items보다 큰 개념. overflow:auto - 상단에 넣으면 아래 컴포넌트 안삐져나옴 recharts Tip 원그래프를 할 때 div를 어디에 두냐에 따라 좌표가 변하므로, 잘 잡아야함. responsive container를 통해 높이 가로값을 두지 않아도 내부 값에 따라 변경됨. 레퍼런스 라인 y측 높이 제한 - domain 간혹 오류가 있을 때는.. width를 99%로 조정하면 해결될 수 있다고 합니다. 저의 경우는 오류 없이 잘 작동했습니다. Module not found: Can't resolve 'mobx/dist/internal' 오류 (computed 사용시) 처음 보는 에러가.. 구글링을 해도 안떴다 원인은 간단했음 import { computed } from "mobx/dist/internal"; 이렇게 import가 되어있었는데 import { makeObservable, observable, action, computed } from "mobx"; mobx쪽으로 import를 바꿈 왜 dist/internal로 import가 됐었는지는 모르겠다. 네자릿수 이상 숫자에 콤마 찍기(세자릿수 콤마) Javascript number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); number.toLocaleString("en-US"); var nf = new Intl.NumberFormat('en-US'); const k = nf.format(a); 세가지 방법이 보입니다. 모두 스트링 값을 반환하는데 number에서 string으로 변하는 값이 있고(네자릿수 이상) number 그대로 남아있는 값들이 있다.(세자릿수 이하) 예외처리할 경우... number/string/null (없는 값) 이렇게 세가지로 나뉘어지면 let k: any = Math.round((numbers.value) * 100) / 100; // 소수점 2자리 아래 짜르기 위한 식 - 이 글과는 상관 없지만.. Mobx Computeds with arguments 번역. Computeds with arguments 인수가 있는 computed The computed annotation can only be used on getters, which don't take arguments. What about computations that do take arguments? computed는 인수를 사용하지 않는 게터에만 사용할 수 있다. 그러면 인수들을 가지는 computed는 어떤가? Take the below example of a React component that renders a specific Item, and the application supports multi-selection. multi selection을 지원하는 어플리케이션의 특정 요소를 렌더링하는 .. 객체 비구조화 할당 객체를 한번에 받아오는 방법. 객체 구조 분해라고도 불리운다. 즉 const apple = {name: apple, weight: 10, color: red}; const peach = {name: peach, weight: 5, color: pink}; function print(fruit){ const {name, weight, color} = fruit; const a = `${name}의 무게는 ${weight}이고 색깔은 ${color}입니다.`; console.log(a) } print(apple)을 넣으면, apple 내부의 값이 분해되어 저장된다. apple의 name, weight, color가 쭉쭉 분해됨. 지역변수로 저장되어 1회성으로 사용된다. const apple = {name: .. 이전 1 ··· 7 8 9 10 11 다음
