썬이의 IT세상

앱 내에서 스택 관리는 주로 react-navigation 라이브러리로 이루어집니다. 페이지 헤더나 별도의 버튼을 통해 이전 스택으로 돌아가는 "뒤로가기" 동작은 navigation.goBack() 함수를 사용합니다. 다만, goBack() 함수가 실행될 때마다 스택에서 -1이 되므로, 의도치 않은 동작이 발생할 수 있다는 점을 주의해야 합니다.const onBackEvent = () => { navigation.goBack() navigation.goBack() navigation.goBack()}return ( ... ...) 위 예제에서 onBackEvent 함수가 실행되면 3개 이전의 페이지로 되돌아가게 됩니다.실제로 뒤로가기 기능을 이렇게 구현할 개발자는 없겠지만,navigation..

현재 시간에서 1시간을 뺀 시간의 날짜를 구하려고 할 때,now.getHours() - 1 로 하게되면 00시일때는 -1시가 되거나 에러가 날 것이다.또 세팅한 값에 따라 이상한 값으로 리턴되는 경우도 종종 있다. 이럴 경우 getHours와 setHours를 사용하여 간단하게 해결할 수 있는데, 현재 시간에서 특정 시간을 뺀 시간의 월/일/시 데이터를 리턴하는 함수 예제로 살펴보자.  const 특정시간을_빼보자 = () => { const now = new Date(); now.setHours(now.getHours() - 1); const hours = now.getHours().toString().padStart(2, '0'); const month = (now.getMont..

react-query의 onError를 사용하거나, Axios로 API를 호출할 때 에러 콜백의 타입은 AxiosError로 선언하게 되는데서버에서 에러코드에 따라 title, msg 등 response를 내려주는 경우에 onError : (error : AxiosError) => { onAddModal(error.reponse.data.msg) //  위와 같이 response를 가져오려고 하면 타입 에러가 생긴다 (컴파일단에서는 당연히 문제가 없지만, 우리는 빨간줄을 혐오하니까) 이럴 때는 간단하게, AxiosError를 상속받는 타입을 선언해주면 된다. interface IErrorDataProps extends AxiosError { data: { message?: string; st..

보통 서버에서 데이터를 받아와서 화면에 뿌려줄 때, 정해진 디자인 형식대로 오지 않아 프론트단에서 수정해야 하는 경우가 생긴다. 예를 들어, temp_dt : 'yyyy-mm-dd' 이런 식으로 들어오는 Date 데이터가 있다고 가정해보자. 서버에서는 yyyy-mm-dd 로 날려주는데 기획 상에서는 yyyy.mm.dd 형식을 원한다면 이 때마다 백엔드 팀에 형식을 고쳐달라고 말하기 애매할 때 (당연히 프론트에서 수정해야죠!) 이를 수정하기 위해 data.temp_dt.replace('-','.') 으로 코딩한다면 결과값은 아래와 같을 것이다. result : 'yyyy.mm-dd' ㅎㅎ.. 문자열 전체를 검증하고 모든 값을 바꾸려고 할때는 replace보다 split과 join을 같이 사용하면 간단히 해..

어떠한 객체 temp_obj에, 특정 key의 value값을 검색해서 boolean값을 반환하고 싶을 때, Javascript의 some() 함수로 쉽게 데이터를 검색할 수 있다. // Test Data const temp_obj = { a : { state : 'ready' }, b : { state : 'ready' }, c : { state : 'complete' } } 위와 같은 형식의 객체가 있을 때, temp_obj 안에 각각 들어있는 객체 중 complete가 한개라도 있다면 True를, 아니면 False를 반환하는 함수는 아래와 같다. // 데이터를 검증하는 함수 function checkApprovalStatus(data: TDataProps): boolean { // 해당 key들의 상..

JavaScript 또는 TypeScript로 회원가입 기능을 작성할 때, 반드시 들어가야 하는 부분 중 하나가 ID(혹은 Email) 을 입력하는 부분에 유효성 검사를 해주는 것이다. 이는 주로 정규식과 .test(id) 함수를 사용해서 검증하곤 하는데, 이번 포스팅에서는 ID에 (@ 이하 부분) 영문과 숫자, 그리고 일부 특수문자만 허용하게 하는 정규식을 다뤄보고자 한다. 조건 1. ID에는 영문과 숫자, 일부 특수문자만 허용한다. 2. ID에는 영문만 또는 숫자만 입력 가능하나 '특수문자만' 입력할 수 없다. 위 조건에 해당하는 정규식과 함수는 아래와 같다. export function isValidId(id: string): boolean { const validCharacters = /^[a-z..

만약 View 컴포넌트에 {children} 위와 같이 행으로 나열되는 컴포넌트를 배치할 때, 아래 예시 이미지와 같이 화면을 벗어나는 경우가 생기는데 이럴 경우 텍스트 영역만 아래로 확장하고 싶을 것이다. 이를 해결하는 방법은 아주 간단한데, flex-shrink 스타일만 준다면 해결된다. ... 텍스트가 넘쳐흘러~ 텍스트가 넘쳐흘러~ 텍스트가 넘쳐흘러~ 텍스트가 넘쳐흘러~ 안드로이드도 물론 적용된다. flex 관련된 스타일의 경우 flexShrink를 포함하여 flexGrow 등 많은 속성들이 있는데 몰라서 잘 사용하지 못하는 경우가 많다. 이를 계기로 더 공부해봐야지 ㅎㅎ

회원가입 기능을 작업하다 보면 거의 필수적으로 들어가는 생년월일 부분을 라이브러리를 사용하지 않고 Input으로 관리할 때, YYYYMMDD 혹은 YYYY-MM-DD 형식이 맞는지를 프론트에서 확인해주는 로직이 필요하다. 예를 들어 생년월일 파라미터에 1996-02-313 와 같이 들어갔는데 API를 호출하게 되면, 해당 회원정보에서 생년월일을 불러오는 부분에서 에러가 날 가능성이 아주 높다. 또 1111-22-33 과 같이 YYYY-MM-DD 형식은 지켰으나 실제 존재하지 않는 날짜의 경우도 있다. 실제적인 예로 어떤 외국인 회원분께서 22051996 과 같이 DD/MM/YYYY 의 형식으로 입력하셔서 해당 회원정보에 관련된 에러가 났던 경우가 있었다. 이에 정규식을 통해 자리수를 먼저 검증하고, 올바..

RN으로 개발하다보면 거의 필수적으로 쓰게되는 ScrollView와 FlatList. 그중 나는 FlatList를 사용하여 스크롤이 있는 UI에 배열로 들어오는 데이터들을 화면에 그려주곤 하는데, RenderItem의 {item}에 타입을 지정해주기가 여간 까다로운게 아니다. 알고보니 이건 인수를 넣는 쪽에 타입을 지정해주려는 나의 습관과 고정관념의 문제였고 RN에서는 RenderItem에 타입을 지정해주는 아주 간단한 Type Props를 제공해준다. import {FlatList, ListRenderItem} from 'react-native'; ... type TRenderItemProps = { a : string; b : number; ... } const RenderItem : ListRend..