react
-
husky + lint-staged를 활용하여 git hook걸기Git 2021. 11. 10. 12:45
이 글에서는 가장 많이 사용하는 git hook인 pre-commit을 기준으로 설명하겠다. 먼저 이 글을 작성하게 된 가장 큰 원인인 husky@4에서 사용하던 아래와 같은 방법을 사용할 수 없게 되면서 였다. // package.json { ... "husky": { "hooks": { "pre-commit": "lint-staged" } } } 일단 나와 같이 husky가 설치되어 있는 사람의 경우 아래를 실행하여 husky의 버전을 올리고 husky를 init 해준다. npm i -D husky@latest // husky@7.0.4 기준 npx husky install 처음 설치하는 사람의 경우 아래를 실행하여 간단하게 설치할 수 있다. npx husky-init && npm install 위의..
-
효과적인 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 이 사이트를 이용해 완전하진 않지만 내..