개발 메모장 개발 메모장

전체 글

• 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
• eslint, prettier 수정, 검색 후 commit하기

  Tip 2021. 8. 27. 18:19

  해당 글은 husky@4.3.8, lint-staged@11.0.0 버전으로 작성되었습니다. //package.json { "lint-staged": { "**/*.{tsx,tx,jsx,js}": [ "eslint --fix", "prettier --write" ] }, "husky": { "hooks": { "pre-commit": "lint-staged" } } } lint와 prettier설정이 다 되어 있는 상태에서 devDependencies 아래에 위와 같이 두 속성을 추가하면 git commit을 하기 전 lint-staged를 실행해 검사를 진행한 뒤 commit을 진행하게 됩니다. 이 설정을 적용하면 배포를 하거나 할 때 에러가 나는 경우를 많이 막아주고, 설정도 간단하니 설정해서 사용한..

  Read More
• 내가 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 이 사이트를 이용해 완전하진 않지만 내..

  Read More
• Github Push Access Error 고치기

  Git 2021. 8. 23. 18:06

  8월 13일을 기점으로 github에서 비밀번호를 사용할 수 없게 되었다. 처음에는 당황했는데 해결법은 무척 간단하다. 1. github 웹 사이트 로그인 후 우측 상단 내 프로필을 눌러 Settings로 진입한다. 2. 왼쪽 Nav의 Developer settings 클릭한다. 3. 왼쪽 Nav의 Personal access tokens를 클릭한다. 4. Generate new token을 눌러 새 토큰 발급창으로 진입해 내가 허용할 권한들을 선택 후 토큰을 만든다 ps1. 이름은 왠만하면 알아볼 수 있게 짓는걸 추천한다. 여러 곳에서 사용하면 해깔릴 위험이 있음. ps2. Expiration은 개인 컴퓨터의 경우 No expiration으로 설정하는게 귀찮음을 덜어준다. 5. 생성된 Token값을 복..

  Read More