개발 메모장 개발 메모장

전체 글

• 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;..

  Read More
• 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..

  Read More
• 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..

  Read More
• 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..

  Read More
• React 사용하지 않는 종속성 제거

  Tip 2021. 7. 23. 14:26

  npx depcheck 자세한 내용은 깃헙으로 확인하길 바란다. depcheck/depcheck: Check your npm module for unused dependencies (github.com)

  Read More
• 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 },..

  Read More
• 앱 기획부터 출시까지(일기장) - 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..

  Read More
• React Native에서 이미지 import로 불러오기

  React Native 2021. 7. 21. 17:46

  ESlint에서 global-require 속성을 끈다면 형식으로 불러올 수 있지만 개인적으로 이미지만을 위한 require는 코드를 볼 때도 별로 라는 생각이 많이 든다. 나와 같은 생각을 가진 사람들은 선언 파일 하나로 이미지를 import 할 수 있다. // import-image.d.ts declare module '*.jpg'; *.jpg 형식의 모듈이 이미 선언되었다고 파일을 생성하는 것이다. png, webp등의 형식도 위와 비슷하게 제작하면 된다. import Any from './path/any.jpg'; 이제 TS에러가 사라지는 것을 볼 수 있다.

  Read More