본문 바로가기

프로젝트

(14)
[App] 1등 오답노트 출시 3/20 튜토리얼 추가 3/3 구글 드라이브 동기화, PDF 생성, 휴지통 기능 추가 제작 후기 뉴스 매니저 앱에서 일부 기능만 뽑아서 오답노트 앱을 만들어 봤습니다. 학창시절에 문제를 오려려서 오답노트를 만들어 본 적이 있었는데, 책이 심각하게 훼손됐고 만들기도 귀찮아서 포기했던 기억이 났고, 뉴스 매니저에서 사용된 2열 모드(워터풀) 보기가 정리한 문제를 한 눈에 보여주기 적합해 보였습니다. 그리고 스토어에 올라와 있는 오답노트 앱 중 마음에 드는게 없더라구요. 여기에 사진을 촬영하고 이미지 캐시를 삭제해 주는 동작을 추가했는데, 처음해 보았고 운영체제마다 다르게 동작해서 애좀 먹었지만 결국엔 잘 동작하네요. 그리고 2열로 문제를 보여줄 때, 텍스트와 달리 이미지는 가로, 세로 비율을 추출할 수 있어..
[App] 뉴스 매니저 출시 구글 Keep이라는 앱에서 영감을 받아서 리액트 네이티브를 사용하여 뉴스 매니저 앱을 만들어 봤습니다. 뉴스 스크랩 기능에 특화된 Keep이라고 생각하면 되겠습니다. 이를 위하여 내부 브라우저와 네이버 뉴스나 다음 뉴스 같은 뉴스 중개 기능도 제공합니다. 다운로드 https://뉴스매니저.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..
[인스타그램 클론코딩] 채팅기능 추가 expo에서 제공하는 Push Notification 기능과 Context를 사용하여 1:1 채팅 기능을 추가해 봤습니다. firebase도 큰 차이는 없는 것 같습니다. 나중에 react-native로 작업할 때는 firebase를 사용해 봐야 겠습니다. 실시간 채팅 기능을 추가하면서 작성한 대략적인 설계도입니다. 데이터 흐름 UI 구조 데이터 흐름 채팅 기능을 추가하기 위해서 데이터베이스에 Room, Message 테이블을 추가했습니다. Room에는 participants(참가자), subscribers(구독자), messages 스키마가 정의되어 있는데요. A가 B에게 처음 메세지를 전송하면 서버에서 Room을 생성하면서, participants와 subscribers 모두에 A와 B를 연결합니다...
[인스타그램 클론코딩] 관련 포스트 목록 ★ 채팅기능 추가: [인스타그램 클론코딩] 채팅기능 추가 ★ 개요 [Lambda + Prisma2+리액트] 인스타그램 클론 코딩 소스코드 웹 (리액트) 앱 (리액트 네이티브) 백앤드 Cognito Pre-SignUp 이벤트 핸들러 인증 [인스타그램 클론코딩] 회원가입 구조 [인스타그램 클론코딩] API 인증 구조 AWS Amplify란? Amplify 초기화 Cognito 소셜 로그인 추가 (이론) Cognito 소셜 로그인 추가 (실전) - 구글 Cognito Pre-SignUp 트리거 서버리스 프레임워크란? 서버리스 프레임워크 초기화 및 AWS에 연결 [인스타그램 클론코딩] Cognito Pre-SignUp 람다 함수 AWS Lambda 핸들러 구조 리액트 [인스타그램 클론코딩] 웹 로그인 구조 [인..
[인스타그램 클론코딩] API 인증 구조 사용자 데이터를 처리할 백엔드(Back-End)는 누구나 사용할 수 있는 API와 로그인한 사용자가 사용할 수 있는 API를 구분하여 처리할 수 있어야 합니다. 사용자가 AWS Cognito에 로그인하면, Cognito는 ID, Access, Refresh 토큰을 발급해 줍니다. ID 토큰은 Cognito에 가입한 사용자 정보를 암호화한 문자열이고, Access 토큰은 해당 Cognito 풀에 가입한 사용자의 권한을 암호화한 문자열입니다. 마지막으로 Refresh 토큰은 ID 토큰과 Access 토큰을 갱신하기 위해 사용합니다. 갱신은 AWS Amplify가 Refresh 토큰을 사용하여 자동으로 관리해 주기 때문에 신경쓰지 않아도 됩니다. 그리고 클라이언트(앱, 웹)에서 로그인한 사용자 정보를 사용하여..
[인스타그램 클론코딩] 회원가입 구조 사용자가 웹 또는 앱에서 회원가입을 하면서 성(First Name), 이름(Last Name), 이메일 등을 입력하면, 이 정보를 Amplify 모듈을 사용해 AWS Cognito에 보냅니다. Cognito에는 전달받은 사용자 정보를 승인하기 전에 개발자가 그 정보를 가로채서 수정할 수 있도록 Pre-SignUp 트리거를 제공합니다. 이 트리거에 전달받은 사용자 정보를 데이터베이스의 User 스키마에 저장하는 AWS Lambda 함수를 등록해 줍니다. Cognito를 통해 가입하면 사용자 정보가 Cognito에 저장되는데, 사용자 정보를 왜 다른 데이터베이스에 다시 저장하나요? 다른 데이터와의 연동때문입니다. 사용자로 부터 데이터만 생성되는 경우는 굳이 사용자 정보를 데이터베이스에 다시 복제할 필요가 없..