전체 글
-
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옵션을 끄는 것으로 간단하게 해결 가능하다.
-
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..
-
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..
-
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을 진행하게 됩니다. 이 설정을 적용하면 배포를 하거나 할 때 에러가 나는 경우를 많이 막아주고, 설정도 간단하니 설정해서 사용한..
-
내가 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 이 사이트를 이용해 완전하진 않지만 내..
-
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값을 복..
-
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와 같..