Tip
-
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 이 사이트를 이용해 완전하진 않지만 내..
-
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
-
React String형의 Html 렌더링 하기Tip 2021. 7. 28. 17:02
웹 프로젝트를 하다보면 서버 단에서 html 태그를 문자로 받아 띄어줘야 되는 경우가 있다. 이 경우 주로 사용하는 방법은 dangerouslySetInnerHTML을 이용하는 방법이 있다. const Test = () => { const tagCodes = "Test Code" return } 이 방법은 충분히 간편하지만 사용자가 등록할 수 있는 장소에서는 cross-site scripting(XSS) 공격에 매우 취약하기에 라이브러리를 사용해 조금이나마 안전한 방법으로 사용할 것을 권한다. npm install sanitize-html import sanitizeHtml from 'sanitize-html'; const Test = () => { const tagCodes = "Test Code" c..