맛집 앱 만들기 프로젝트 Part12 앱 로그인 설계 및 기타 프로그램 설치

앱 로그인 설계

• Step1: 앱 실행시 Refresh Api Call을 호출하여 성공, 실패를 나눈다
• Step2 : 실패한경우 신규 유저 또는 오래전에 로그인한 사용자로 토큰이 만료된 사용자로 토큰을 제거하고 다시 로그인을 하게하여 로그인 성공시 AccessToken(header), RefreshToken(storage)을 저장하고 메인페이지로 이동시킨다 성공한 경우 RefreshToken이 아직 살아있는 사용자로 자동 로그인을 하여 메인화면으로 이동시킨다 AccessToken(header), RefreshToken(storage) 토큰들을 모두 갱신시켜서 재저장한다

EncryptStorage 설치 및 편의설정

RefreshToken을 저장하기 위해 EncryptStorage 를 설치하도록 하자

npm install react-native-encrypted-storage

EncryptStorage를 편하게 사용하기 위해 아래 파일을 만들고 설정해두자

[matzip/front/src/utils/encryptStorage.ts]

import EncryptStorage from 'react-native-encrypted-storage';
const setEncryptStorage = async <T>(key: string, data: T) => {
  await EncryptStorage.setItem(key, JSON.stringify(data));
};

const getEncryptStorage = async (key: string) => {
  const storedData = await EncryptStorage.getItem(key);

  return storedData ? JSON.parse(storedData) : null;
};

const removeEncryptStorage = async (key: string) => {
  const data = await getEncryptStorage(key);
  if (data) {
    await EncryptStorage.removeItem(key);
  }
};

export {setEncryptStorage, getEncryptStorage, removeEncryptStorage};

테스트용 백엔드를 만들기위해 데이터베이스인 postgresql 설치

👉🏻postgresql 설치URL

postgresql에 쉽게 데이터를 넣고 수정하고할 수 있는 pgadmin 툴 다운로드 및 생성

👉🏻pgadmin 설치URL

(1) 설치가 완료되었으면 pgadmin을 실행시켜서 Servers -> Register -> Server를 클릭하여 아래와 같이 생성하도록 하자

• Name : matzip-app
• Host name / address : localhost
• Port: 5432
• Username/Password: postgres

(2) Server를 생성했으면 matzip-app이 생기고 왼쪽에 토글바를 눌러 열면 Databases항목이보인다 Databases우클릭 Create를 눌러서 DB를 생성한다 DB이름 또한 matzip-app으로 생성하였다

프로젝트 폴더에 server폴더 생성

현재까지 진행한 react-native소스들은 모두 프로젝트폴더내의 front폴더에있을것이다

server폴더를 최상위에 하나 더만들어서 최상위에는 front, server가 존재하도록하자

server 기본 소스코드 다운 및 실행

server 소스가 필요한데 이 프로젝트는 react-native가 중점이기에 server 소스는 기본적인 RestApi기능을 하는 소스만을 사용할것이다 서버 소스파일은 👉🏻소스코드){:target=”_blank”} 여기에서 다운받고 위에서 만들어둔 server폴더에 풀어두자

server폴더내의 기본 설정 작업

[matzip/server/.env]

env파일을 생성하여 아래와 같이 postgresql 및 서버 포트, 토큰 정보등을 담아두도록하자

PORT=3030
DB_USERNAME=postgres
DB_PASSWORD=postgres
DB_DATABASE=matzip-app
DB_HOST=localhost
JWT_SECRET=SecretMatzip
JWT_ACCESS_TOKEN_EXPIRATION=30m
JWT_REFRESH_TOKEN_EXPIRATION=30d

서버의 의존성 패키지를 설치하고 실행시키자

npm install 
npm run start:dev

Front 폴더에서 Axios 및 ReactQuery 설치

npm install axios
npm install @tanstack/react-query