react
-
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
-
NextJS 11버전에서 next Image 태그 사용하기Next.js 2021. 8. 9. 15:14
NextJs 10 버전에서 처음 나온 Image태그의 11 버전에서의 변동된 부분 중 개인적으로 만족했던 기능들에 대해 설명해 보겠습니다. 정적 이미지의 경우 10버전에서 width, height 값이 필수였던 것과 달리 image를 import 해서 사용할 경우 높이와 넓이를 동적으로 설정해 줍니다. 물론, 높이나 넓이 중 하나만 정의하여 다른 한 값만 자동으로 지정하게 하는 것도 가능합니다. 그리고 blur라는 placeholder속성이 추가되어 네트워크가 느린 환경에서 로딩 중 이미지를 흐리게 보여주는 기능이 추가되었고, Next.js의 새로운 버전에서는 또한 Image 태그의 백엔드에서 제공하는 blurDataURL prop을 사용해 흐린 동적 이미지를 지원합니다. 서버에서 blurha.sh와 같..