react redux toolkit으로 백엔드 데이터 가져오기 with typescript

본 포스트 예제는 Redux Toolkit에서 제공하는 비동기 함수 createAsyncThunk를 이용해서 https://jsonplaceholder.typicode.com 사이트에서 데이터를 가져오는 예제로 typescript를 기반으로 작성되었습니다. 프로젝트 생성 vite를 이용해서 프로젝트를 생성합니다. yarn create vite test_app --template react-ts…

0 Comments

react redux-toolkit 기본 예제

참고 : https://www.youtube.com/watch?v=9wrHxqI6zuM 생활코딩 유튜브 예제를 기반한 포스트입니다. 아래 예제는 다음 동작을 수행합니다. 버튼을 클릭하면 counter 값이 올라감counter 값을 노출시켜줌 예제 파일은 다음 세가지 파일로 구성 됩니다. App.js - 메인…

0 Comments

react-redux 간단한 사용법 예제

아래는 react-redux 개념을 익히기 위한 간단한 예제입니다. 생활코딩(https://www.youtube.com/watch?v=yjuwpf7VH74) 유튜브 강좌에서 설명한 코드로 종종 참고할 목적으로 기록합니다. 코드를 간단히 설명하면 좌측 컴포넌트는 Left1, Left2, Left3으로의 하위 컴포넌트들을 그리는 구조로 되어 있고…

0 Comments

react + nodejs 실행 시 invalid host header 오류

react로 Frontend를 띄우고 node에서 backend를 띄워 frontend에서 proxy 설정으로 backend를 가리키게 했는데 접속 시 invalid host header라는 오류가 발생했다. 이런 경우 다음 설정으로 오류 회피가 가능하다. frontend 소스 디렉토리에서 다음…

0 Comments

React Native Admob 광고 띄우기

테스트 ID Admob 테스트 시 시뮬레이터에서 광고를 띄우려고 하면 광고가 노출되지 않는 걸 알 수 있다. 테스트 용도로는 테스트 ID 사용하도록 되어 있다. Always test with test ads When building…

0 Comments

react-native-maps 사용 시 supportLibVersion 에러 해결

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…

0 Comments

React Native Tutorial 따라하기 – Height and Width

Component의 Height과 Width를 설정하기 위한 방법으로는 두 가지가 있다. 하나는 Fixed Dimensions이고 다른 하나는 Flex Dimensions이다. Fixed Dimensions Fixed는 우리가 기존에 pixel 값을 사용하던 것과 유사하다. 다음은 예제이다. import React,…

0 Comments

React Native Tutorial 따라하기 – Style

CSS를 사용하듯이 React Native에서도 유사하게 Style을 지정하는 것이 가능하다. 대부분의 style name이 CSS와 유사하다. 다만, CSS에서는 style name을 background-color와 같이 표현하면, React Native는 backgroundColor와 같이 표현한다. 다음은 Style 적용 예제다.…

0 Comments

React Native Tutorial 따라하기 – state

Component에는 props 말고도 state라는 데이터가 있다. state의 변수는 setState를 호출해서 변경 가능하다. 다음은 1초 마다 텍스트를 출력했다가 출력하지 않는 blink 형태로 화면을 구성하는 예제이다. import React, { Component } from…

1 Comment