전체 글

React Native Routing 설정 (react-navigation 사용하기)

리액트 네이티브에서 라우팅을 하기 위해서 다음과 같은 라이브러리를 사용할 수 있다. @react-navigation/native @react-navigation/drawer @react-navigation/stack @react-navigation/bottom-tabs @react-navigation/material-top-tabs @react-navigation/native는 필수로 사용되고, 나머지 네비게이션들은 필요에 따라 설치하여 사용한다. import { NavigationContainer } from '@react-navigation/native'; 네비게이션을 사용하기 위해서 최상단에 선언되야 하며, NavigationContainer 컴포넌트로 감싸진 자식 컴포넌트에서 네비게이션이 동작할 ..

상태관리 라이브러리 Redux

Redux는 자바스크립트 어플리케이션에서 예측 가능한 상태의 관리를 해주는 container이다. 상태 관리를 위한 전역 상태의 저장소를 제공한다. Redux는 react의 하위 라이브러리가 아니고, 자바스크립트 어플리케이션이라면 사용이 가능하다. 컴포넌트간의 정보 공유가 필요할 때, 복잡성을 줄이기 위해서 상태관리 라이브러리인 redux를 사용한다. // NPM 으로 설치 npm install redux // Yarn 으로 설치 yarn add redux 참고 자료 : https://ko.redux.js.org/introduction/getting-started Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org Redux의 세 가지..

axios의 interceptors 기능 사용하기

🍎 Axios나 ky, got과 같은 Promise 기반 HTTP 라이브러리에서는 interceptors 기능을 제공한다. 🍏 interceptors를 설정하여 매번 API가 처리되기 전에, 요청이나 응답을 가로채 그 사이에 함수를 실행시킬 수 있다. 예를 들면, 요청 전에 인증 토큰을 가져와 설정해두면, 매번 요청할 때 마다 인증 설정을 해야하는 번거로움을 줄일 수 있다. axios.interceptors.response.use( response => response, // 성공 error => { const { config, // 기존의 요청 response: {status}, } = error; console.log("status", status); return Promise.reject(error..

useEffect의 Clean-up 함수

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. clean-up 함수를 사용하게 되면 렌더링이 될 때, 이전에 남은 함수가 실행되어 메모리 누수가 일어나는 일을 막을 수 있다. useEffect를 사용하여 컴포넌트에서 side effect를 수행하는데, 이때 렌더링이 발생시 메모리 누수가 일어날 수 있다. 🍠 데이터 가져오기, 구독 설정, 수동으로 ..

TypeScript 시작하기 & React에서 Typescript 정리

C언어나 자바를 사용했었던 나에게 파이썬이나 자바스크립트는 어색한 부분이 있었다. 시간이 지나 이제는 익숙해졌지만, 여전히 자바스크립트를 사용하며 마주하는 문제가 있다. 바로, 자바나 C언어와는 다르게 변수에 type을 지정하지 않는 자바스크립트의 특성 때문에 가끔 예상치 못한 오류가 발생하는 것이다. 이러한 문제를 해결 해주는 TypeScript(타입스크립트)의 편리함을 알아가보고자 간단하게나마 타입스크립트를 사용해보기로 하였다. 설치 npm install typescript --save-dev 또는 글로벌 설치 npm i -g typescript 타입스크립트의 확장자 🥥 타입스크립트의 확장자는 .ts이다 🥥 리액트에서 컴포넌트를 표현할 땐, .jsx 대신 .tsx를 사용할 수 있다. 간단한 사용 예 ..

코드 깔끔하게 작성하기 (리액트, Styled-Components)

자신이 짠 코드라도, 시간이 지난 뒤에 보면 이게 무슨 코드지? 하는 생각이 들 때가 있다. 하물며, 다른 사람이 내 코드를 보는 것은 어떨까? 그렇기에, 최대한 깔끔한 코드와 프로젝트를 위해서 내가 알아낸 방법을 남기고자 한다. Styled-Components 분리하기 (S-dot) Styled-Components의 이름을 짓는 방법에 대해서 고민하던 와중, 외국의 블로그들과 다른 사람들의 코드를 보고 찾은 방법이다. 기본적으로 다음과 같이 Styled-Components를 작성한다. import styled from 'styled-components'; const S = {}; S.Home = styled.div` text-align: center; font-size: 1.3rem; ` S.P = s..

SuperAgent로 API 호출하기

SuperAgent는 경량 Ajax API 라이브러리로, 사용하기 쉽고 Node.js에서도 작동하는 가독성이 좋은 라이브러리이다. 간단한 사용법은 다음과 같다. import request from 'superagent'; request .post('post 요청을 보낼 url') .send({ 'payload': 'data' }) // payload .set('Accept', 'application/json') // 옵션 설정 .then(res => { console.log(res.body); // 결과 값 }); React에서 사용하는 예제를 만들어보았다. import superagent from "superagent"; const HttpRequestWithSuperagent = () => { con..

React Native 안드로이드 에러

Execution failed for task ':app:checkDebugAarMetadata'. > Could not resolve all files for configuration ':app:debugRuntimeClasspath'. > Failed to transform react-native-0.71.0-rc.0-debug.aar (com.facebook.react:react-native:0.71.0-rc.0) to match attributes {artifactType=android-aar-metadata, com.android.build.api.attributes.BuildTypeAttr=debug, org.gradle.category=library, org.gradle.dependency...