이안의 평일코딩

리액트 네이티브 프로젝트 작업 중 커스텀으로 폰트를 적용하였더니 갑자기 아래와 같은 에러메시지가 떴다. Unrecognized font family 'Montserrat-Regular' 해결방법 npx react-native link 설치 후 node_modules를 삭제해준다. 그리고 다시 터미널에서 입력하고 설치해준 뒤 실행해보면 오류가 해결된다. npm install npm run ios

색상 assets/colors라는 폴더를 만들어 colors.js 파일을 생성한다. const colors = { black: '#000000', gray: '#666666', blue: '#1C215D', } export default colors; 자신이 원하는 색상을 넣어주고 export한 다음 import해서 사용하면 간단하게 StyleSheet에서 적용가능하다. import colors from './assets/colors/colors'; const App....... const styles = StyleSheet.create({ sectionTitle: { fontSize: 24, fontWeight: '600', color: colors.blue, fontFamily: 'OpenSans-B..

터미널에서 아래와 같이 입력해준다. npx react-native init 프로젝트명 엔터를 눌려주면 아래와 같이 프로젝트 셋팅이 완료된다.

보통 리액트 네이티브를 첫 입문했을 때 API를 fetch해와서 Movie App을 만들거나 (Pokemon App도 만들긴함 ㅎㅎ) 아니면 CRUD을 첨가한 ToDo App을 만드는데 오늘은 간단하게 To do 앱을 만들어 보도록 하자. 결과물 VScode를 IDE로, Expo CLI를 이용했고 할일을 추가하고 체크하거나 아니면 X 아이콘을 눌려 삭제시키는 간단한 투두앱이다. App.js import { StatusBar } from 'expo-status-bar'; import React, { useState } from 'react'; import { Text, StyleSheet, View, Dimensions, Platform } from 'react-native'; import uuid fro..

App.js import { StatusBar } from 'expo-status-bar'; import React, {useState} from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; export default function App() { const [OutputText, setOutputText] = useState("Hi there! 👀") function buttonTapped(){ setOutputText("🎉 Welcome to React Native World!") } return ( {OutputText} ); } const styles = StyleSheet.create({ container: { ..

먼저 터미널에서 Expo를 전역으로 설치해줍니다. sudo npm install expo-cli --global 설치 후 프로젝트도 생성해줍니다. expo init 프로젝트명 cd 프로젝트명 expo start 그리고 Expo를 실행시켜줍니다. yarn ios