1. Firebase 로그인 연동 로그인도 회원가입과 동일하게 POST 방식을 쓰고 request payload, response payload 를 동일하게 가진다. 우선 firebase 사이트에서 sign in end point를 가져와 misc.js에 작성하자. 이전 회원가입에서 쓴 코드를 똑같이 복붙해주고 UP만 IN으로 바꿔주자. // /app/utils/misc.js export const APIKEY = `AIzaSyC-D7xBF_pDDyJZSb0DpC6W-FUJu_UToL8`; export const SIGNUP = `https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=${APIKEY}`; export const SIGNIN = `h..

1. 로그인 화면 작성 위한 파일 및 로고 준비 auth 파일 안에 authForm.js, authLogo.js 파일을 만들자. authLogo.js 에서 로고 이미지를 가져와 쓸 건데 로고 이미지를 보관하기 위해 /app 안에 assets 라는 폴더를 만들고 그 안에 imgs라는 폴더를 만들자. 이 안에 다운받은 로고 파일을 넣으면 된다. 변화된 디렉토리 구조 ├─ app │ ├─ assets │ │ └─ imgs │ │ ├─ winthiary_login_logo.png │ │ └─ winthiary_login_logo@2x.png │ ├─ components │ │ ├─ auth │ │ │ ├─ authForm.js │ │ │ ├─ authLogo.js │ │ │ └─ index.js │ │ ├─ d..

Node.js 설치 만약 Node.js가 이미 설치되어 있다면 넘어가고 아니라면 아래 사이트 가서 LTS(Long Term Support) 버전 설치 https://nodejs.org/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org TypeScript 설치 npm install typescript --save-dev 프로젝트 초기화 npx tsc --init 위 명령어를 실행하면 tsconfig.json 파일 생성이 된다. tsconfig.json 파일을 열고 아래 설정을 추가한다. src 폴더 내에 있는 모든 TS 파일을 컴파일하고, 결과를 build 폴더에 저장한다. { "includ..

1. Firebase 프로젝트 생성 우선 firebase 웹사이트로 들어가자. https://firebase.google.com/ Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 로그인을 진행해주고 시작하기를 누르고 프로젝트 추가를 눌러 새 firebase 프로젝트를 생성해준다. 프로젝트에 들어가면 왼쪽 상단의 햄버거 버튼을 눌러 인증 메뉴를 찾아 눌러준다. 그리고 sign-in method를 들어가 로그인 방법을 설정해준다. 이메일/비밀번호를 사용할 것이므로 이걸 설정해주자. 그리고 프로젝트 개요 메뉴를 찾아 태그 모양 버튼을 눌러주면 앱을 등록할 수 있다. 그리고 이번엔 오른쪽 ..

1. 로그인 화면 버튼 및 이벤트 생성 선행되어야 할 사전 작업이 있다. 루트 디렉토리에 있는 routes.js를 보면 isLoggedIn 이 true인지 false인지에 따라 화면이 다르게 보인다. 그런데 로그인이 안 된 상태에서도 다이어리와 뉴스탭이 있는 메인 화면을 보여주고자 한다. 이건 비회원인 상태에서도 메인화면을 보여주기 위함인데 다이어리 기능은 제한을 두고 뉴스탭만 보여주고자 한다. 그래서 isLoggedIn 이 false일 때 리턴되는 부분에도 메인화면이 보이도록 작업하자. 버튼을 눌러도 아무런 반응을 하지 않는데 이건 onPress를 이용한 이벤트를 발생시키지 않아서이다. 비회원 버튼을 눌렀을 때 메인화면으로 이동할 수 있게끔 작업을 해보자. 구현한 게 화면에 잘 나오는 건 import ..