공부하는 비오

손쉽게 날짜를 생성해주는 라이브러리 비슷한 역할을 하는 라이브러리들이랑 비교해보면 moment가 제일 많이 쓰인다. day.js는 점유도는 낮지만 사이즈 면에서 매력적이다. 어쨌든 점유도가 제일 높은 Moment를 사용해보자. 사용방법 moment() : 현재 날짜 moment(post.createdAt) : 인자(게시글생성일)가 알아서 모멘트객체로 바뀜. moment를 사용하지않으면 new Data.getFullYear() + new Data.getMonth() + ... 이렇게 조합해야하지만, format이나 fromNow 메서드 등을 통해 쉽게 표현할 수 있다. Moment.js | Docs moment.relativeTimeThreshold(unit); // getter moment.relativ..

React/React 관련 라이브러리 2021. 1. 13. 14:40

더미데이터가 필요할 때, 하나하나 데이터를 만들어내기가 사실 쉬운일은 아니다. 그럴 때 유용한 라이브러리! 자세한 사용법은 이 웹페이지에서 확인할 수 있다. faker Generate massive amounts of fake contextual data www.npmjs.com faker 설치하기 faker를 불러온다. 영어로된 더미데이터를 생성할 수 있다! faker. 부분이 faker를 사용하여 만든 데이터. 폼은 기본 post state의 모양과 똑같이 만들었다. id는 shorid라이브러리를 사용해 랜덤으로 만들어 주었다. 사실 한국어로도 더미데이터를 만들 수 있는데 한국어로 만들면 글이 엉망진창이다. 한국어 페이커를 쓴 페이지. 성능안좋은 번역기로 돌린 모양새다. 게다가 이름은 성만 한국어할거..

React/React 관련 라이브러리 2020. 12. 17. 14:00

react, redux 에서 사용할 수 있는 라이브러리다. 제목 그대로 immer를 사용하면 알아서 불변성이 유지되도록 코드를 바꿔준다. immer설치 immer를 produce로 import. reducer에서 return produce(state, (draft) => { switch문... }); 을 해주면 된다. 화살표함수이기 때문에 {return .... } 은 생략해도된다. 그리고 state대신 draft 사용. 불변성을 유지하지 않으므로, state를 직접 바꿔준다. immer를 사용한 이유 10줄이 넘는 코드가 5줄로 줄어들었다.^^;; state를 draft로 바꿔줬으므로, 마지막 디폴트값은 그냥 break; break;를 사용하지않으면 뒤쪽 코드가 모두 호출되는 무시무시한 경험을 할 수 ..

React/React 관련 라이브러리 2020. 12. 17. 13:32

프론트 작업할 때, 더미데이터 만들기 요긴한 라이브러리가 있다. 바로 shortid! 겹칠일이 거의 없는 id를 생성해준다. 먼저 설치부터. import해주고, 사용은 shortId.generate() 로 하면 된다. 😀😀

React/React 관련 라이브러리 2020. 12. 16. 23:44

리액트에서 위와 같이 스타일태그를 내부에서 사용하는 경우, 객체를 반환하면 최적화에 도움이 되지 않는다. 리액트는 리렌더링할때, 현재버츄얼돔과 이전 버츄얼돔을 비교해 변화가 있는 부분만 새로 그려주는데, 객체는 동일하다고 인식하지 못하기 때문에 저 부분을 새로그려주게 된다. (콘솔창에 { } === { } 를 작성해보면 false를 반환한다.) 이를 해결하기 위한 방법으로는 외부 스타일 시트를 연결해도 되고, styled-components를 사용하거나 useMemo를 사용할 수 있다. styled-components 위와 같은 경우 div를 원하는 이름으로 바꾸고, 다음과 같이 선언해주면 된다. (클래스 네임 설정한다고 생각하면 편하다. 하지만 어쨌든 변수로 선언하는 것이기 때문에 다른 변수나 함수랑 ..

React/React 관련 라이브러리 2020. 12. 10. 00:02