개발블로그

리액트 네이티브는 3개의 스레드로 작동한다. 1. javaScript thread2. shadow thread3. main thread 이렇게 세가지 스레드로 분리된 이유는 각각 다른 작업을 하면서 부드러운 화면처리가 가능하도록 만든다. 화면을 그리면서 js계산을 하고, 레이아웃도 가능하도록 할 수 있다. JavaScript thread- js thread에서는 우리가 작성한 리액트 코드가 실행된다. 리액트 코드가 실행된다는 것은 화면을 그리는게 아니라 컴포넌트 함수가 호출되고 JSX가 계산된다는 뜻이다. 컴포넌트 렌더링(JSX 계산), state/props 계산, 비즈니스 로직, api 응답처리, 애니메이션 계산 등이 수행된다.- 리액트 네이티브에서는 Hermes라는 자바스크립트 엔진을 사용한다. 일..

React Navigation은 react native에서 화면이동(routing) 시 사용되는 라이브러리로, 페이지가 쌓이는 구조(stack 구조)를 제공한다. Stack 뿐만 아니라 Tab(하단탭), Drawer(옆에서 열리는 전체메뉴) 등의 화면 이동 방식(네비게이터)도 가지고 있다. 네비게이터들은 서로 중첩이 가능하다. 우리 프로젝트에서는 Stack과 Tab 네비게이터를 사용했고, Stack 내 하나의 화면에 Tab을 중첩하여 사용했다. 📘 기본사용방법Stack 네비게이터를 생성 - 리액트 네비게이션은 내에서 실행할 수 있다.Stack.Screen은 화면의 이름과 렌더링되는 컴포넌트를 지정한다.네비게이터 타입의 키는 Stack.Screen의 name이 될 수 있다. 키의 타입이 undefin..

이번에 새로 만들어야 하는 페이지의 조건은 당근어플처럼상단탭이 있어 이동이 가능하고아이템이 무한스크롤로 정렬되고스크롤 시 탭이 상단에 고정되고중간에 랜덤 아이템이 나오는페이지였다. 조건이 많아 어떻게 구조를 짜야할지에 대해 고민을 많이했다. 1. FlatList vs ScrollView1) 무한 스크롤을 쓰다보니까 처음에는 FlatList로 작업했다- renderItem에서 분기처리해서 각 탭에 맞는 아이템을 렌더링- 고정될 탭 아래에 스크롤은 되지만 공통적으로 들어가는 컴포넌트가 있어 리스트 가공- 고정될 탭은 stickyHeaderIndices로 설정- 랜덤 아이템은 리스트를 또 새롭게 가공이렇게 되다보니 가공에 가공에 가공을.. 데이터가 티기고 티겨지는.. 너무 복잡해졌다또한 리스트는 state로..

문제현상이미지 아이템이 많으면 스크롤 시 버벅거림이 심해져 사용자 경험에 좋지 않은 영향을 주고 있으므로 수정이 필요했다 컴포넌트 구조* 페이지 : MainShop, BrandShop, ProductSearchResult -> 여기서 각각 ScrollView를 사용하고 있다* 컴포넌트 ProductList (FlatList 사용) -> 각 페이지의 ScrollView 안에 ProcudtList를 사용하고 있다 수정방법 1. 무한스크롤너무 많은 이미지를 한번에 보여주고 있어서 30개씩 아이템을 보여주는 무한스크롤을 사용했다. ScrollView의 onScroll 함수를 사용하여 화면의 끝에 닿을 경우 보여주는 아이템 개수(renderCount, renderList)를 수정하는 방식이었다.// Scrol..

🐞 문제상황푸시 알람으로 페이지 진입한 후 댓글 작성 시 작성한 댓글이 반영되지 않음댓글 작성후에는 리액트 쿼리의 쿼리 무효화로 댓글 정보가 리패치 된다 const { mutate: postComment } = useMutation({ // .. onSuccess() { queryClient.invalidateQueries({ queryKey: [type, 'detail', idx, isLogin], }); queryClient.invalidateQueries({ queryKey: ['comment'] }); }, }) 💡 해결과정이것저것 시도해보다가1. 푸시 알람으로 페이지 진입 시 queryClient.getQueryData가 unde..

이전부터 리액트 네이티브 프로젝트에서 ios 시뮬레이터를 실행시키면 절대 한번에 실행되는 법이 없었다. 그래서 그때도 어떻게 에러를 해결했는지 기록해놨었는데, 그걸 참고해도 실행이 안되더라는😂 그래서 또 다시 작성한다. npm run ios로 스트레스 받지 않는 그날을 위해1. pod install깃에서 프로젝트를 받고 npm run ios를 하기 전 pod install(프로젝트에 필요한 라이브러리 설치)을 했다. 하지만 언제나 여기부터 막혔었다. 항상 다른 이유로..😇 이번에는 아래와 같은 에러가 떴다rbenv: pod: command not foundThe `pod' command exists in these Ruby versions:2.7.53.2.2 pod 명령어를 사용할 수 없다는 것은1...

네이티브 모듈로 애디스쿱 sdk붙이는 연습을 해보았다참고로 java를 모르는 사람이기에 생성자를 만들어야하는 것도 코드 짜면서 알게 되어서 중간중간 내용이 뜬금없을 수 있다.. ^-^ android/app/src/main/java/com/…/패키지파일명여기서 모듈파일과 패키지 파일을 생성한다(java)모듈파일초기화미디어 id와 시크릿 key를 등록하고, 광고 실행 시키기 전 준비 작업AdiscopeSdk.initialize(Activity activity, AdiscopeInitializeListener listener)// activity와 listener라는 2개의 매개변수를 받음Activity현재 앱의 화면을 나타내는 객체 → sdk는 화면 전환이나 ui를 제어할 필요가 있으므로 현재 화면이 뭔지 ..

1. react-native-seoul/naver-login 라이브러리 설치  GitHub - crossplatformkorea/react-native-naver-login: 리엑트 네이티브 네이버 로그인 라이브러리리엑트 네이티브 네이버 로그인 라이브러리. Contribute to crossplatformkorea/react-native-naver-login development by creating an account on GitHub.github.comnpm install @react-native-seoul/naver-login --save  2. ios와 안드로이드 각각 설정을 해줘야한다.ios1) Launch Services Queries Schemes 추가 : 네이버 간편 로그인을 하면 네이버 ..

1. 먼저 npm run ios를 했다 Failed to install the app on the device because we couldn't execute the "ios-deploy" command. Please install it by running "brew install ios-deploy" and try again. 👉 ios를 실행시키는 ios-deploy가 설치되어 있지 않다고 함 brew install ios-deploy   2. 새로운 에러Failed to build iOS project. 'xcodebuild' exited with error code '65'. To debug build logs further, consider building your app with Xcode..