개발 메모장 개발 메모장

분류 전체보기

• 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: (..

  Read More
• 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..

  Read More
• 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이 크게 감소했다. 물론 아직 버그가 있을 수 있지만, 지금까지의 장점만으로도 충분히 버전을 올릴만한 가..

  Read More
• 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으로 변경되기 때문에 성능상의 큰 차이는 없을 것이다...

  Read More
• readonly 객체 수정하기

  Tip 2021. 9. 6. 16:38

  const newObject = { ...readOnlyObject}; newObject?.id = 'newId'; // pass readOnlyObject?.id = 'newId'; // error 비구조화 할당을 이용해 readOnly인 객체를 새로운 Object로 할당한 뒤 값을 저장하게 되면 간단하게 저장할 수 있게 된다.

  Read More
• NextJS 외부라이브러리 Error : document(or window) is not defined 해결하기

  Next.js 2021. 9. 6. 16:30

  NextJS로 프로젝트를 하는 중 조금 오래된 라이브러리 등을 이용할 때 NextJS의 ssr 속성 때문에 document나 window가 호출되기 전 라이브러리를 로드해서 에러가 발생하는 경우 무척 간단하게 해결 가능하다. import dynamic from 'next/dynamic' const QuillNoSSRWrapper = dynamic(import('react-quill'), { ssr: false, }) NextJS의 dynamic Import를 이용해 ssr옵션을 끄는 것으로 간단하게 해결 가능하다.

  Read More
• NextJS Image Tag Error: Invalid src prop 해결하기

  Next.js 2021. 9. 6. 16:02

  해당 에러는 NextJS의 이미지를 태그를 이용해 외부 링크의 이미지를 불러오려고 하면 발생하는 에러이다. 이 에러는 생각보다 간단하게 해결할 수 있다. // next.config.js module.exports = { images: { domains: ['firebasestorage.googleapis.com'], }, } 나의 경우 firebase의 storage를 이용하기에 해당 도메인을 입력해 줬는데 다른 링크의 주소에서 가져온다면 해당 링크의 주소를 입력해주면 된다. 주의해야 할 점을 몇 가지 쓰자면 next.config.js에 다른 요소들도 추가 설정을 했을 때 웬만하면 가장 먼저 images 설정을 하지 않으면 인식하지 못하는 문제가 발생했다. images에 여러 옵션이 있는데, 그 중 lo..

  Read More
• 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..

  Read More