react

해당 글에서는 react-native 기반의 스탑워치 기능으로 시간-분-초(HH:mm:ss), 분-초-밀리세컨드(mm:ss:SSS) 형태의 기능 구성에 대해서 공유합니다.  1) 스탑워치 기능 : 시간-분-초(HH:mm:ss)💡 해당 화면에서는 스탑워치 기능으로 시간-분-초(HH:mm:ss) 형태로 출력을 합니다- handleStartStop()는 스탑워치의 시작/종료의 기능을 수행하는 함수입니다.- handleReset()는 스탑워치 시간을 리셋하는 기능을 수행하는 함수입니다.- formatTime()는 state에 갱신된 시간에 따라 데이터를 시간-분-초(HH:mm:ss) 형태로 변환해 주는 함수입니다.  1. 구성 코드 💡 ‘Start’ 버튼 : handleStartStop()- isActive..

해당 글에서는 Stack Navigator와 Bottom Tab Navigator를 함께 사용하는 Nesting Navigators를 구성하는 방법에 대해서 공유합니다. 1) Stack Navigator💡 Stack Navigator- ‘스택 형태’로 화면 위에 새로운 화면을 쌓아서 탐색을 하는 내비게이션 컴포넌트를 의미합니다.- 스택 형태로 쌓아두기에 이전 화면으로 되돌아갈 수 있으며 탐색 히스토리를 유지하는 특징을 가지고 있습니다. 그렇기에 주로 탐색이 많은 애플리케이션에 적합합니다. - 예를 들어, A 화면에서 버튼을 누르면 B 화면으로 이동하고, B 화면에서 다시 버튼을 누르면 A 화면으로 돌아오는 경우에 사용할 수 있습니다. 기본적으로 스택 내비게이터는 iOS에서는 새 화면으로 이동 시 오른쪽..

해당 글에서는 React-native에서 Logbox 경고창이 발생하는 경우 상태에 따라서 발생하지 않도록 하는 방법에 대해서 공유합니다.1) Logbox💡 Logbox란?- React Native 애플리케이션에서 생성된 '로그 메시지(경고, 에러)를 보고 관리'할 수 있는 사용자 정의 가능한 인터페이스를 제공하는 컴포넌트입니다- LogBox는 앱의 디버깅 및 문제 식별에 유용합니다.React Native 0.62 이후 버전에서 기본적으로 활성화되어 있습니다. 이전 버전을 사용하는 경우 LogBox를 수동으로 활성화해야 합니다.  Announcing React Native 0.63 with LogBox · React NativeToday we’re releasing React Native 0.63 th..

해당 글에서는 디바이스의 네트워크 상태가 연결/미연결 인지 확인을 하기 위한 목적으로 @react-native-community/netinfo 라이브러리를 설정하고 사용하는 방법에 대해서 확인합니다.    1) @react-native-community/netinfo💡 @react-native-community/netinfo 란?- React Native 앱에서 '현재 네트워크 연결 상태'를 '모니터링하고 관리'하기 위한 라이브러리입니다.- 해당 라이브러리는 Android, IOS 플랫폼에서 모두 사용이 가능합니다. GitHub - react-native-netinfo/react-native-netinfo: React Native Network Info API for Android & iOSReact ..

해당 글에서는 React-native 개발 환경에서 상태관리를 위해 RTK(Redux ToolKit)에 대해 이해하고 환경설정 하는 방법에 대해서 공유합니다. 1) Redux ToolKit(RTK)💡 Redux ToolKit - Redux의 사용을 간편하게 하고, 코드의 복잡성을 줄이며, 일반적인 Redux 작업을 더 쉽게 하기 위해 만들어진 라이브러리입니다.- 이는 Redux 애플리케이션을 구축하는 데 필요한 다양한 도구와 유틸리티를 제공합니다. [ 더 알아보기 ]💡Redux- React.js 애플리케이션에서 사용되는 상태 관리 라이브러리입니다. Redux는 애플리케이션에서 발생하는 모든 데이터를 중앙에 저장하고 관리합니다. 이를 통해 애플리케이션의 상태를 예측 가능하고 디버깅이 용이하게 만들어줍니..

