해당 글에서는 Axios의 Interceptor 기능에 대해 알아봅니다. 1) Axios 💡 Axios- Node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트로 비동기 요청을 쉽게 처리할 수 있게 해 줍니다.- 이는 비동기 처리를 통해 네트워크 요청이 완료될 때까지 다른 코드 실행을 차단하지 않고, 효율적인 리소스 사용이 가능합니다.- then()과 catch() 메서드를 사용하거나 async/await 구문과 함께 사용하여 비동기 코드를 더 읽기 쉽고 관리하기 쉽게 작성할 수 있습니다. 시작하기 | Axios Docs시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Pro..

해당 글에서는 안드로이드 12 이하 버전에서 디바이스 알림 권한 체크가 안됨을 확인하였습니다. 이에 따라 이를 대체하는 방법에 대해 알아봅니다.1) 현상 1. 개발 현상 파악💡 개발 현상 파악- 기존 ‘안드로이드 13’이상 버전에서 사용되던 알람에 대한 권한이 ‘안드로이드 12’ 내에서는 POST_NOTIFICATIONS 속성을 이용하여 알림에 대한 권한을 체크를 하였을 때 이에 대해 통제가 되지 않는 현상이 발생하였습니다.  💡 [참고] 권한에 대한 정보- 안드로이드 13이상 버전에서는 ‘POST_NOTIFICATIONS’ 권한을 이용하여서 알람 허용에 대한 권한을 체크하고 있었습니다.  종류설명Andriod 키 값 notification푸시 알림 사용 권한POST_NOTIFICATIONS [RN]..

해당 글에서는 React-native 환경에서 Android Studio의 디버깅 툴(Locat, Profiler, App Inspection)을 사용하는 방법에 대해 알아봅니다.1) Android Studio 디버깅 주요 기능 1. Logcat💡 Logcat- 안드로이드 스튜디오에서 제공하는 디버깅 도구이며, 애플리케이션에서 발생하는 로그 및 디바이스 로그 메시지를 표시해 줍니다 - 이를 통해 로그 출력을 모니터링하고 필터링하여 앱을 디버깅하기 쉽게 도와줍니다. Logcat을 이용하여 로그 보기  |  Android 스튜디오  |  Android DevelopersAndroid 스튜디오에서 Logcat 창에 시스템 메시지를 표시하는 방법을 알아보세요.developer.android.com  2. Pr..

해당 글에서는 react-native에서 빌드 중 충돌이 발생한 경우 캐시를 초기화하거나 최신버전으로 설치하는 방법에 대해 공유합니다.  1) react-native-cli 💡 react-native-cli- React Native 애플리케이션을 더 쉽게 개발할 수 있도록 도와주는 명령 줄 인터페이스(CLI)입니다.  1. react-native-cli 최신버전 설치  @react-native-community/cliReact Native CLI. Latest version: 11.3.7, last published: a month ago. Start using @react-native-community/cli in your project by running `npm i @react-native-com..

해당 글의 목적은 캐시 무효화란 무엇이고 어떠한 해결 방법이 있는지에 알아보기 위한 목적으로 글을 작성하였습니다. 1) 문제점 발생💡 웹 브라우저에서 새로 배포를 하였는데도 이전 파일을 바라보고 있는 문제가 발생하였습니다. 이 문제는 브라우저 내에서 ‘강력 새로고침’ 혹은 ‘캐시 초기화’를 수행해야지만 이전 버전에 캐시가 사라지고 새로운 버전을 바라보아서 해결이 되었는데, 매번 변경 때마다 사용자 들이 ‘캐시 초기화’를 수행해야 하는 번거로움이 생겨서 이러한 작업 없이 수행 할 수 있도록 Cache Busting을 적용합니다. 2) Cache Busting💡 Cache Busting 이란? - Cache를 Busting(부수다, 고장내다) 라는 의미에 Cache Busting은 이전에 남아 있는 캐시로 ..

해당 글에서는 react-router / react-router-dom 버전 v5에서 버전 v6으로 변경함에 따라서 추가/변경/삭제된 내용에 대해서 이해 및 적용하는 글입니다. 1) 취지 💡 기존 React 16.13.1 버전에서 React 17.0.2 버전으로 업데이트를 하는 경우가 생겨서 해당 버전을 버전업을 하고 나니 함께 추가적으로 React-router / React-router-dom 버전을 v5에서 v6로 올리는 작업을 진행하였습니다. [참고] React 16.8 버전 이상 일 경우 React Router v6 사용이 가능합니다. 이는 16.8 버전 이상부터 React hook을 사용할 수 있고, 해당 v6는 React Hook을 많이 사용함으로 필수적으로 버전을 확인해야 합니다. React..

해당 글은 React의 ‘함수형 컴포넌트’의 ‘생명주기’를 이해하기 위한 글입니다. 💡 [참고] 이전에 작성한 ‘클래스 컴포넌트의 생명주기'를 이해하고 오시면 더 쉽게 이해가 가능합니다 [React] 클래스 컴포넌트 생명주기(lifecycle) 해당 글은 React의 '클래스형 컴포넌트'의 '생명주기(lifecycle)'를 이해하기 위한 글입니다. 1) React의 생명주기 용어 용어 설명 ~ will 어떤 작업을 수행하기 전에 실행되는 메서드와 관련된 용어입니 adjh54.tistory.com 1) 함수형 컴포넌트 생명주기 💡 함수형 컴포넌트는 React Hook 이라고도 하며 React 16.8 버전 이후부터 React 요소로 추가가 되었으며, 해당 글에서는 React 17 이상 버전을 기준으로 작성..

해당 글은 React의 '클래스형 컴포넌트'의 '생명주기(lifecycle)'를 이해하기 위한 글입니다. 1) React의 생명주기 용어 용어 설명 ~ will 어떤 '작업을 수행하기 전에 실행되는 메서드와 관련된 용어입니다. ~ did 어떤' 작업을 수행한 이후'에 실행되는 메서드와 관련된 용어입니다. mount 컴포넌트 내에서 'DOM이 생성'되고 웹 브라우저 상에 나타는 메서드와 관련된 용어입니다. unmount 컴포넌트 내에서 'DOM을 제거'되고 웹 브라우저 상에 사라지는 메서드와 관련된 용어입니다. update 컴포넌트 내에서 '변화'가 발생하였을때 수행하는것을 의미합니다. ex) props, state, 부모 컴포넌트의 리 렌더링, forceUpdate를 통해 강제로 변경하는 경우 2) Re..

해당 글의 목적은 React Native 개발을 하기에 앞서서, React Native에 대한 정의와 개발 방식(expo-cli / react-natvie-cli)에 대해 장단점을 알고 선택을 돕기 위한 목적으로 작성한 글입니다. 1) React Native 💡 React Native 란? - 리액트 네이티브는 페이스북에서 만든 오픈소스 모바일 애플리케이션 프레임워크입니다. - JavsScript로 개발하며 IOS나 Andriod, Web, UWP에 대한 모바일앱을 동시에 개발을 할 수 있는 크로스 플랫폼입니다. [ 더 알아보기 ] 💡 크로스 플랫폼(Cross Platform)이란? - 여러 플랫폼에서 동작하는 애플리케이션 개발 방법을 의미합니다. 하나의 코드로 여러 플랫폼에 대응할 수 있으며, 개발 비..