본문 바로가기

리액트 네이티브

(15)
리액트 네이티브 튜토리얼 기능 구현3 - Example 1편과 2편에서 만든 Context와 Component를 사용해서 튜토리얼을 표시해 보겠습니다. 실제 동작은 1등 오답노트 앱에서 더 자세히 확인하실 수 있습니다. 먼저 1편에서 만든 TutorialProvider로 앱의 최상단을 감싸줍니다. 그리고 다음과 같이 구멍과 텍스트 정보를 만들어 줍니다. 터치할 때마다 hole_1 ▷ hole_2 ▷ hole_3로 이동하기 위한 정보들입니다. 마지막으로 Settings 스크린에 다음 코드만 추가해 주면 됩니다. 하지만 저는 Settings 스크린에서 튜토리얼이 끝난 후 이용약관 스크린으로 이동시키기 때문에 아래와 같이 구현했습니다. 처음에 firstLaunch에 의해 useEffect가 트리거되지만, Settings 컴포넌트가 실행되기 전에는 firstLaun..
리액트 네이티브 튜토리얼 기능 구현2 - Component 1편에서 만든 TutorialProvider에 사용된 Tutorial 컴포넌트를 만들어 보겠습니다. Tutorial 컴포넌트의 형태입니다. HoleInfo 타입은 1편 마지막 부분을 참조해 주세요. 우선 4개의 훅이 사용됩니다. DescriptionPosition 타입은 1편 마지막 부분을 참조해 주세요. HoleView는 한 번에 여러개의 구멍을 표시할 수 있습니다. 하지만 저는 한 번에 한 개의 구멍이 터치할 때마다 이동하는 UI를 구현하였습니다. 그래서 holes는 항상 요소가 1개인 배열입니다. firstHole는 매개값으로 입력되는 holes에서 첫번째 요소의 x, y 좌표에서 사이즈만 0으로 변경한 더미 값입니다. 처음에 구멍을 표시할 때 점점 커지는 효과를 넣기 위해서 만들었습니다. 마지막에..
리액트 네이티브 튜토리얼 기능 구현1 - Context, Libraries 1등 오답노트 앱을 출시했는데 사용자들이 앱을 다운로드받아도 참여율이 적어서 고민이었습니다. 일단 인터페이스가 생소해서 사용자들이 공감하지 못하는 것인지 의심했습니다. 그래서 아래과 같은 튜토리얼 기능을 구현해 보았습니다. 어떻게 구현할 것인가? 일단 처음에 두 가지 방법을 생각했었습니다. 화면마다 튜토리얼 데이터와 컴포넌트를 관리하는 방법 Context에서 모든 페이지의 튜토리얼 데이터와 컴포넌트를 관리하는 방법 이 중에서 두 번째 방법을 선택했습니다. 1등 오답노트 앱은 단순해 보여도 내부적으로 은근히 많은 화면이 있고, 설명해야 할 중요 기능만 23개였습니다. 화면마다 튜토리얼 데이터와 컴포넌트를 관리한다면 중복되는 코드가 많아질 것 같았습니다. 그리고 탭 네비게이션에 포함되지 않은 화면은 새로 로..
리액트 네이티브 앱의 소스 코드 보호 create-react-app로 생성한 프로젝트는 android/app/build.gradle 파일에서 Hermes와 Proguard 설정을 할 수 있도록 되어 있습니다. Hermes는 자바스크립트 코드를 바이트 코드로 변환하여 실행시키는 엔진으로 성능이 향상된다고 합니다. 바이트 코드로 변환되는 과정에서 소스 코드가 직접 노출되지 않지만, hermes-engine-cli를 사용하여 디컴파일할 수 있습니다. Proguard는 소스 코드를 난독화해 주는 도구입니다. Proguard 설정을 하는 것이 소스 코드를 보호하는데 더 효과적이라고 합니다. 그런데 build.gradle 파일에서 def enableProguardInReleaseBuilds = true로 설정하고 릴리즈 모드로 앱을 실행해 보면 앱이 ..
[인스타그램 클론코딩] 댓글 UI 구현3 - 원하는 컴포넌트 위치로 스크롤 상용 앱을 만들 때 이런 UI는 FlatList를 사용해야 합니다. FlatList에도 비슷한 기능이 있지만 추가로 고려해야 할 것이 더 있어보입니다. [인스타그램 클론코딩] 댓글 UI 구현1 - 여러가지 대안들.. 그리고 문제점 포스트에서 ScrollView 안에서 TextInput을 사용하는 여라가지 방법을 테스트해 본 결과, 이 방법을 포기하고, 결국 인스타그램의 댓글창 표시 방법을 카피해 보기로 했습니다. 내부 로직은 다르겠지만, 비슷하게 구현해 봤습니다. 댓글 달기... 버튼이 스크롤뷰의 어디에 있든지 댓글 입력창과 겹쳐지는 위치로 오게 만들어야 합니다. 댓글 입력창과 겹쳐지는 위치는 어떻게 구할 수 있을까요? onLayout 속성을 사용해서 구할 수 있습니다. onLayout 속성으로 부터 컴..
[인스타그램 클론코딩] 댓글 UI 구현2 - 스택 네비게이션을 이용한 댓글창 스크롤뷰 안에서 댓글 달기.. 버튼을 클릭하면 화면 밑에서 키보드와 함께 댓글 입력창이 나오도록 구성해 보겠습니다. [인스타그램 클론코딩] 앱 로그인 구조 포스트에서 로그인에 성공하면 DummyNavigation으로 이동한다고 했었습니다. DummyNavigation은 스택 네비게이션이면서 NavController 네비게이션의 스크린입니다. 그리고 다음과 같이 MainNavigation과 Comment 두 개의 스크린을 포함하고 있습니다. MainNavigation 안에서 다음 코드를 실행하면 Comment 스크린이 생성되면서 MainNavigation 스크린 위로 올라옵니다. 이때 파라미터로 me과 postId에 대한 정보도 함께 넘겨줍니다. const GoComment = () => { navigat..
[인스타그램 클론코딩] 댓글 UI 구현1 - 여러가지 대안들.. 그리고 문제점 댓글을 입력하기 위해 가장 기본적인 텍스트 입력기인 TextInput을 사용해 보기로 했습니다. TextInput은 Home 스크린에 있는 ScrollView 안에서 랜더링되는 다수의 Post 컴포넌트마다 포함되어 있습니다. Home.js 결과 및 문제점 iOS에서 키보드가 나타날 때 TextInput을 가립니다. 영상의 스크롤은 모두 직접한 것입니다. TextInput이 화면 상단에 있어서 키보드와 겹치지 않더라도 뭔가 어색합니다. 영상으로 확인할 수는 없지만 실제 ScrollView의 높이는 키보드 만큼 작아졌습니다. 그렇다고 ScrollView 내부 높이까지 작아지는 것은 아니고, 스크롤 좌표에도 영향이 없기 때문에, 키보드가 TextInput을 가립니다. 멀티라인이 지원되지 않습니다. 다음줄로 넘..
[인스타그램 클론코딩] 사진 업로드 구현2 - AWS S3에 비동기 업로드 (Promise 이용) 여담 처음엔 백앤드로 이미지를 전송한 다음 백앤드에서 다시 AWS S3에 저장하는 것이 비효율적이라고 느껴졌지만, S3의 접속 경로가 그대로 노출될 수도 있기 때문에 인증 기능이 포함된 백앤드를 경유하는 것이 맞다고 생각합니다. 아니면 제가 사용한 인증 방법은 AWS Cognito로 부터 인증 토큰을 받아오는 방식이기 때문에, S3 버킷을 Cognito에서 인증된 사용자만 접근하도록 설정한다면, 로컬 디바이스에서도 충분히 업로드할 수도 있을 것 같습니다. 예전에 AWS LED Button 프로젝트를 진행할 때 비슷한 작업을 해봤었는데, 다시 한 번 살펴봐야 겠습니다. 참조: [AWS LED Button] 어플리케이션 (1) : 시스템 흐름 전 S3에 그냥 업로드 했습니다. 실제 서비스에서는 수정되어야 할..