해당 글에서는 Front-end에서 용어들에 대해서 정확하게 알고 개념을 이해하기 위한 목적으로 작성한 글입니다. 1️⃣ 저장소 1. 쿠키(Cookie) 💡 웹 브라우저 상에 작은 ‘텍스트 파일’로 저장이 되는 만료 기간이 존재하는 저장소를 의미합니다. [사용 예시] 로그인 화면에서 ‘아이디 자동완성’ 기능에 사용 팝업 화면에서 ‘오늘 하루 보지 않기' 기능에 사용 미 로그인 상태에서 ‘장바구니 담기’ 기능에 사용 2. 로컬 스토리지(Local Storage) 💡 만료기간이 존재하지 않고 페이지를 변경하거나 브라우저를 닫아도 반영구적으로 유지되는 저장소를 의미합니다. 사용 예시 로그인 화면에서 ‘자동 로그인' 기능에 사용 3. 세션 스토리지(Session Storage) 💡 브라우저의 탭 안에서만 유효한..

해당 글에서는 CRA(Create-React-App)를 사용하지 않고 개발 환경을 구축하는 방법에 대해서 공유합니다. 더불어서 선택적으로 설치해야 할 사항까지 함께 공유합니다. 1) 개발 환경 💡 개발 환경 구축을 위해 이용한 IDE, Package Manager, Package를 정리 한 내용 입니다. 분류 버전 설명 Visiual Studio latest 개발 IDE 툴로 VSCode를 사용하였습니다. node 16.16.0 자바스크립트를 수행하는 용도로 사용하였습니다. yarn 1.22.19 패키지 매니저로 사용하였습니다. react / react-dom 18.2.0 웹 프레임워크 React와 React-dom을 사용하였습니다. typescript 4.8.4 타입스크립트를 사용하였습니다. webpa..

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

해당 글의 목적은 클로져에 대한 정의를 이해하고 왜 사용을 해야 하는지에 대하여 이해를 돕기 위해서 작성한 글입니다.       💡 [참고] 클로저를 이해하기 위해서는 이전에 작성한 '스코프'에 관련된 글을 읽고 오시면 이해하는데 도움이 됩니다. [JS] 스코프(Scope) 이해하기해당 글은 스코프와 스코프의 종류에 대해서 이해를 돕기 위해 작성한 글입니다. 1) 스코프(Scope) 💡 스코프(Scope)란? - 선언된 변수에 대해서 접근할 수 있는 유효한 범위를 의미한다. 만약, 변수adjh54.tistory.com   1) 클로저(Closure)💡 클로저(Closure)- 함수와 그 함수가 선언된 어휘적 환경(Lexical Environment)의 조합을 의미합니다. - 즉, 함수가 그 당시에 ..

해당 페이지에서는 쿠키에 대해서 이해하기 위한 목적으로 작성한 글입니다. 1) 쿠키(Cookie)의 정의와 특징 💡 쿠키(Cookie) 란? - 웹 브라우저 상에 작은 ‘텍스트 파일’로 저장이 되는 만료 기간이 존재하는 저장소를 의미합니다. 💡 쿠키(Cookie)의 특징 쿠키는 브라우저를 종료하더라도 유지됩니다. 쿠키의 저장구조는 ‘cookie-name = cookie-value’ 형태의 구조로 저장이 됩니다. 쿠키는 하나의 String내에 속성을 세미콜론(;)을 기준으로 구분을 짓습니다. 쿠키는 텍스트 파일의 형태로 최대 4KB의 용량 제한을 가지고 있습니다. (value의 값의 제한을 의미합니다.) 쿠키는 개인정보가 포함된 보안정보를 사용해서는 안됩니다. Authentication 인증 정보 또는 세..