react
-
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 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..
-
NextJS에서 antd less파일 이용하기Next.js 2021. 7. 27. 17:13
NextJS 11 버전으로 변경되며 기존에 사용하던 @zeit/next-less를 사용한 Webpack Config코드에 문제가 생겼다. 이에 대한 해결 방법을 공유한다. 먼저 종속성을 다운 받아준다. npm i antd next-plugin-antd-less less less-loader 그런 뒤 파일들을 수정해 준다. //next.config.js const withAntdLess = require('next-plugin-antd-less'); module.exports = withAntdLess({ lessVarsFilePath: './styles/custom.less', lessVarsFilePathAppendToEndOfContent: true, cssLoaderOptions: {}, webpa..
-
React Native에서 SVG 이미지 사용하기React Native 2021. 7. 22. 17:35
// expo일 때 expo install react-native-svg // expo가 아닐 때 npm i react-native-svg cd ios pod install 설치한 뒤 공통으로 종속성 하나를 더 설치한 뒤 metro.config.js를 수정한다. npm i -D react-native-svg-transformer const { getDefaultConfig } = require('expo/metro-config'); // expo일 때 const { getDefaultConfig } = require('metro-config'); // expo 아닐 때 module.exports = (async () => { const { resolver: { sourceExts, assetExts },..
-
앱 기획부터 출시까지(일기장) - 2 (종속성 설치 및 설정들)React Native 2021. 7. 22. 17:15
해당 글은 MacOS, expo@42.0.0, react-native@0.63.4 버전을 바탕으로 작성되었습니다. 전 글에서 프로젝트를 생성하는 것 까지 끝냈다. 오늘은 개발을 할 때(특히 협업을 할 때) 거의 필수적으로 사용하는 설정들에 대해 다뤄보고자 한다. 일단 나 같은 경우 React Native 프로젝트의 경우 특히 내가 사용하는 파일 이외에 생성되는 파일들이 많기에 src 폴더를 만든 뒤 위치를 변경해준다. src 폴더로 App.tsx를 이동했을 경우 꼭 index.js파일의 App.js의 import 위치를 변경해 주세요. 그런 뒤 expo로 편하게 이용하기 위해 android, ios의 스크립트를 변경한다. "android": "expo start --android", "ios": "exp..