Frontend (195) 썸네일형 리스트형 Javascript BigNumber 에러 1e+22 해결 Error: Please pass numbers as strings or BigNumber objects to avoid precision errors. 콘솔에 숫자끝에 0을 많이 붙이면 10진수대신 1e+숫자가 표기된다. 이를 무시하면 위와같은 에러를 만들어낼 수있다. BN라이브러리를 활용한 10진수 처리 number에 위와같이 0이 많은숫자더라도 10진수로 표시해준다. const BN = require('bn.js'); new BN(number,10) 활용 예제 // data =[{amount:"1000000000000000000" || "0", created_at:'', detail:null},{},...] data !== null && data.forEach(e => { e['amountFromP.. useReducer 복잡한 상태관리 로직분리 useState로 데이터를 관리하다보면 crud할때 계속 setState를 사용하다보니 코드줄이 길어짐 => 밖으로 빼서 깔끔하게하기위함 로직은 useState와 매우 비슷함 1. 기존 useState를 지우고 그자리에 useReducer를 넣는다. const [data, dispatch] = React.useReducer(reducer, []) 2. 외부에(app컴포넌트 밖 혹은 다른파일) reducer 함수에 action type에 따른 로직 준비 const reducer = (state, action) => { switch(action.type){ case 'INIT':{ return action.data } case 'CREATE':{ const newItem = { ...action.data }.. Context API 사용법 데이터를 전역에서 관리해주는 ContextAPI 훅을 사용하는법이다. state와 props를 활용해 데이터를 이동시키는 부분은 생략하였다. 1. 데이터 state관리 1-1. App컴포넌트 밖에 createContext() 만들기 자바스크립트 파일 여기저기에서 사용하려면 export를 맨 앞에 붙여서 context를 생성한다. export const DataStateContext = React.createContext() 1-2. App 컴포넌트안에 context를 불러온다. useState를 활용하여 data를 저장한뒤에 context태그 안에 value안에도 넣는다. function App() { const [data, setData] = useState() //대충 data를 가져오는 API를 호.. React jsx안에서 `${}`쓰고싶을때 jsx내 일반방법 Go Klaytnscope jsx내 삼항연산자 target="_blank" Angular 문법 정리 준비 ng-app, ng-controller을 상위 태그에 삽입 var app = angular.module('alpp',[]) app.controller("alpo", function($scope){ ... }) 변수나 함수는 무조건 $scope.로 시작한다. 클릭 이벤트 ACTIVE $scope.myFunc = (text) => { alert(text) } 문법 * 변수 * if문 만약 $scope.name이 없으면 loading...이라는 문구가 표시되고 보이면 사라짐 loading... 비슷하게 $scope.name이 없을경우 ng-disabled를 활용해 태그를 비활성화시킬 수 있다. * for 반복문 참고 https://www.youtube.com/watch?v=ywHk2jf_lF8 [웹팩] html onclick 조심하기 웹팩으로 빌드를하려면 js안에 HTML을 넣어야하는데 그렇다보니 innerHtml과 같은 방식을 사용해야해서 문자열로 html을 넣어주게되는데 이때 onclick을 사용하면 자바스크립트함수도 문자열처리가되어 먹지를 않는다. ${}로 해줘도 최초 로드시에 한번만 실행되는것 같음. 그냥 click eventListener로 해결 [Animation ] ping Animation ping을 사용하면 이와같은 애니메이션효과를 줄수있다. 마우스 hover시에만 작동하게 할 수 있다. https://codepen.io/nanchu/pen/OvqJNL 이미지 src경로비교 aws외부링크 vs 내부경로 이미지 src를 넣는 방법이 다양한데 문득 궁금해져서 직접 실험해 보았다. AWS s3에 이미지를 업로드한뒤에 그 링크를 넣고 로드 시간을 측정해보았다. const bg = `` 다음은 위의 코드를 주석처리하고 파일은 동일하되 내부 public폴더내에 있는 이미지를 불러왔다. const bg = `` 의외의 결과로 내부경로가 조금더 로딩 속도를 감소시켰다. 혹시 이미지 용량도 속도에 영향을 미칠까? 위의 이미지의 용량은 1mb로 같은 사이즈이지만 300kb로 최적화한이미지를 웹팩을 돌려 비교해보았다. 여러번 로딩해본결과 크게 차이는 없었다. 이전 1 2 3 4 5 6 ··· 25 다음
