목록React-Native (30)

개발조각

[React-native CLI] Realm 사용하기 및 사용방법

드디어 Realm을 설치할 시간이 왔습니다. expo프로젝트를 버리고 cli로 다시 한 이유 중 하나가 realm이기도 하죠ㅎㅎ 참고 블로그 https://velog.io/@ddowoo/react-native-local-Database-Realm-DB react native 에서 local Database Realm DB 활용하기 react native local DB Realm 활용하기 velog.io 일단 realm을 설치하는 이유는 휴대폰 내부 DB를 사용할기 위해서입니다. realm 말고도 모바일 DB종류는 많은데요. 그중 가장 유명한 DB는 SQLite, Realm입니다. 일반적으로 안드로이드 개발자는 SQLite를 많이 사용하고, ios개발자는 Realm을 많이 사용한다고 합니다. 저는 rea..
React-Native/[프로젝트] 택시 운행관리 기록장 2024. 3. 11. 18:07
[React-native CLI] 폰트 적용하기, 글로벌 폰트 적용하기(글로벌 폰트는 애매함)

이번에는 react-native에 기본 폰트 변경하는 방법에 대해 설명하겠습니다. 이전에 expo에서 기본 폰트가 변경이 안 되가지고 css로 font-weight를 할 때 다 에러가 나서 난리가 났던 기억이 있다. 이번 프로젝트에서는 Noto Sans Korean을 사용할 예정입니다. 무료폰트 중에서 가장 정직하고 깔끔한 폰트라는 생각이들어 자주 사용하게 되네요. (블로그에서는 확실한 비교를 위해 Noto Sans Korean 말고 NanumRenScript를 사용했습니다!!) 폰트 다운로드 받기 https://fonts.google.com/ Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great ty..
React-Native/[프로젝트] 택시 운행관리 기록장 2024. 3. 7. 21:33
[React-native CLI] styled-components 설치 및 세팅

리액트 네이티브에서도 styled-components가 사용가능하더라고요. 이전에는 가능할 줄 몰라서 안 쓰기도 했고, 요즘 다시 전통적인 css가 좋아서 썼는데 리액트 네이티브에서 css를 사용해보니 css보다는 styled-components를 사용하는 게 좋다는 판단이 들어 사용하게 되었습니다. 이유 리액트 네이티브는 View, Text, TouchableOpacity이런 단순한 요소 밖에 없습니다. 막상 화면을 구성하다보면 생각보다 많이 View를 사용합니다. 그래서 화면 구성한 코드를 살펴보면 구조를 알아보기 힘들다는 생각이 들었습니다. (특히 웹에서 짜는 html에 익숙해진 나에게는 코드를 알아보기가 어려웠습니다.) 그렇다 보니 버튼, 인풋박스, 같이 중복적으로 사용되지만 생각보다 View가 ..
React-Native/[프로젝트] 택시 운행관리 기록장 2024. 3. 6. 13:15
[React-native CLI] svg사용하는 방법 및 react-navigation 커스텀

react navigation을 아래의 화면같이 커스텀할 예정입니다. 디자인 화면을 보면 하단 내비게이션에 각 스크린별로 아이콘이 있는데 이 부분을 svg를 사용해서 구현할 예정입니다. react native에서 svg사용하기 설치 npm install react-native-svg 폴더 app |- assets |- svg.tsx |- navigation |- BottomTabsNabvigator.tsx |- StackNavigator.tsx |- screens |- App.tsx assets/svg.tsx export const svg = { home: ` `, calendar: ` `, cart: ` `, more: ` `, plus: ` `, }; (이전에는 피그마 개발자 도구 무료라서 바로 복붙..
React-Native/[프로젝트] 택시 운행관리 기록장 2024. 3. 6. 00:08
[React-native CLI] react native cli에서 navigation 설치 및 설정하기(npm)

이번 프로젝트에서는 하단메뉴와 하단메뉴 외의 화면을 이동해야 되는 경우가 필요하기 때문에 navigation을 설치해주어야 됩니다. react-navigation/native react-navigation/bottom-tabs react-navigation/stack 이와 같은 라이브러리를 사용할 예정입니다. react-navigation 대해서 react-navigation react-navigation은 React Native 애플리케이션의 네비게이션을 관리하기 위한 라이브러리 입니다. react-navigation/native React Navigation의 핵심 모듈이며, React Native 앱에서 네비게이션을 관리하는 데 필요한 주요 기능을 제공합니다. 주요 컴포넌트와 네비게이션을 설정하고 ..
React-Native/[프로젝트] 택시 운행관리 기록장 2024. 3. 5. 20:42
[React-Native] Mac에서 React Native CLI환경 구축부터 실행하는 방법

react-native를 쉽게 개발하고 싶은 마음에 expo로 설치했다가 realm에 연결이 안 되가지고 결국 React Native CLI로 설치하기도 했습니다.(물론 realm연결말고도 폰트설정도 안되고 Navigation설정 시에도 좀 이상하고...ㅠ) homebrew 설치일단 Mac 사용자이시면 homebrew를 필수적으로 세팅해주세요.아래 참고 블로그도 다 homebrew..
React-Native/[프로젝트] 택시 운행관리 기록장 2024. 3. 4. 17:30
Prev 1 2 3 4 Next