react-native 4

[React Native] path alias 설정하기

프로젝트를 진행하면서 import 구문이 불필요하게 길어지는 것 같아서 자주 불리는 디렉터리 주소를 alias로 설정해서 사용하기로 결정했다.  코드가 조금 더 깔끔해지길 바라면서 RN 프로젝트에서 path alias 설정하는 방법에 대해서 알아보았다.일단 필요한 라이브러리를 받아준다.npm install -D babel-plugin-module-resolver 내 프로젝트 구조는 아래와 같다....src ㅏcomonents ㅏscreens ㅏhooks ㅏ... ㄴutils ㄴ styles.tsApp.tsx.eslint.ts.gitignore.yarnrc.yml.prettierrc.js babel.config.jspackage.jsonpackage-lock.jsonREADME.mdtsconfig.j..

개발일기/App 2024.10.07

앱스토어 등록 일지 03. RN 프로젝트 폴더 구조 정리 & 필수 라이브러리 설치

이제 본격적으로 프로젝트를 진행하여야 한다. 먼저 구조를 살펴보고 개발에 필요한 라이브러리를 프로젝트에 설치하려고 한다. 내 입맛대로 컴포넌트 구조도 미리 잡아둘거다. 기본 구조 내 맘대로 다듬기 일단 react-native init으로 프로젝트를 만들면 다음과 같은 기본 구조를 가지고 있다. 리액트와 흡사한 것 같다. 다른 점으로 android와 ios 폴더가 생성되는데, 이는 각 OS에 맞게 빌드하거나 배포할 때 쓰인다. 나는 가볍게 무시해주고 바깥에서 작업을 할거다. 가장 처음 시작되는 파일은 index.js이다. 여기서 App.tsx 컴포넌트를 렌더링 해준다. App.tsx는 이렇게 생겼다. 실행했을 때 에뮬레이터 첫 화면에 보이는 코드이다. 스타일이 StyleSheet으로 구현되어 있는데, 이건..

개발일기/App 2024.10.04

앱스토어 등록 일지 01. 안드로이드 개발 환경 구축 & 안드로이드 스튜디오 연동하기 (React Native)

예전에 싸피에서 프로젝트로 했던 안드로이드 애플리케이션을 앱 등록 직전에 싸피를 졸업하면서 흐지부지 된 적이 있었다. 앱스토어에 내 앱을 등록한 경험이 없다는 것이 조금 아쉬워서 오늘부터 아무 앱이나 만들어서 앱 스토어에 심사, 등록을 목표로 달려보려고 한다.  오늘은 그 첫 번째로 개발환경 설정에 대해 끄적여보겠다. 나는 React Native로 개발을 할 것이고 vscode와 android studio를 사용할 것이다. React Native 개발은 expo cli와 react-native-cli 개발로 나뉘는데, 예전에 정리해둔 내용으로 따로 포스팅을 하겠다. 그리고 난 IOS는 잠시 뒤로 미뤄두고 안드로이드 애플리케이션을 개발할 생각이다.일단 개발에 필요한 프로그램들을 모두 설치해주자. 필요한 파..

개발일기/App 2024.09.30

[React-Native] AsyncStorage를 활용하여 token 저장하기

웹에서 개발할 당시에는 세션 또는 로컬에 토큰을 저장하여 로그인 상태를 유지하게 했습니다. 하지만 앱에서는 세션과 로컬을 활용할 수 없기 때문에 AstncStorage를 활용하여 디바이스에 정보를 저장하여야 합니다. AsyncStorage 설치 $ npm install @react-native-community/async-storage AsyncStorage에 데이터 저장하기 // Token.js import AsyncStorage from '@react-native-async-storage/async-storage'; // AccessToken 저장 export const setAccessToken = async token => { await AsyncStorage.setItem('accessToken..

개발일기/App 2022.11.20