본문 바로가기

전체

 (154)
[App] 1등 오답노트 출시 학생이나 고시생을 위한 오답노트 앱입니다. 최대한 단순하면서도 많은 정보와 기능을 담으려고 노력했습니다. 아래 랜딩페이지에서 기본 정보와 스토어로 이동할 수 있는 버튼이 포함되어 있습니다. 일등오답노트 편리함 1등 기능도 1등 오답노트 앱 xn--o80b61as7bhx6adrbf25a.kr 모든 기능을 어떻게 구현했는지 자세히 설명하지는 않고, 주요 기능에 어떤 라이브러리를 사용하고 고려했으며, 구현할 때 겪었던 문제나 고민을 위주로 말씀드리겠습니다. 사용자 인터페이스 사용자가 정리한 오답들을 구글 Keep처럼 2열로 벽돌 쌓듯이 보여줍니다. 하지만 ScrollView 안에서 그냥 쌓기만 하면 안됩니다. 50~100개가 넘어가면 특히 안드로이드에서 버벅거리기 때문입니다. (탈락) FlatList는 다중 ..
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] 뉴스 매니저 출시 이번엔 1등 오답노트의 베이스가 되었던 뉴스 매니저라는 앱과 제작 후기를 소개해 보려고 합니다. 뉴스 매니저 정말 쉬운 뉴스 관리 앱.직관적인 뉴스 관리 App. 스크랩한 기사를 한 눈에 확인할 수 있습니다. 자주 찾는 언론사를 즐겨찾기에 추가해 보세요. 내가 활동한 내용을 한 눈에 확인할 수 있어요. 나 xn--vg1b7f65r8vjcwg.kr 뉴스 매니저 소개 구글 Keep을 뉴스 스크랩 앱으로 재구성했고, 여기에 소셜 기능을 추가했습니다. 다른 뉴스 앱보다 시각화와 북마크 기능에 중점을 두었습니다. 내부 브라우저에서 사용자가 자주 찾는 언론사를 즐겨찾기에 추가하고, 맘에 드는 기사를 요약 정보와 함께 스크랩하여 메모 형태로 저장해 주는 유틸리티입니다. 버튼은 왠만하면 아래에 배치하였고, 개수를 최소..
[자체제작] 유튜브 플레이어 HTML 파싱을 사용했는데 유튜브 코드가 변했는지 현재 작동하지 않습니다. (2021.04.14) 코딩하면서 화면 구석에 놓고 보려고 만든 유튜브 플레이어입니다. 아래 github에서 소스코드를 확인 및 다운로드받을 수 있습니다. github.com/JoonDong2/electron-youtube-player JoonDong2/electron-youtube-player Contribute to JoonDong2/electron-youtube-player development by creating an account on GitHub. github.com 윈도우 전용이고 맥은 메뉴 설정을 조금 해야하는데 시간되면 맥용으로도 만들어 보겠습니다. 화면이 완전히 로드되야 광고 스킵 기능이 적용됩니다. 주요기능 ..
React-Native-Maps에 클러스터링 적용 인스타그램 채팅기능 구현 관련 포스트를 작성하다가 지루해서 만들어 봤습니다. React-Native-Maps는 안드로이드에서는 구글 지도를, iOS에서는 애플 지도를 사용할 수 있게 해주는 리액트 네이티브 라이브러리입니다. iOS에서도 구글 지도를 사용할 수 있지만 약간의 버그가 있습니다. 그런데 클러스터링 기능이 탑제되어 있지 않습니다. 그래서 편법으로 구현해 봤습니다. 좌표 데이터는 카카오 마크 클러스터러 사용하기에 있는 데이터를 사용했습니다. 클러스터에 포함된 좌표의 개수가 많을 수록 클러스터가 커집니다. 그리고 클러스터를 터치하면, 해당 클러스터에 포함된 정보(좌표 등)를 확인할 수 있습니다. 안드로이드 (LG G7) 작동 화면 react-native-maps-super-cluster나 react..
[인스타그램 클론코딩] 채팅기능 데이터 모델링 이번에 구현한 실시간 채팅에 포함하고 싶었던 기능은 다음과 같았습니다. 특정 사용자를 선택해서 채팅방을 만들 수 있습니다. 특정 채팅방의 알람을 끄거나 켤 수 있습니다. 위의 기능을 구현하기 위한 데이터 모델입니다. Room은 채팅방에 대한 정보를 저장하는 테이블입니다. 특정 채팅방에서 전송된 모든 Message는 해당 채팅방의 Room.messages에 연결됩니다. 특정 채팅방에 참가한 모든 사용자(User)는 해당 채팅방의 Room.participants에 연결됩니다. 특정 채팅방에 전송된 메세지의 알림을 켠 사용자(User)는 해당 채팅방의 Room.subscribers에 연결됩니다. Message는 사용자가 보낸 메세지에 대한 정보를 저장하는 테이블입니다. 사용자가 채팅방에서 메세지를 전송하면, ..
[인스타그램 클론코딩] 채팅기능 추가 expo에서 제공하는 Push Notification 기능과 Context를 사용하여 1:1 채팅 기능을 추가해 봤습니다. firebase도 큰 차이는 없는 것 같습니다. 나중에 react-native로 작업할 때는 firebase를 사용해 봐야 겠습니다. 실시간 채팅 기능을 추가하면서 작성한 대략적인 설계도입니다. 데이터 흐름 UI 구조 데이터 흐름 채팅 기능을 추가하기 위해서 데이터베이스에 Room, Message 테이블을 추가했습니다. Room에는 participants(참가자), subscribers(구독자), messages 스키마가 정의되어 있는데요. A가 B에게 처음 메세지를 전송하면 서버에서 Room을 생성하면서, participants와 subscribers 모두에 A와 B를 연결합니다...

티스토리툴바