react
-
효과적인 CSS애니메이션 활용CSS 2021. 10. 7. 11:23
개발을 할 때 애니메이션은 필수적인 요소라 해도 과언이 아니다. 하지만 애니메이션을 잘못 사용한다면 애니메이션이 버벅거리는 느낌이 들거나, 사이트 자체가 느려 보이는 효과가 날 수 있다. 이는 애니메이션을 사용할 때 사용한 CSS 속성의 문제인데, 여기에서는 크게 Layout을 다시 그리는(Reflow)와 Paint를 다시 하는(Repaint) 그리고 이 둘 모두를 안 하는 속성이 있다. 우리는 당연히 최대한 다시 그리는 것이 적은 요소를 사용해야 하고, 웬만하면 Reflow와 Repaint를 모두 하지 않는 속성을 사용하는 것이 좋다. 그럼 거두절미하고 3가지 경우에 해당하는 속성들을 보여주겠다. Reflow가 일어나는 대표적인 속성 position width height left top right b..
-
NextJS + Redux-Toolkit + next-redux-wrapper 설정하기Next.js 2021. 9. 24. 18:33
해당 글은 next-redux-wrapper@7 버전을 기반으로 작성되었습니다. 해당 방법은 필자 개인이 설정한 방법으로 언제든 더 좋은 방법이 있다면 공유해주시기 바랍니다. NextJS의 큰 장점 중 하나인 SSR을 사용할 때 조금 더 편하게 사용하기 위해 next-redux-wrapper를 이용하여 dispatch를 사용할 수 있게 된다. // testReducer.ts export const initialState = { // ...states } export type TestReducerState = typeof initialState; const testSlice = createSlice({ name: 'user', initialState, reducers: {}, extraReducers: (..
-
NextJS Image에서 fallback 활용하기Next.js 2021. 9. 16. 12:24
NextJS@10 버전에서 나온 Image태그는 만족스러운 성능을 제공해 주지만 아쉬운 경우도 있습니다. 만약 내가 설정한 이미지가 존재하지 않을 때 대체 이미지를 보여주는 방법을 제공하지 않는다는 것이다. 나는 아래와 같은 방법을 활용하여 이미지가 존재하지 않을 때 이미지를 설정해 주었다. import React, { useState } from 'react'; import Image from 'next/image'; const ImageFallback = (props) => { const { src, fallbackSrc, ...others } = props; const [imgSrc, setImgSrc] = useState(false); const [oldSrc, setOldSrc] = useSta..
-
NextJS Firebase@9으로 migration하기Next.js 2021. 9. 14. 15:16
해당 글은 firebase@9.0.2 버전을 기준으로 작성되었습니다. 아직 공식 홈페이지에는 Beta라고 나오지만 이제 npm에서 다운로드하게 되면 자동으로 9 버전이 설치되게 된다. 내가 생각하기에 이번 버전에서 가장 큰 변경 점은 tree shaking firestore-lite 위 두가지 이다. 간단하게 테스트했을 때 번들 사이즈의 경우 8 버전 대비 40% 정도의 사이즈 감소가 있었다. 그리고 firestore-lite의 경우 크게 offline기능과 snapshot 기능을 지원하지 않는데, 9 버전과 firestore에서 lite로 변경하며 데이터를 가져오는 속도와 total blockTime이 크게 감소했다. 물론 아직 버그가 있을 수 있지만, 지금까지의 장점만으로도 충분히 버전을 올릴만한 가..
-
Javascript concat vs spread vs push 성능에 대해Tip 2021. 9. 9. 11:54
결론부터 말하자면 큰 배열의 경우 concat을 작은 배열의 경우 spread가 효율이 좋다. 그리고 concat은 배열에 배열을 합칠 때, pushs는 배열에 새로운 인자를 합칠 때 그 효율이 좋다. 먼저 concat과 push에 대해 설명하자면 concat의 경우 실행 시 배열을 리턴하고, push의 경우 배열의 총길이를 리턴함으로 성능에 있어서는 push가 더 좋을 수밖에 없다. 위의 이미지에서처럼 대량의 데이터의 경우 concat의 속도가 더 뛰어나다. 심지어 spread의 경우 데이터가 너무 크다면 Maximum call stack size exceeded 에러까지 발생한다. 물론 바벨을 이용한다면 아마 spread는 바벨을 걸쳐 concat으로 변경되기 때문에 성능상의 큰 차이는 없을 것이다...
-
ESLint react/display-name 해결하기Tip 2021. 9. 2. 12:11
해당 에러는 의외로 많은 곳에서 볼 수 있고 Google에서 코드를 참고하다 보면 자주 겪게 되는 에러입니다. 익명 함수를 사용해서 발생하는 에러로 주로 아래와 같은 경우 많이 발생한다. { ... component: ({size, color}) => , ... } 위와 같은 코드는 꽤나 자주 사용되는데 해당 코드를 const renderComponent = ({size, color}) => { ... component: renderComponent, ... } 아래와 같이 함수를 외부로 빼서 작성하게 되면 해결할 수 있다. 물론 TS를 적용하면 문제가 발생하는 경우가 있다. 위와 같은 경우에는 interface IProps { size: string; color: string; } const rende..
-
내가 Front-End를 끝내고 체크하는 리스트Tip 2021. 8. 26. 19:00
FontEnd 개발을 끝내고 QA까지 어느 정도 마무리하면 최적화라는 벽을 맞이한다. 그 상황에서 자주 사용하는 것들을 정리하려 한다. 1. The Front-End Checklist - ✨ Your best Front-End Tool ✨ (frontendchecklist.io) ✨ Your best Front-End Tool ✨ 🗂 The Front-End Checklist Application is perfect for modern websites and meticulous developers! Follow the rules and deliver the best of your work in a generated report! frontendchecklist.io 이 사이트를 이용해 완전하진 않지만 내..
-
ESLint dependency cycle detected import/no-cycle Error 해결하기Tip 2021. 8. 18. 18:15
나의 경우 해당 에러가 interface를 import 해서 사용할 때 나왔다. 이 에러의 의미는 간단하게 설명하자면 A 컴포넌트를 B에서 import 해서 사용하는데 B에서 A의 항목을 import 해서 생기는 문제이다. A -> B -> A 그래서 나의 경우 interface들을 따로 파일로 쪼갠 뒤 아래와 같은 방식으로 사용해 해결해 냈다. // A.tsx import {Props} from './type'; import B from './B' // B.tsx import {Props} from './type'; ... any: [] as Props