CodeHoon

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

안녕하세요 상훈입니다.
이번 달 한빛미디어-나는리뷰어다 에서 제공 받은 도서는 소문난 명강의 : 김범준의 핸즈온 리액트 네이티브 입니다.

리액트에 대한 관심과 공부 시간이 어느 정도 들어간만큼 기초적인 리액트에 대한 개념은 안 상태로 이 도서를 전자책으로 얻게 되어, 작성하였습니다.

🙄 어느 정도 수준의 책인가요?

책 소개에서도 언급이 되었지만, 이 도서는 초급 수준의 리액트 네이티브 개발을 한다고, 말해주고 있습니다. 

그러나, 찬찬히 살펴면 어느 정도 개발을 하셨던 분들도 보시면 중간중간에 도움이 될 만한 내용들이 많이 있는 것 같습니다. 추천드려요!

🎆 목차

간략한 목차부터 말씀드리자면, 이 책은

1. Expo, React-Native, Node.js 등 기초 요소 설명
2. 프로젝트1 : 계산기
3. 프로젝트2 : TodoList
4. 프로젝트3 : 여행 사진 공유 앱 만들기 

로 구성되어져 있습니다.

🚩 Prettier, EsLint 

첫 번 째 챕터인 Expo, React-Native, Node.js 등 기초 요소 설명 부분에서 좋았던 부분은 Prettier, EsLint 를 어느정도 이해할 수 있게 설명해준 부분이었습니다.
예전부터 Prettier, EsLint 는 프론트엔드 개발자들을 꽤 속썩이는 역할을 하고 있었거든요. (물론 주관적인 견해입니다.)

저 또한 Prettier, EsLint 때문에 골치 아팠던 적이 한 두 번이 아니었는데, 우연찮게도 이를 어느정도 설명해주어 덕분에 Prettier, EsLint 에 대해 좀 더 알게되었습니다 😎

🚩 Expo

그리고 리액트 네이티브 개발 공부를 조금이라도 해본 사람이라면 모두 알고있는 Expo.

이 책 또한 편의성을 중점적으로 Expo를 사용하여 앱 개발의 초석을 만들었습니다.

덕분에 오랜만에 Expo를 다시 깔게 되었네요.

🚩 첫 번째 프로젝트 : 계산기

1. prop-types 라는 라이브러리를 처음 알게되었습니다.

npm i prop-types

TypeScript 처럼 javascript 에서도 타입을 명시하여 사용할 수 있게 해주는 라이브러리더라구요.
매우 유익했습니다!

그리고 계산기 앱을 한 개 만들어본 결과 느낀점 🚀

책을 받고 시간이 부족해 기간 내로는 클론 코딩이 어려울 것 같아 계산기 앱까지만 만들고, 리뷰를 시작하게 되었다.

React.js 를 사용하던 사람은 React-Native 를 확실히 조금만 더 공부하면 바로 사용할 수 있다.

React-Native 에 해당하는 새로운 컴포넌트 등이 많기에 그렇게 바로바로 사용할 수는 없다.

이 책은 하나하나 상세한 내용을 만들어주고, 전체적으로 오타도 거의 없는 것 같아 좋았다. 여러 개발 관련 도서들은 오타가 워낙 많아 오류도 많이 발생하게 되는데, 이 책은 그런 경우가 없었던 것 같다. (아닐 수도 있음..)

⚡ 제가 드리는 별점은요

⭐⭐⭐⭐⭐ 5개 드리겠습니다. 추천드립니다!

리액트 네이티브를 사용하고 싶으신 프론트엔드 개발자라면, 입문서로 봐도 무방하겠다는 생각이 들었습니다.

이상입니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

안녕하세요, 상훈입니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

ReactNative + Expo, 구글 혹은 카카오 로그인을 구현하려고 하는데, 안드로이드 연동을 위해선

sha-1 인증서 디지털 지문

 이 필요합니다.

저렇게 SHA-1 인증서 디지털 지문이 필요한데요, 어떻게 하면 얻을 수 있는지 포스팅하도록 하겠습니다.

■ 빌드를 해야한다.

1. 로그인
2. 빌드
3. 빌드 완료 확인, 내용 체크
4. SHA-1 지문 입력

순서로 소개하도록하겠습니다.

1. 로그인

eas 를 전역(-g)으로 설치

npm install -g eas-cli

로그인

eas login

로그인이 되었지만, 혹시 모르니 확인을 한 번 더 해주기.

eas whoami

로그인이 정상적으로 되었음을 확인할 수 있습니다.

2. 빌드 시작

 빌드 환경설정을 해줍니다.

eas build:configure

저는 All 을 선택하였습니다. 궁극적으로 android뿐 아니라 ios도 해줄 것이기 때문이죠.

그러면 eas.json이 생성된것을 확인하실 수 있습니다.

이제 BUILD를 해봅시다

eas build --platform all

3. 빌드 완료 확인, 내용 체크

성공적으로 빌드되었다면, 확인을 해봅시다

eas build:list

첫 빌드가 된 앱의 형태입니다! 

 1.0.0 으로 따끈따끈한 최신 녀석이죠 (RAW FISH 급)

이제 EXPO 로 이동하여 확인해보시죠

DashBoard > Configure > Credentials 를 클릭해보시면

아까 빌드할 때 만들어놓았던 내용이 이곳에 출력됩니다.   클릭해서 들어가주세요

SHA-1 Certificate Fingerprint

라는 항목 아래에 써져있는것을 확인하실 수 있습니다. 

해당 내용을 구글의 경우

입력해주세요!

이상입니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

React native 에서 환경설정 중 진단할 수 있는 react-native tool 👍

npx@react-native-community/cli doctor

조음

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

React-native 로 font 를 설정하려던 와중 에러가 발생하였다.

'Lobster Regular' 이라는 구글 폰트명으로 폰트를 설정하려고 하는데 expo 설정과 연동하여도 에러가 발생하였다.

버전 참고 바랍니다.

expo install expo-font

expo-font를 설치해주고, App.js 에서 코딩해주었다.

loaded 라는 변수에 useFonts() Hook을 사용, font의 경로(src/assets/fonts/-.ttf) 를 찾아 삽입해주었다.

저 부분에서 조건문에 다른 컴포넌트를 라이브러리에서 끌어다가 사용하였었는데, 에러가 나서 null로 바꿔주었다.

(혹시나 같은 오류가 발생한다면 참고바란다.)

에러 해결되었슴

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

expo 공식 사이트에 어떻에 font 적용이 가능한지 설명되어있으니 참고 바랍니다.

'firebase.apps.length' 부분에서 객체에 대한 길이를 반환시켜 값의 존재유무에 따라 app의 값을 다르게 앱에 적용하려고하는데 해당 내용에서 자꾸만 에러가 출력되었다.

기존 코드는 login auth() 관련해서 기능을 구현하려고하였다.

바뀐 부분은 import 부분.

firebase의 버전은 v8이다. 

// 변경 전
import * as firebase from "firebase/app";

// 변경 후
import * as firebase from "firebase";

// 하단의 전체 코드

const firebaseConfig = {  ...  };

let app;
if (firebase.apps.length === 0) {
  app = firebase.initializeApp(firebaseConfig);
} else {
  app = firebase.app();
}

const auth = firebase.auth();

export { auth };

이것 때문에 오전내내 시간을 사용하였다. 그래도 해결되었으니 기쁘구먼,,

그런데 왜 공식 페이지에서는 import 부분을 저대로 명시해놓았을까 의문이 든다.