본문 바로가기

전체 글

 (138)
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을 뉴스 스크랩 앱으로 재구성했고, 여기에 소셜 기능을 추가했습니다. 다른 뉴스 앱보다 시각화와 북마크 기능에 중점을 두었습니다. 내부 브라우저에서 사용자가 자주 찾는 언론사를 즐겨찾기에 추가하고, 맘에 드는 기사를 요약 정보와 함께 스크랩하여 메모 형태로 저장해 주는 유틸리티입니다. 버튼은 왠만하면 아래에 배치하였고, 개수를 최소..
외주 문의 필요한 기능을 꼼꼼하게 적어주셔야 정확한 기간과 견적을 낼 수 있습니다. 그리고 정확한 업무파악을 위해 질문을 많이 하는 편이므로 이해 부탁드립니다. 문의: kwonjoondong@gmail.com 최근 작업 인스타그램 클론코딩 인스타그램 내 채팅 기능 NGINX + HTTPS + NodeJS + PM2 도커 구글 맵에 클러스터링 적용 (직방 지도 같은 기능) ★ 뉴스 매니저 - 뉴스 기록 및 공유 ★ ☆ 1등 오답노트 - 편리함 1등 기능도 1등 ☆ 모바일 앱 리액트 네이티브로 작업합니다. 1등 오답노트, 뉴스 매니저, 인스타그램 클론코딩에 있는 내용 외에도 공개된 리액트 네이티브 대부분의 기능을 적절히 사용 및 배치할 수 있습니다. 웹 리액트 또는 부트스트랩으로 작업하며, 반응형으로 제작합니다. PC..
[자체제작] 유튜브 플레이어 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를 연결합니다...

티스토리툴바