토피넛라떼조아

프로젝트를 진행하면서 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..

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

이번에는 생성했던 프로젝트를 Github 저장소에 올릴 것이다.  저번에 개발에 필요한 프로그램들을 설치하고, React Native 프로젝트를 생성하고 안드로이드 스튜디오의 가상 디바이스에 연결하는 것까지 해보았다. 근데 이 프로젝트를 로컬에 둔다면 다른 곳에서 개발을 이어서 할 수 없기 때문에 어느 곳에서나 같은 환경으로 개발을 할 수 있도록 github 저장소에 프로젝트를 올리려고 한다. 깃 설치 일단 깃을 설치해야 한다. 나는 git bash를 사용한다. 얘도 리눅스 명령어를 윈도우에서 쓸 수 있게 해준다.아래 링크에서 간단하게 windows 버전으로 설치하면 된다. Git git-scm.com설치가 끝나고 cmd에서 git만 쳐서 확인하면 이렇게 설명이 나오는데 그럼 잘 깔린 것이다.  새 저장..

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

웹에서 개발할 당시에는 세션 또는 로컬에 토큰을 저장하여 로그인 상태를 유지하게 했습니다. 하지만 앱에서는 세션과 로컬을 활용할 수 없기 때문에 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..