React Native
-
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..
-
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..
-
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에러가 사라지는 것을 볼 수 있다.
-
앱 기획부터 출시까지(일기장) - 1 (사용 기술 정하기 및 프로젝트 생성)React Native 2021. 7. 21. 14:40
+해당 글은 MacOS, expo@42.0.0, react-native@0.63.4 버전을 바탕으로 작성되었습니다. 이미 카테고리를 보면 알겠지만 가장 큰 틀은 React Native로 정한 상태로 들어간 프로젝트이다. 하지만, 이에 대한 설명 역시 필요하다는 생각에 처음 기획을 한 단계부터 시작하려고 한다. React, React Native 두 가지 모두 Facebook에서 만든 JS 라이브러리로 두 가지 중 어떤 걸 선택하는지에 대한 내 기준은 사실 한 가지이다. 검색이 용이해야 하는가? 이 한 가지에 따라 웹으로 프로젝트를 시작할지 앱으로 시작할지를 정하는 편이다. 그리고 이번에 할 프로젝트의 경우 일기장의 특성상 검색이 될 일이 없었기에 React Native로 정할 수 있었다. 이 시점에서 내..