GAZERO Blog

헷갈린다 헷갈려! 디자인에 진심인 나는 날씨 앱을 만들어보는데, 폰트를 너무너무 바꾸고 싶었다. 시작은 css에 첨부하던 것 처럼 간단하게 할 수 있을 줄 알았다. 생각보다 복잡했던 폰트 적용법을 기록으로 남겨보려고 한다. 리액트 네이티브로 커스텀 폰트를 적용하려면, 폰트의 파일이 필요하다. 대표적인 무료 폰트 사이트가 두 가지가 있는데, 이곳에서 원하는 폰트를 찾는다. (혹은, 본인이 가지고 있는 파일을 사용해도 좋다.) 구글폰트 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 눈누 눈누 - 상업용 무료한글폰트 사이트 상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은..

React와 비슷한 듯 다른 React-native😭 리액트 네이티브로 간단한 앱을 만들던 중, 날씨를 가시적으로 보여주는 아이콘을 추가하는 기능에서 내가 원하는 이미지로 넣어주고 싶었다. 날씨 api로 날씨를 받아와 날씨에 따라 이미지를 다르게 보여주고 싶어서 공식문서를 보니 Image 태그를 사용하면 되는 거였다. import React from 'react'; import { View, Image, StyleSheet } from 'react-native'; const DisplayAnImage = () => { return ( ); } 공식 문서에 나와있는 사용법으로는 Image 태그 안의 source에 주소나 경로를 위의 방식으로 넣어주면 된다고 나와있다. 그래서 난 이런 식으로 경로의 동일한 ..

리액트네이티브의 레이아웃은 Flexbox를 사용해야한다. Flexbox는 웹의 CSS와 거의 비슷하다. 웹에서는 display:flex;로 지정을 해주고 나서야, flex-direction을 사용할 수 있었다. React Native는 기본이 flex이며, flex-direction의 기본값은 column이다. (웹에서는 기본값이 row) 반응형 레이아웃 고려가 필수! (width, height 속성 사용하지 않음) → 숫자만 생각하면 된다 = 비율로 생각하면 된다. 모든 View가 Flex Container이기 때문에, Flex Size를 지정해준다. 부모요소의 flex size를 지정해준뒤, 자식요소들을 원하는 비율로 나눈다고 생각하면 된다. export default function App() { ..

React Native 규칙, 코드 이해하기 View: Container (html의 div) 항상 import 해와야 한다 Text: 모든 text (html의 p나 span 태그등) style 사용이 가능한데, 일부 style은 사용불가, 웹에서 사용하던 모든 것을 사용할 수 없다.(ex. border) return ( Hello! I made a RN app! ); StyleSheet.create: object 생성, 자동완성(auto complete) 기능 제공, 필수는 아니다. const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'ce..