썬이의 IT세상

CSS 스타일링 코드처럼 코드베이스에서 같은 형식으로 되어 있는데 다른 값들이 있어 찾기가 불편했던 경험이 있었다면IDE에서 "정규식으로 찾기" 기능을 이용해보면 좋을 것 같다. 나의 경우에는 레거시 코드에서 모바일 디바이스마다 반응형 UI를 위해 선언해둔 전역 상수 REM 값을거리 속성 뿐만 아니라 border값 등에도 들어가서 이 코드들을 모두 지워주고 싶었다. 예를 들면 반응형 값을 주기 위한 상수를 REM 이라고 하면,width : 432 * REM 과 같이 거리 속성만을 주어야 하는데borderRadius: 16 * REM 처럼 굳이 들어가지 않아도 될 속성에도 반응형 값을 곱해주고 있었다(REM은 로그 찍어보니 거의 다 소숫점)실제로 관련된 코드에서 Sentry 에러도 떨어지기도 했고 해서 이..

React Native에서 @tanstack/react-query의 useInfiniteQuery를 사용하던 중, 갑자기 앱이 크래시되면서 다음과 같은 에러 메시지를 보신 적 있나요?TypeError: observer.getCurrentResult is not a function 처음엔 코드에서 무언가 잘못됐나 싶었지만, 알고 보니 React Native와 @tanstack/react-query 최신 버전 간의 호환성 문제가 원인이었습니다. 오늘은 이 문제를 어떻게 해결할 수 있었는지 정리해보려 합니다. React Native 프로젝트에서 다음과 같이 useInfiniteQuery를 사용하고 있었습니다.const { data, fetchNextPage, hasNextPage, isFetching..

✨ 시니어 개발자가 된다는 것의 의미개발자 커리어를 시작하고 몇 년이 지나면 자연스럽게 떠오르는 질문이 있습니다.“나는 언제 시니어가 되는 걸까?” 혹은 “어떻게 해야 시니어가 될 수 있을까?” 라는 고민이죠.단순히 연차가 쌓인다고 시니어가 되는 것은 아닙니다.시니어 개발자는 자신만의 작업을 넘어, 팀과 조직, 제품 전체의 방향을 함께 고민하는 사람입니다.🔍 주니어와 시니어의 가장 큰 차이점✅ 문제 해결 능력의 깊이와 넓이주니어: 문제를 “해결할 수 있는가”에 집중시니어: 더 나은 방식으로, 재발되지 않도록 해결할 수 있는가를 고민예: 버그를 고치는 것뿐 아니라, 유사 문제 방지와 구조 개선까지 고려✅ 커뮤니케이션과 협업이해관계자(디자이너, PM 등)와의 소통코드보다 말이 중요할 때가 있음✅ 멘토링과 ..

아마 제목과 같은 에러를 확인했다면,iOS에서 Firebase Cloud Messaging (FCM) 토큰을 가져오는 데 실패했거나실제로 FCM 관련 동작에는 이상이 없으나 터미널에 error/warn 로그가 자꾸 쌓여 스트레스를 받고 있었을 것이다. 나는 후자의 경우였는데, FCM 관련 동작에는 이상이 없었지만 iOS에서 No APNs No APNS token specified before fetching FCM Token 에러 메시지가 자꾸 노출되고 Sentry에도 계속 등록되었기에 무조건 수정해야만 했다. 오류의 원인을 찾아보니iOS에서 FCM 토큰을 가져오기 전에 Apple Push Notification Service(APNS) 토큰이 제대로 등록되지 않았을 때 발생한다고 한다. 내 앱 코드상에..

지원은 원티드 플랫폼에서 진행했고, 지원 후 서류합격 안내까지 이틀정도 걸렸던 것 같다.메일로 서류합격 안내와 함께 코딩 테스트 전형이 있을 것이라는 안내도 받았고,머지않아 추가로 코테 전형 안내 메일을 받게 되었다. 프로그래머스나 백준 문제를 평소에 풀어보지 않았고,실무때도 알고리즘은 내가 작성하는 것보다 훨씬 높은 수준의 코드를 작성해주시는 gpt 형님이 계셨기에생전 처음 보게 될 코테는 나에게 설렘이자 조급함으로 다가왔다. 다행히 CJ E&M 측에서 제시해 준 일정에는 1-2주 정도의 여유가 있어후다닥 프로그래머스 level 1 정도의 문제를 풀면서 감을 익혔고쇼츠나 릴스를 보던 시간에는 다른 개발자분들의 코테 기출문제 풀이를 보면서급하게 준비했었던 것 같다. 코딩 테스트는 내가 원하는 시간에 테스..

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..