본 포스트 예제는 Redux Toolkit에서 제공하는 비동기 함수 createAsyncThunk를 이용해서 https://jsonplaceholder.typicode.com 사이트에서 데이터를 가져오는 예제로 typescript를 기반으로 작성되었습니다. 프로젝트 생성 vite를 이용해서 프로젝트를 생성합니다. yarn create vite test_app --template react-ts…
참고 : https://www.youtube.com/watch?v=9wrHxqI6zuM 생활코딩 유튜브 예제를 기반한 포스트입니다. 아래 예제는 다음 동작을 수행합니다. 버튼을 클릭하면 counter 값이 올라감counter 값을 노출시켜줌 예제 파일은 다음 세가지 파일로 구성 됩니다. App.js - 메인…
아래는 react-redux 개념을 익히기 위한 간단한 예제입니다. 생활코딩(https://www.youtube.com/watch?v=yjuwpf7VH74) 유튜브 강좌에서 설명한 코드로 종종 참고할 목적으로 기록합니다. 코드를 간단히 설명하면 좌측 컴포넌트는 Left1, Left2, Left3으로의 하위 컴포넌트들을 그리는 구조로 되어 있고…
개요 이번 포스트에서는 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…