전체 글
-
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와 같..
-
Styled-Components 테마 적용하기React 2021. 7. 30. 19:37
npm install styled-components 만약 TS를 사용한다면 추가적으로 Types를 설치해 준다. // react npm install @types/styled-components // react-native npm install @types/styled-components @types/styled-components-react-native 아래부터는 TS로 설명하겠습니다. TS를 사용하지 않는다면 declare파일만 만들어 주지 않으면 큰 차이가 존재하지 않습니다. // styled.d.ts import 'styled-components'; declare module 'styled-components' { export interface DefaultTheme { main: string;..
-
React Native에서 Custom Font 적용하기React Native 2021. 7. 29. 14:54
해당 글은 일반 CLI를 이용해 생성된 프로젝트에서는 안 되며, Expo나 Expo를 Eject한 프로젝트에서만 적용되는 방법입니다. 먼저 사용하려는 Font의 종류에 따라 설명하자면, google-font의 경우 expo-google-font를 이용하여 가장 손쉽게 사용할 수 있다. 나는 내가 가장 많이 사용하는 Noto Sans KR을 기준으로 설명하겠다. expo install @expo-google-fonts/noto-sans-kr expo-font expo-app-loading import React from 'react'; import { Text, View } from 'react-native'; import { useFonts, NotoSansKR_100Thin, NotoSansKR_300..