React.js 카카오 로그인, 사용자 프로필 가져오기
개요 이번 포스트에서는 React에서 카카오의 REST API와 Javascript SDK를 이용해 카카오 로그인을 구현해보겠습니다. 동작 순서는 다음과 같습니다. 카카오 로그인 링크 클릭 -> 인가 코드 발급 -> Access Token 발급 ->…
개요 이번 포스트에서는 React에서 카카오의 REST API와 Javascript SDK를 이용해 카카오 로그인을 구현해보겠습니다. 동작 순서는 다음과 같습니다. 카카오 로그인 링크 클릭 -> 인가 코드 발급 -> Access Token 발급 ->…
react로 Frontend를 띄우고 node에서 backend를 띄워 frontend에서 proxy 설정으로 backend를 가리키게 했는데 접속 시 invalid host header라는 오류가 발생했다. 이런 경우 다음 설정으로 오류 회피가 가능하다. frontend 소스 디렉토리에서 다음…
테스트 ID Admob 테스트 시 시뮬레이터에서 광고를 띄우려고 하면 광고가 노출되지 않는 걸 알 수 있다. 테스트 용도로는 테스트 ID 사용하도록 되어 있다. Always test with test ads When building…
react-native-maps를 사용하려는데 패키지 인스톨만 했는데도 다음과 같은 에러가 발생했다. FAILURE: Build failed with an exception. * Where: Build file '/Users/victor/010_dev/gMap/node_modules/react-native-maps/lib/android/build.gradle' line: 20 * What went wrong: A problem occurred evaluating…
Component의 Height과 Width를 설정하기 위한 방법으로는 두 가지가 있다. 하나는 Fixed Dimensions이고 다른 하나는 Flex Dimensions이다. Fixed Dimensions Fixed는 우리가 기존에 pixel 값을 사용하던 것과 유사하다. 다음은 예제이다. import React,…
CSS를 사용하듯이 React Native에서도 유사하게 Style을 지정하는 것이 가능하다. 대부분의 style name이 CSS와 유사하다. 다만, CSS에서는 style name을 background-color와 같이 표현하면, React Native는 backgroundColor와 같이 표현한다. 다음은 Style 적용 예제다.…
Component에는 props 말고도 state라는 데이터가 있다. state의 변수는 setState를 호출해서 변경 가능하다. 다음은 1초 마다 텍스트를 출력했다가 출력하지 않는 blink 형태로 화면을 구성하는 예제이다. import React, { Component } from…
props 이라는 것을 사용하여 Component를 원하는 형태로 생성하는 것이 가능하다. 예를 들면 Image라는 Component에 source props를 설정하여 원하는 이미지를 표현하는 Component로 만드는 것이 가능하다. 다음은 그에 대한 예제이다. import React,…
expo를 이용해 기본 react native app을 만들자 roids upplements. 먼저 npm을 이용해 expo-cli 툴을 설치하도록 한다. $ npm install -g expo-cli expo-cli 를 설치하면 expo 명령을 사용할 수 있다. expo…
expo-cli 참고 https://academy.realm.io/kr/posts/react-native/https://oolluu.tistory.com/1https://developer.android.com/studio/run/managing-avdshttps://facebook.github.io/react-native/docs/getting-started.html#android-development-environmenthttps://levelup.gitconnected.com/comprehensive-guide-to-create-simple-app-using-react-native-web-and-react-native-elements-306cf43fb8d7?gi=a7a9e16bd089