본문 바로가기

전체 글

(134)
리액트 네이티브 튜토리얼 기능 구현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개였습니다. 화면마다 튜토리얼 데이터와 컴포넌트를 관리한다면 중복되는 코드가 많아질 것 같았습니다. 그리고 탭 네비게이션에 포함되지 않은 화면은 새로 로..
[App] 1등 오답노트 출시 3/20 튜토리얼 추가 3/3 구글 드라이브 동기화, PDF 생성, 휴지통 기능 추가 제작 후기 뉴스 매니저 앱에서 일부 기능만 뽑아서 오답노트 앱을 만들어 봤습니다. 학창시절에 문제를 오려려서 오답노트를 만들어 본 적이 있었는데, 책이 심각하게 훼손됐고 만들기도 귀찮아서 포기했던 기억이 났고, 뉴스 매니저에서 사용된 2열 모드(워터풀) 보기가 정리한 문제를 한 눈에 보여주기 적합해 보였습니다. 그리고 스토어에 올라와 있는 오답노트 앱 중 마음에 드는게 없더라구요. 여기에 사진을 촬영하고 이미지 캐시를 삭제해 주는 동작을 추가했는데, 처음해 보았고 운영체제마다 다르게 동작해서 애좀 먹었지만 결국엔 잘 동작하네요. 그리고 2열로 문제를 보여줄 때, 텍스트와 달리 이미지는 가로, 세로 비율을 추출할 수 있어..
MySQL 예약 작업 (with Prisma) News Keeper 앱에는 데이터 백업/복원 기능이 있습니다. 그리고 백업 데이터는 최대 한 시간까지만 서버에 저장되도록 방침을 정했습니다. 이것을 구현하기 위해 3가지 방법을 고려했습니다. 1. 백업 API 요청 완료 후에 setTimeout 함수 실행 uploadEncruptedData는 클라이언트에서 전송된 백업 데이터를 데이터베이스에 저장하는 News Keeper 백앤드 함수입니다. 백업을 하고 얻은 ID를 사용하여 일정 시간 후에 백업 데이터를 삭제해 줍니다. uploadEncryptedData() { // 백업 수행, 백업 데이터에 접근할 ID 획득 setTimeout(() => { // ID를 사용하여 백업 삭제 }, 3600000) } 이 방법에는 두 가지 문제가 있습니다. 서버가 다운되..
리액트 네이티브 앱의 소스 코드 보호 create-react-app로 생성한 프로젝트는 android/app/build.gradle 파일에서 Hermes와 Proguard 설정을 할 수 있도록 되어 있습니다. Hermes는 자바스크립트 코드를 바이트 코드로 변환하여 실행시키는 엔진으로 성능이 향상된다고 합니다. 바이트 코드로 변환되는 과정에서 소스 코드가 직접 노출되지 않지만, hermes-engine-cli를 사용하여 디컴파일할 수 있습니다. Proguard는 소스 코드를 난독화해 주는 도구입니다. Proguard 설정을 하는 것이 소스 코드를 보호하는데 더 효과적이라고 합니다. 그런데 build.gradle 파일에서 def enableProguardInReleaseBuilds = true로 설정하고 릴리즈 모드로 앱을 실행해 보면 앱이 ..
[App] 뉴스 매니저 출시 구글 Keep이라는 앱에서 영감을 받아서 리액트 네이티브를 사용하여 뉴스 매니저 앱을 만들어 봤습니다. 뉴스 스크랩 기능에 특화된 Keep이라고 생각하면 되겠습니다. 이를 위하여 내부 브라우저와 네이버 뉴스나 다음 뉴스 같은 뉴스 중개 기능도 제공합니다. 다운로드 https://뉴스매니저.kr 주요 기능 즐겨찾기 스크랩 공유 암호화 백업/복원 하단 지향 사용자 인터페이스 데이터 공유 및 공유 수신 기능 힘들었던 점 인증/데이터 보호 방법 구현 자체가 아니라 정답이라는게 없이 앱의 기능이나 환경마다 다르게 적용될 수 있는 부분이다 보니 다양한 상황을 가정해서 그려보거나 만들어보는 것을 반복하는 것이 힘들었습니다. 사용자 인터페이스 구글 Keep처럼 스크랩한 기사들을 벽돌 형식으로 쌓아서 보여주는 것이 힘들..
외주 문의 필요한 기능을 꼼꼼하게 적어주셔야 정확한 기간과 견적을 낼 수 있습니다. 그리고 정확한 업무파악을 위해 질문을 많이 하는 편이므로 이해 부탁드립니다. 문의: kwonjoondong@gmail.com 최근 작업 인스타그램 클론코딩 인스타그램 내 채팅 기능 NGINX + HTTPS + NodeJS + PM2 도커 구글 맵에 클러스터링 적용 (직방 지도 같은 기능) ★ 뉴스 매니저 - 뉴스 기록 및 공유 ★ ☆ 1등 오답노트 - 편리함 1등 기능도 1등 ☆ 모바일 앱 리액트 네이티브로 작업합니다. 1등 오답노트, 뉴스 매니저, 인스타그램 클론코딩에 있는 내용 외에도 공개된 리액트 네이티브 대부분의 기능을 적절히 사용 및 배치할 수 있습니다. 웹 리액트 또는 부트스트랩으로 작업하며, 반응형으로 제작합니다. PC..