chobyeonggyu03 님의 블로그

이번 글에서는 구글 로그인 api, 카카오 로그인 api에 이어서 네이버 로그인 api까지 성공적으로 api연동을 마치게 되어 네이번 로그인 api를 연동시키는 부분에 대해 정리해보고자 한다. (안드로이드 기준) (네이버 로그인도 카카오 로그인과 마찬가지로 안드로이드 앱 빌드방식과 앱 빌드와 관련된 파일들에 대해 알지 못하는 무지한 상태에서 처음 API를 연동시키고 있었을 때 정말 많은 시간과 에너지가 갈리며 고통받았었던 API였는데, 프로젝트 x 교내활동 도중 네이버 현업 개발자 멘토분이 당시 다운받았던 네이버 로그인관련 라이브러리 자체가 제대로 빌드되지 않는 라이브러리라서, 다른 네아로 라이브러리를 끌어와야 할 것 같다는 피드백을 받아 다른 네아로 API 라이브러리를 끌어오게 되었는데 카카오 로그인 ..

이번 글에서는 구글 로그인 API를 연동시키며 어떻게 API를 연동시키는지 감이 잡혀 카카오 로그인 API를 연동시키는 것도 성공시키게 되어 기쁜 마음으로 해당 내용에 대해 정리해보고자 한다.  참고로 카카오 로그인 API는 예전에 SDK 버전호환과 관련된 에러와 더불어, 안드로이드 앱 빌드 과정과 관련된 파일들에 대해 알지도 못하는 무지한 상태에서 처음 API를 연동시키며 정말 많은 고생을 하며 멘탈도 갈리고 결국 반포기상태로 방치했었던 부분인데 막상 API를 어떤식으로 안드로이드 프로젝트에서 불러와 실행시키고 빌드하는 건지에 대한 이해도가 어느정도 오른상태에서 다시 연동시켜보니 어이없을 정도로 쉽게 API를 연동시킬 수 있게 되어 당황스러웠다. 이제 본론으로 돌아가 안드로이드 환경에서 react na..

이번 글에서는 firebase를 통해 구글 api를 성공적으로 연동시킨 기념으로, React Native 환경에서 firebase를 활용해 구글 로그인 api를 연동시키는 방법에 대해 자세히 정리해두고자 한다. ( 글쓴이는 안드로이드 환경이며, 이미 연동을 시킨 상태이므로 스크린샷이 처음 구글 로그인 api와 관련해서 설정하는 화면들과는 조금 차이가 있을 수 있음 - 이와 관련해서 다른 점이 있다면 언제든지 댓글 남겨주세요)   Firebase를 활용하여 Google Login API 연동하는 방법 (android 버전위주)  1. Firebase 프로젝트 생성 먼저 구글 로그인과 관련된 인증로직과 세션관리를 대신하여 구글 로그인 api를 사용하기 편하게 도와주는 도구인 'Firebase'를 활용하기 위..

이번 글에서는 다른 사람들은 쉽게 쉽게 사용하던 google map api를 혼자만 빌빌대게 했던 오류에 대해 정리하고 넘어가 보고자 한다. 내가 google api를 구현하며 가장 고통받았던 부분은 다른 사람이 하는 것처럼 제대로 api key도 등록하고 api도 활성화시키고 react-native-maps 라이브러리를 import 하여 Mapview컴포넌트도 사용한다고 생각했는데 아래 화면처럼 회색 배경으로 이미지가 렌더링 된다는 사실이었다. 가장 먼저 이 문제를 해결하기 위해 시도해보았던 건 아래 공식 문서에서 해당 문제를 해결하는 방법을 본 적이 있었기에 공식문서에서 하라는 방법을 그대로 따라 해 보는 것이었다. 공식 문서 링크 - https://github.com/react-native-maps..

이번 글에서는 엉뚱한 오류에 걸려넘어져 해결하지 못하다 겨우 해당 오류를 해결하 게되어 React Native에서 google map api를 연동시키는 것에 대해 정리해보고자 한다.    React Native에서 Google Map API 사용법 1. react-native-maps 라이브러리 다운로드 먼저, google 지도를 사용할 수 있도록 지원해주는 라이브러리인 react-native-maps 라이브러리를 아래 코드를 터미널창에 입력하여 입력하여 다운로드 받아주도록 하자.  npm install react-native-maps      2. Google Cloud Platform console (GCP console)에서 API 등록해주기 react-naitve-maps 라이브러리를 다운로드 ..

이번 글에서는 3주만에 해결한 React Native 환경에서 mutilpart/form-data 형태로 서버에 JSON데이터와 이미지 파일을 동시에 보내는 방법에 대해 정리해 보도록 하겠다. 글쓴이는 여러 시행착오 끝에 react-native-image-picker와 react-native-fs 라이브러리를 활용하여 서버에 JSON 데이터와 이미지 파일을 같이 보내는 걸 성공하였는데, 이 2개의 라이브러리를 활용하는 방법에 대해 설명하기 전에 먼저 서버와 포스트맨을 활용해 어떠한 데이터를 서버에 전달해야 했는지에 대해 정리해 보도록 하겠다. (RN언어가 아니라면 앨범에 접근가능한 사진선택 관련 라이브러리와 파일시스템 라이브러리를 각자 언어에 맞는 라이브러리로 다운받아주면 된다.) 서버측 코드 위의 사진..

이번 글에서는 아직까지도 이미지를 파일형태로 서버 api 보낼 때 생기는 오류를 해결하지 못하여 'react-native-blob-util'가 아닌 'react-native-fs' 라이브러리를 활용해 해결해 보고자 아래의 공식문서를 참고하여 'react-native-fs' 사용법에 대해 정리해보고자 한다. https://github.com/itinance/react-native-fs GitHub - itinance/react-native-fs: Native filesystem access for react-nativeNative filesystem access for react-native. Contribute to itinance/react-native-fs development by creating ..

앞서 정리한 Axios의 기본적인 사용법에 대한 글에 이어 이번글에서는 현재 직면한 문제인 dataform을 활용해 json객체와 이미지 파일을 동시에 서버 api로 보내는 과정에서 생기는 type 에러를 해결하는데에 있어, Axios에서 클라이언트가 서버와 http 통신을 할 때 텍스트나 이미지 파일들을 전송할 때 사용하는 데이터 구조인 FormData에 대한 개념이 부족했기에 해당 개념부터 짚고 넘어가 보자 한다. FormData란?FormData는 서버로 웹 form의 데이터를 쉽게 구성하여 전송할 수 있도록 도와주는 웹 API에서 사용되는 데이터 객체로, 'key'-'vlaue'로 데이터들을 관리하며, 비동기 HTTP 요청을 통해 데이터를 서버에 전송해주는 데이터 객체이다. FormData의 특징..

현재 진행중인 공모전에서 Axios 라이브러리를 활용하여 서버 api와 통신 중, JSON파일만을 보낼때는 제대로 통신되었지만 이미지를 파일의 형태로 json파일과 같이 전송하는 부분에서 막히게 되어 앞전에 안드로이드 네트워크에 대한 공부한 내용을 바탕으로 AXIOS 라이브러리에 관해서도 한번 정리해보고자 한다. Axios란 무엇일까? 공식문서에서 정의한 Axios는 '브라우저와 node.js에서 사용할 수 있는 promise 기반의 HTTP 클라이언트 라이브러리'로써 서버와의 HTTP통신을 쉽게 할 수 있게 도와주는 Javascript기반의 비동기형 라이브러리이다. Axios의 특징들 Promise 기반 (ES6) : Axios는 promise기반의 API를 사용하기에 비동기형 HTTP요청을 쉽고 효율..

● 이번 글에서는 React Native의 기본 컴포넌트들과 간단히 style지정방법에 대해 정리해보고자 한다. View 컴포넌트는 Javascript에서 태그와 비슷한 개념으로 다른 요소들을 감싸주는 컨테이너 역할을 하는 컴포넌트이다. 또한, 이름 그대로 화면에 View 컴포넌트는 안에 있는 요소들 보여주며, 주로 레이아웃을 구성하는데 많이 이용된다 View 컴포넌트의 특징컨테이너 역할 : View 컴포넌트는 다른 컴포넌트들을 감싸는 컨테이너 역할을 해줌 중첩 가능 : View 컴포넌트는 여러 개 중복되어 사용할 수 있음 레이아웃 구성의 편의성 : View 컴포넌트는 Flexbox 레이아웃 시스템을 사용하여 내부 컴포넌트들의 정렬과 배치를 관리하므로 비교적 쉽게 레이아웃 디자인을 할 수 있음 모바일 렌..