썬이의 IT세상

The app identifier "org.reactjs.native.example.awesomeProject" cannot be registered to your development team because it is not available. Change your bundle identifier to a unique string to try again. 위와 같은 에러로 Xcode 빌드 시 에러가 난다면Signing & Capabilities > iOS 에서 Bundle Identifier 를 변경해주어야 한다. Bundle Identifier는 말그대로 고유한 번들ID 값인데,수많은 개발자들이 토이 프로젝트를 포함해 신규 프로젝트를 만들고자 할 때sampleApp, awesomeProject 와 같..

앱에서 ScrollView나 Flatlist 등을 사용하여 스크롤링 페이지를 구현할 때스크롤이 길게 되어 있거나 회원가입 프로세스처럼 페이지간의 버튼 간격을 맞춰야 할 경우하단 플로팅 버튼(bottom floating button) 형식을 많이 사용하게 된다.  위 이미지처럼, 스크롤 할 때 버튼의 배경색과 ScrollView 내의 배경색이 상이할 경우,구분선이 있기에 뭔가 자연스럽지 못한 부분을 확인할 수 있다.이 상황에서 자연스러운 연출을 원한다면, 하단 버튼의 top 영역에 모자이크처럼 뿌옇게 만들어주면어색함이 덜 할 것 같아 Linear-Gradient를 통해 구현해보았다. 구현 방법은 매우 간단했다. 보통 하단 플로팅 버튼을 구현할 땐 ...your components .....

앱 개발자들이 URL을 통해 앱 내 특정 화면으로 유저를 자연스럽게 연결하는 Firebase Dynamic Links(FDL)는 그동안 다양한 상황에서 유용하게 사용되었습니다. 하지만 2024년 8월 25일부로 FDL 서비스가 종료된다는 소식이 발표되면서, 이제 이 기능을 대체할 솔루션을 고민해야 할 때입니다.이번 포스팅에서는 Firebase Dynamic Links 종료에 따른 대안을 제시하고, 서비스 전환 시 고려해야 할 사항을 다뤄보겠습니다.📌 Firebase Dynamic Links가 종료되는 이유Google은 FDL 종료 이유를 명확히 밝히지 않았지만, 대체로 비용 절감 및 서비스 정비를 위해 중복되는 서비스를 종료하거나 통합하는 경우가 많습니다. 이는 Google의 다른 제품군이나 오픈소스 ..

사용자의 앨범에 접근하거나 카메라 촬영을 하여 이미지를 등록하는 등의 기능은 거의 대부분의 앱에서 사용된다. React Native에서 사용자의 앨범과 카메라에 접근하여 이미지 파일을 불러오는 라이브러리는 다양하며, 라이브러리마다 해당 기능을 사용하는 방법이 다르지만 보통 함수 내에서 Promise를 호출하여 사용자 동작에 따른 callback으로 처리하는 방법이 대다수이다.컴포넌트 내에서 카메라 기능을 호출하는 함수, 사용자의 앨범에 접근하는 기능을 하는 함수, 이에 따른 처리 로직 등을 선언해야 하고 이러한 기능을 하는 컴포넌트가 다수개 있다면 일일이 컴포넌트 내에 선언하는 것보다 전역으로 사용 가능한 공통 모듈을 작성하는 편이 유지 보수와 확장성 측면에서 훨씬 더 유리할 것이다.만약 함수가 컴포넌트..

요즘 시장에서 도메인에 대한 분석은 아주 중요한 부분입니다.아무리 잘 만들어진 앱이라도 사용자에게 불편한 경험을 준다면 그들은 가차없이 앱을 지우고, 이전의 좋지 않은 경험 때문에 신규 버전이 나와도 떠난 사용자들이 다시 돌아올 가능성은 거의 희박합니다. 이러한 불상사를 막기 위해 우리는 앱에 사용자의 행동을 분석할 수 있는 도구를 반드시, 그리고 꼼꼼하게 세팅해두어야 합니다.RN 앱에서 보통 사용되는 사용자 행동 분석(PA, Product Analysis)툴은 믹스패널(Mixpanel), GA4(Google Analytics 4), 앰플리튜드(Amplitude) 등이 있으며, Firebase가 구글에 인수된 이후 지속적인 관심과 업데이트를 통해 GA4보다 사용성이 좋은 Firebase Analytics..

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

끝나지 않을 것 같던 더위도 슬슬 사그러져가니바람쐬러 가시는 분들이 많아진 것 같은데요!저도 저번 주말, 기분전환 겸 영종도로 드라이브를 다녀왔답니다 :) 날씨가 시원해져도 아직은 여름이라 어떤 메뉴가 좋을 지 고민되더라구요!그러다 새로 생긴 파스타집이 있다고 해서 바로 달려갔습니다 😄  투파인드피터 영종하늘도시점인천 중구 하늘중앙로225번길 4 201호🚗 주차장 넓음!🕘 운영시간 11:00 ~ 22:00 (라스트오더 21:00) 네이버 예약도 열려 있는데, 토요일 12시쯤 방문해도 매장이 넓어서 그런지 아직 자리가 널널하더라구요 👍오픈한 지 얼마 되지 않은 가게라 가게 측에서도 직접 방문을 권장하시더라구요!건물 자체도 생긴 지 얼마 되지 않아 주차장 자리도 정말 널널하답니다 🙆‍♂️  매장 내..

현재 시간에서 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..

사용자가 스토어에서 앱을 설치할 때, 안심하고 앱을 다운받는데에 가장 중요한 지표가 되는 것은 단연 스토어 내 리뷰라고 볼 수 있다.특히 내가 원하는 기능을 하는 앱을 검색하면 적어도 2개 이상은 비슷한 앱 리스트가 나오는데, 이럴 때 스토어 리뷰를 보고 앱 사용성이나 얼마나 많은 사용자들이 최근까지도 앱을 이용하고 있는지 미리 파악하고 다운받게 된다. 그런데 반대로 내가 어떠한 앱을 이용하고 있는 사용자일 때를 생각해보면, 서비스를 이용할 때에만 앱을 사용하지이 앱을 사용하면서 만족감을 느꼈다 할지라도 스토어까지 찾아가서 리뷰를 작성했던 경험은 없었다.단, 리뷰를 작성해달라고 자연스럽게 앱 내에서 팝업으로 요청이 오면 기쁜 마음으로 리뷰를 작성해주곤 했다.  자주 사용하는 앱에서 위와 같은 모달 팝업을..

처음 개발을 시작할 때는 그저 '방법론'에 불과했던 TDD는 이제 개발 언어나 프레임워크를 막론하고 사용자에게 보다 우수한 품질의 서비스를 제공하기 위한 필수적인 '개발 과정'이 되어가고 있다. 내가 개발하고 있는 앱도 신규 버전을 계속 업데이트 하면서 새로운 기능 때문에 기존 기능에서 충돌이 나는 경험도 있었는데, 이미 테스트가 된 기능이니 신규 feature로 나가는 부분만 테스트하고 기존 부분에서는 테스트하지 않고 배포했기 때문에 발생했던 이슈였다. 물론 TDD에 대해 고려하지 않았던건 아니다.해야하지만, 테스트 코드를 작성하는 시간에 요구사항을 더 쳐내야지 하는 생각에 나중으로 계속 미뤄왔었다.더이상 이러한 나태함에 빠지지 않기 위해 블로그에도 정리해가며 TDD 도입을 완료할 생각이다. 이번 포스..