분류 전체보기229 [React Native] Navigation에 대하여 React Native에서 네비게이션은 앱의 다양한 화면 간의 전환 및 탐색을 관리하는 데 사용되는 것이다. React Native에서는 다양한 네비게이션 라이브러리가 있지만, 가장 널리 사용되는 React Navigation이다. 일반적으로 React에서 사용되는 react-route의 역할을 한다고 보면 된다. React Navigation은 여러가지 내비게이터를 제공하고 있는데 내가 만들어낼 기능의 성격에 따라 맞춰서 사용하면 된다. 1. 여러가지 Navigator 1) Stack Navigator createStackNavigator 함수를 통해 Stack Navigator 생성 Stack이라는 이름으로 알수 있듯, Stack 자료 구조처럼 화면을 쌓아올리는 형식으로 동작하며, 뒤로가기 버튼으.. 2024. 1. 17. [React Native] FlatList와 SectionList의 차이 FlatList와 SectionList 모두 반복되는 비슷한 요소들, 배열의 요소들을 표현하기 위한 컴포넌트이다. 하지만 이름에서 추론할 수 있듯이 FlatList는 단일 배열을 사용하여 목록항목을 표시하고, SectionList는 섹션으로 구분된 데이터를 다룰 때 사용되는데, 그렇기 때문에 섹션은 헤더와 함께 목록 형태로 표시된다. 1. FlatList Component의 특징 가상화된 리스트 아이템을 제공하여 대량의 데이터를 효율적으로 처리할 수 있다. 화면에 표시되는 아이템만 렌더링되기 때문에 성능이 향상되는데, keyExtractor prop을 사용하여 각 아이템에 대해 고유키를 제공할 수 있다. Javascript의 map 과 같은 기능이지만, 여러 유용한 props가 있기 때문에 상황에 따라m.. 2024. 1. 16. [React Native] Bridge란 무엇인가? React Native로 크로스플랫폼 앱개발이 가능하다. Javascript로 개발해서 Android와 ios앱 둘을 동시에 만들 수 있는 데 이걸 어떻게 하는 것일까? React Native의 Bridge는 Javascript 코드와 네이티브 코드 사이의 통신을 가능하게 하는 중요한 메커니즘이다. 1. Bridge의 동작과정 React Native에서 Bridge의 동작과정은 다음과 같다 1) Javascript Bundle 생성 Javascript로 작성된 React Native코드는 앱이 실행될 때 JS Bundle이라는 형태로 생성된다. 이 JS Bundle은 네이티브 코드에서 실행될 수 있는 형태로 변환된다. 2) Bridge 생성 JS Bundle이 실행되면, JavaScript 코드와 네이티.. 2024. 1. 15. [React Native] 개발환경 설정할 때 자주 생기는 에러 개발환경 설정하는 것은 그렇게 원활하고 쉽지는 않은 일이다. 설치해야하는 것들도 많고 거쳐야하는 과정들이 많기 때문이다. 아래는 개발환경 구성하며 내가 겪었었던 에러들과 그 해결과정을 정리한 것이다. 1. cocoapods 설치할 때 ruby 버전 때문에 생기는 오류 cocoapods 설치하려고 했더니 자꾸 에러가 뜨면서 설치가 완료되지 않았다. sudo gem install cocoapods # 이걸 실행하려고만 하면 에러터짐 ERROR: Error installing cocoapods: The last version of activesupport (>= 5.0, < 8) to support your Ruby & RubyGems was 6.1.7.4. Try installing it with `gem .. 2024. 1. 12. [React Native] React Native 개발환경 세팅하는 방법 나의 OS환경은 Apple M1 Pro, Ventura 13.5이다. VSCODE에서 run 했을때 시뮬레이터로 켜지는지 안켜지는지 확인해야한다. ios는 시뮬레이터를 직접 실행하지 않아도 xcode가 실행되면서 실행된다 그러나 android는 android studio를 실행하고, 실행 디바이스 설정 후 실행을 직접 시켜준후 run 해야 앱이 실행된다! 1. Brew 설치 Homebrew는 Mac에서 필요한 패키지를 설치하는 도구이다. brew를 통해 여러가지 패키지를 편리하게 명령어 하나로 설치할 수 있다. https://brew.sh/ko/ # 설치 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/i.. 2024. 1. 12. [Flutter] Dart & Flutter 앱개발 <1> 1. 동기 원래는 모바일앱개발에 대하여 아 언젠가는 해보고싶다 정도로 막연하게만 생각했지 실제로 하게 될줄 몰랐는데 올해에 어쩌다 리액트 네이티브 프로젝트에 참여하게 되어서 처음 모바일 개발 경험을 해보았다. 리액트 네이티브도 리액트 기반에 자바스크립트로 이뤄져있어서 완전 생소하거나 그랬던 것은 아니었지만 한번도 해보지 않은 개발환경에다가 빌드, 배포도 완전 처음 경험해보는 일이었어서 많이 어렵기도 하고 힘들기도 했다. 사실 이 프로젝트 참여하기 전에 할 일이 없을 때 틈틈이 리액트 네이티브로 개발해보지 않았더라면 정말 더욱 더 힘들었을 것이다... 하지만 이런 계기를 덕분에 모바일앱개발에 더욱 적극적인 관심을 갖게 되었고, 내년에 회사에서 신규 앱서비스 개발 계획이 있는데 그때 리액트네이티브 또는 플러.. 2023. 12. 22. 이전 1 ··· 4 5 6 7 8 9 10 ··· 39 다음
