본문 바로가기

React

 (11)
Axios Instance를 이용하여 중복된 Token 검증과정을 Interceptor 등록을 통해 수행한다. 기존의 Axios요청기존의 axios요청은 다음과 같이 진행되었다.await axios.post('URL' ,{}); 중복된 URL입력이 필요했으며, 토큰 검증과정은 각 로직에 중복되어 들어갔다. 이에 Axios인스턴드를 생성하여 baseURL을 지정한 뒤 interceptor를 등록하여 중복된 토큰 유효성 검사 로직을 간소화 할 수 있으며 토큰 유효성 검사도중 프로미스들을 큐에 넣어 토큰 유효성 검사가 끝난 뒤(리프레시 토큰을 통해 새로운 토큰을 재발급 받은 뒤) 큐에 있는 프로미스들을 실행시킬 수 있다. Axios Instance생성하기생성한 Axios Instance를 통해 요청 시 baseURL이 지정되어 URL을 중복 입력할 필요가 없다.import axios from 'axios';const ..
Expo 앱 초기화, RN프로젝트 시작 시작새로운 Expo 앱을 초기화 하는 방법은 터미널에 다음 명령을 실행하는 것이다.npx create-expo-app@latest StickerSmash  출력 참고 : https://docs.expo.dev/tutorial/create-your-first-app/ Create your first appIn this chapter, learn how to create a new Expo project.docs.expo.dev 보일러 플레이트 코드 제거하기초기 Expo앱을 생성하면 더미코드가 존재한다. 이를 제거할 수 있다.npm run reset-project  실행하기npx expo start  expo-go 애플리케이션을 설치한 뒤 QR을 스캔하여 실제 기기에서 실행시킬 수도 있다. app/index..
React Native 환경 변수 설정 방법 리액트 네이티브 공식문서 내용리액트 네이티브 공식문서에서는 babel.config.js를 생성하여 환경변수를 지정하고 react-native-dotenv를 설치하고 .env파일을 생성하여 import문으로 환경변수를 불러온다.(나는 작동 하지 않았음, 최초 프로젝트 생성시 babel.config.js도 없었음) 여러차례 캐시를 지우면서 재실행 해봤지만 package.json어쩌구 오류가 발생한다.  expo 공식 문서환경변수의 형태를 EXPO_PUBLIC_API_URL 즉 EXPO_PUBLIC을 접두어로 붙여서 환경변수를 네이밍 한다. 아래 사진을 보면 정상적으로 환경변수를 불러온 것을 확인할 수 있었다. 정리리액트 네이티브에서는 환경변수 네이밍에 EXPO_PUBLIC이라는 접두사를 붙여서 네이밍한다. ..
React Native / 서버요청 커스텀 훅 만들기 스프링교재에서 실습한 코드를 기반으로 서버를 작성하였다. 스프링서버에서 응답하는 객체 형태  컨트롤러를 확인해보면 /api/articles로 요청하면 Article객체가 요소인 리스트 형태로 응답을 받을 수 있다. Article 엔티티의 구조를 보면id, title, content속성이 있다. postman을 사용하여 스프링 서버로 요청하여 객체 형태 확인하기 출력을 확인한 결과 id, title, content필드가 있는 요소들의 배열로 응답을 받는 것을 확인할 수 있었다. 리액트 네이티브에서 관련타입 정의하고 요청 로직 작성하기 import { useEffect, useState } from 'react';import ArticleView from '../src/components/ArticleVie..
React Native / Typescript 에서의 Props 타입지정 리액트와 타입스크립트 적용 리액트 네이티브에서의 Props전달 과정타입스크립트를 적용하였을 때 Props의 타입을 지정해주어야 한다. Props는 보통의 리액트에서 destructuring을 통해 값들을 전달받았다. const ArticleView = ({ article }) => ( {article.title} {article.content} ); 만약 자바스크립트 템플릿을 적용한 리액트라면 article의 타입을 지정해줄 필요가 없지만 타입스크립트의 경우 타입을 지정해주어야 한다. 타입스크립트에서 객체내부 필드들의 타입 정의하기  여기서 나는 interface를 통해서 articleType을 정의해주었다. interface articleType { id: number; title:..
React Native / Prettier설정 리액트 네이티브에서 Prettier설정은 같은 프로젝트를 깃으로 공유할 때 필수적이다. 먼저 .prettierrc.js 내부 파일을 수정해준다.module.exports = { arrowParens: 'always', bracketSameLine: false, bracketSpacing: true, embeddedLanguageFormatting: 'auto', htmlWhitespaceSensitivity: 'css', insertPragma: false, jsxSingleQuote: true, printWidth: 80, proseWrap: 'always', quoteProps: 'as-needed', requirePragma: false, semi: true, singleAt..
React / React + Typescript / useMemo에 대하여... useMemouseMemo는 비용이 큰 연산에 대한 결과를 저장해두고, 이 저장된 값을 반환하는 훅이다. 흔히 리액트에서 최적화를 떠올릴 때 가장 먼저 언급되는 훅이 바로 useMemo다. 메모이제이션을 사용하지 않는 경우 예시메모이제이션을 사용하지 않는 경우 많은 연산을 하는 컴포넌트가 의존되는 값의 변화가 없음에도 불구하고 리렌더링되어 성능저하를 일으킬 수 있다.ExpensiveComponent는 많은 연산을 진행하는 컴포넌트라 가정하여 사용한다. UseMemo는 ExpensiveComponent를 사용하는 컴포넌트이다.  ExpensiveComponent.tsximport React, { useEffect } from 'react';interface Props { value: number | un..
React / React + Typescript / useEffect에 대하여... 😎 useEffect란애플리케이션 내 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과를 만드는 메커니즘이다.이 부수효과가 '언제' 일어나는지보다 어떤 상태값과 함께 실행되는지 살펴보는 것이 중요하다.useEffect의 일반적인 형태const CustomComponent = () => { useEffect(() => { }, [props, state]);} 첫 번째 인수로는 실행할 부수효과가 포함된 함수를 전달하고 두 번째 인수로는 의존성 배열을 전달한다. 콜백함수의 실행useEffect에서는 단순하게 의존성 배열로 전달한 값이 이전과 다른 게 하나라도 있으면 콜백함수를 실행한다. 🔧 클린업클래스형 컴포넌트 구현에서의 언마운트와 비슷하다. 하지만 엄밀히 말하자면 언마운트 개념과는 조금 차이가..

티스토리툴바