My Boundary As Much As I Experienced

분명 네비게이션 버튼인데 특이한 동작이 나오는 커스텀 버튼들이 있다?!바텀네비게이션 버튼 중에 일반적인 페이지가 아니라 모달이 나오게 하는 페이지들이 존재한다.  각설하고 이걸 어떻게 구현하는가?1. 바텀탭 네비게이터에 새로운 페이지 추가별거 없다. 새로운 Screen컴포넌트를 네비게이터에 일단 추가한다.ToAddNewDiary라는 컴포넌트를 추가했다. return ( , }} /> // ... );};  2. Null을 반환하는 컴포넌트를 생성하고 만든 페이지에 준다.우리가 만드는건 실제 탭전환을 일으키지 않는다. 탭이 전환되는게 아니라원래 있던 탭에 그대로 있으면서 그 위로 바텀 모달 형식의 페이지가 나와야 하는 것이다.이를 위해 ..

배우게 된 계기사람들이 하도 form 구현 시 React-hook-form이 좋다고 해서언젠가 한 번 써봐야지 했다가 이번에 만드는 초기앱 회원가입에 써보기를 고려하였다. 사실 처음엔 useState와 useEffect가 가장 직관적이지 않나? 이걸로도 충분한데..라는 생각이 지배적이었는데 알고보니 매우 개발자를 편하게 해주는 좋은 라이브러리였다. React-hook-form의 최대 장점: 관리할 상태가 엄청나게 줄어든다.아래는 내가 취업 전 부트캠프 파이널 프로젝트로 했던 코드이다.호텔 예약 매물 양도 플랫폼이 컨셉이었는데, 예약 과정에서 관리해야될 상태들이 너무 많았다.호텔 취소 물품의 1차 가격, 2차 가격, 2차 가격 설정 여부, 계좌등록여부, 은행, 계좌번호, 약관 동의1/2/3/4를 포함해서...

공부하게 된 계기리액트네이티브로 ref를 쓸 때 아래같은 에러가 나올 때가 있다. 딱 봐도 ForwardRef를 쓰라는 얘기같은데자세히 보면 함수형 컴포넌트에선 직접 ref를 받을 수 없다는 얘기다. 지금까지 리액트 웹개발하면서함수형 컴포넌트에서 ref를 props로 잘만 사용해왔는데??? 이상하다. 왜 리액트네이티브에선 이런 에러가 나는가?Warning: Function components cannot be given refs.Attempts to access this ref will fail. Did you mean to use React.forwardRef()? 일단 그전에 props와 ref를 비교해보자. Props와 Ref의 비교props는 데이터와 이벤트 핸들러를 전달하기 위한 용도: prop..

문제 상황만약 리액트네비게이션을 라우터로 사용하면실제 Screen과 header는 App.tsx에서 분리되어 사용되고 있을 것이다. 아래처럼. , // 헤더 컴포넌트 }} /> 그런데 어떤 스크린에서는 스크린 내의 상태에 따라 헤더의 상태도 변하게 해야될 때가 있다.이럴 경우에 어떻게 조작해야되나? 이들의 공통 상위컴포넌트인 App.tsx에 state들을 위치시켜야할까?좋은 방법은 아닐 것이다. 그렇게 거추장스럽게 App.tsx에 상태들을 많이 만들어서 props drilling시키는건 좋지 않다.. 이때 몇 가지 방법이 대표적으로 떠오르는데 바로,- 1.  React Context- 2. 전역상태관리 라이브러리- 3. navigation.setOptions이다. navi..

