Frontend/React·React Native
-
React에서 눈속임을 이용한 커스텀 비밀번호 만들기 (카드 번호 절반만 숨기기)Frontend/React·React Native 2023. 4. 27. 16:17
웹 환경에서 사용자가 어떤 값을 입력하게 할 때 input 태그를 쓰는 것은 매우 당연합니다. 그렇다면 이 input 의 값을 숨기는 방법으로는 무엇이 있을까요? 대표적으로는 password 타입이 있는데요, 사용자가 어떤 값을 입력하더라도 *로 치환하여 화면 상에서 보이지 않도록 숨기는 역할을 합니다. 하지만 이 input 입력 폼에 특정한 값만 숨기고, 특정한 값은 노출시키고 싶다면 어떻게 할 수 있을까요? 예를 들면 사용자가 카드 번호 16자리를 입력할 때, 뒤 8자리만 가려지게 할 수는 없을까요? 그러면서 하이픈까지 넣어주는 센스를 발휘할 수 있을까요? 1111222233334444 를 차례로 입력하면 1111 - 2222 - **** - **** 으로 변환되어 input태그에 출력할 수 있을까요..
-
React에서 Context API로 상태 관리하기 (with Typescript)Frontend/React·React Native 2023. 4. 17. 17:27
React에서 프로젝트를 진행하다보면 컴포넌트 간에 상태를 공유하기 위해서 그 상태를 부모에게 끌어올리는 일은 자연스러운 현상입니다. 이 과정을 다시 생각해보면, 상태를 부모가 관리하게 하여 prop으로 자식들에게 전달하는 방식으로 쉽게 구현할 수 있겠죠. 하지만 React 애플리케이션이 점점 커지고 복잡해질 수록 상태 관리를 하는 것은 어려운 작업이 될 것입니다. 특히 여러 구성 요소(ex.컴포넌트)간에 상태를 공유해야한다면 상태 값을 공유(동기화)하는 것은 주요 문제 중 하나입니다. 이런 문제를 해결하기 위해 Redux, MobX, Recoil 등 상태 관리 라이브러리를 사용하는 것이 굉장히 일반적이지만, 라이브러리 없이 context api로 구현하는 방법에 대해서 알아보려고 합니다. 특히 타입스크..
-
[React Native] Expo에 Android Studio 에뮬레이터 연결하기Frontend/React·React Native 2022. 5. 6. 15:34
React Native를 개발할 때 본인 컴퓨터가 Windows면서 iOS를 사용하는 사용하는 경우에는 불가피하게 Expo를 사용하게 되는 경우가 있습니다. (본인이 아니더라도 팀원이 해당 환경을 사용하는 경우도 있습니다.) 아무튼 간에 Expo로 앱 개발을 하게 되면 일반적으로 각자의 스마트폰에 Expo Go를 설치하여 테스트를 하게 됩니다. 하지만 이는 너무나도 귀찮은 작업입니다. 스마트폰을 거치해야 하며, 테스트도 손으로 일일이 해야 해서 여러모로 귀찮습니다. 스마트폰을 개발 내내 켜놔야 하는 문제도 있습니다. Expo 없이 React Native로 앱 개발을 할 때에는 Android Studio의 에뮬레이터에 물려서 사용했었는데 Expo에서도 가능합니다. 글 시작에 앞서 현재 제 개발 환경을 공유..