이번에 회사에서 RN으로 초기앱을 세팅부터 다시 해볼 수 있는 기회가 생겼다.돈 되보이는 것들은 모두 한 번 만들어보자는 싸장님의 방향성 덕분에 앞으로도 초기세팅을 해볼 일이 많아질거 같다.. RN은 React와 거의 비슷한 구조로 사용할 수 있지만 가장 차이나는 부분은 input의 활용 부분인 거 같다.이번에 초기세팅하면서 배운 부분들을 정리해보려 한다. 1. TextInput웹에서 쓰는 input은 RN에서 TextInput 컴포넌트로 사용할 수 있다. 웹과 구별되는 속성: editable:  - 사용자 입력을 받을 수 있는지 없는지 여부를 설정한다. (boolean)type:  - 텍스트에 입력되는 정보들의 타입을 결정한다. 기본은 "text" ("text" | "number" | "password..

navigation객체와 useNavigation훅리액트 네비게이션에서 다른 페이지로 네비게이션을 하려할 때 navigation을 이용해야된다.그런데 navigation을 생성할 수 있는 방법은 2개가 있다.navigation prop와 useNavigation훅을 이용하는 방법이다. 1. 페이지 컴포넌트에서 prop으로 제공되는 navigation객체 꺼내기navigation 객체는 일반적으로 스크린 컴포넌트의 props로 전달된다. '페이지 컴포넌트'라면 언제 어느 곳에서든 꺼내서 사용할 수 있다.(페이지 컴포넌트의 기준이 뭐냐고? Stack.Screen에 제공한 컴포넌트는 페이지 컴포넌트로 분류된다.)function HomeScreen({ navigation }) { return ( ..

함수 커링이란?함수가 인자를 하나씩 받아가며 최종 결과를 도출하는 함수 패턴이다.아래와 같은 형식이 된다고 생각하면 된다.(params1) => (params2) => { return }도대체 이걸 왜 쓰나.. 싶었는데 가끔 나름 요긴하게 쓰게된다.주로 한 번에 prop을 결정짓지 못할 때 사용하게 된다.(이 단계에서는 이 prop이 결정되고, 저 단계에서는 저 prop이 결정되고...)예시를 들어보겠다. 내가 직면한 문제 - 기존 컴포넌트에 prop을 추가적으로 넣어야하는데 못하는 상황(?)나는 최근에 리액트네이티브의 FlatList를 다뤄야하는 일이 있었다.FlatList는 리액트네이티브가 제공하는 대규모 데이터 배열을 처리하기 위한 스크롤 뷰이다.(뷰포트에 있지 않는 데이터는 렌더하지 않는 win..

현재 상황회사에서 오늘의 일기라는 신규 서비스를 개발 중이다.'앤트타임' 개발은 이미 다 짜여진 구조 안에 조금씩 추가하는 느낌이었는데이번 제품은 초기세팅, 라우팅 구조부터 내가 손수 짜는거라 배우는게 많다.회사에서 돈 받으면서 독서실 공부하는 느낌이어서 기분 좋다ㅎㅎ.. 사수는 양자 시뮬레이터 정부사업 하느라 바빠서 자사 서비스는 다 내가 맡게되네? 오히려 좋아.. 리액트 네비게이션의 Stack개념이전 포스팅에서도 몇 번 얘기했다. 웹에선 한 페이지에서 다른 페이지로 넘어갈 때 모든 상태가 사라지지만모바일에선 어떤 페이지로 이동할 때 기존 화면 위에 새로운 탭이 쌓인다.그래서 아래에 있는 페이지의 state나 여러 상태들이 보존된다! 이를 리액트네이티브에서 구현할 수 있는게 '스택' 컴포넌트인 것이다...

구현해야 될 기능 - 이미지 다운로드 기능 구현하기이번에 내가 제안한 아이디어를 바로 기능으로 구현할 수 있는 기회가 주어졌다.바로, 자신의 KYC스코어를 인증서 이미지로 저장하거나,이를 X(전 트위터)에 공유할 수 있는 기능을 구상하였다. 이때, 인증서 이미지를 다운받는 과정은 따로 백엔드 없이프론트엔드에서 이미지에 텍스트만 박아서 다운로드 받게 할 수 있을 것 같았고,서버 호출을 줄이기 위해 프론트엔드 단에서 기능구현을 마무리해보겠다고 제안했다.  구현 아이디어 1단계:  Share모달을 실행할 때 canvas에 이미지를 로드하기useEffect에 generateImage라는 핸들러로 nickname, kycScore, maxScore 등을 제공한다. useEffect(() => { gene..

요새 하고 있는 일현재 회사 서비스에서 KYC(Know Your Customer) 이벤트를 진행하고 있다.쉽게 말해 Web3 프로젝트에서 환전 전에 봇이 아닌지 인증하는 방식의 관례라고 보면 된다.보통 신분증이나 개인정보 인증을 진행한다. 그러나 우리 회사는 그냥 앱을 열심히 사용한 사람들을 '실제 유저'로 인정해주고포인트 환전 비율을 제대로 쳐주는 방식으로 진행하였다. 그래서 만들어야 하는 기능은?개중 증명을 위한 항목 중에 친구 초대가 있는데,이 점수를 채우고 싶으면 유저를 더 초대하라는 의도로 조그마한 share 버튼을 추가하였다. 모바일 환경일 때는 OS에서 제공하는 공유 바텀모달이 나오고,모바일 환경이 아닐때는 클립보드에 공유 링크만 복사된다. Webshare API란?WebShare API는 ..