프로젝트 (19) 썸네일형 리스트형 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에 저장되는데, 사용자 정보를 왜 다른 데이터베이스에 다시 저장하나요? 다른 데이터와의 연동때문입니다. 사용자로 부터 데이터만 생성되는 경우는 굳이 사용자 정보를 데이터베이스에 다시 복제할 필요가 없.. [Lambda + Prisma2+리액트] 인스타그램 클론 코딩 [인스타그램 클론코딩] 제작 관련 포스트 목록 ★ 채팅기능 추가: [인스타그램 클론코딩] 채팅기능 추가 ★ 노마드 코더님의 인스타그램 클론코딩 강의에 기반하고 있습니다. 자바스크립트와 JSX 코드에 익숙하신 분이나 위 강의를 수강하신 분에게 도움이 될 것 같습니다. iOS 작동 영상 [인스타그램 클론코딩] iOS 작동 영상 웹 작동 영상 [인스타그램 클론코딩] 웹 작동 영상 노마드 코더님의 강의와 다른점은 무엇인가요? 1. Prisma1에서 Prisma2로 변경 강의는 백앤드에서 Prisma1을 사용했습니다. 저는 Prisma2를 사용했는데요. 다음과 같은 Prisma1의 문제점 때문이었습니다. GraphQL 서버와 Prisma 서버를 별도로 구현해야 합니다. 자바 환경에서 동작하기 때문에 메모리 문제도.. [BLE] Noise Detector 개요 / 목차 / 동영상 개요블록 다이어그램과 핵심 변수/함수를 사용하여 핵심 알고리즘을 표현했습니다. 사실 이번 프로젝트를 만들면서 필기한 분량이 2천원짜리 노트 한권 분량입니다. 프로젝트와 관련된 기초적인 부분과 비슷한 내용을 조금씩 수정하면서 다시 그린 것이 대부분이지만, 대부분의 내용을 삭제하고 매우 핵심적인 부분만 포스팅했습니다. 프로젝트는 전체 시스템, 하위 시스템을 설계할 때마다 블록 다이어그램을 그리고, 그 그림에 따라 코드를 작성하거나 화로를 만들었습니다. 설명에 그려진 그림들은 큰 틀에서 제가 이번 프로젝트를 설계하는 과정과 일치합니다. 회로, BLE(Bluetooth Low Energy) 프로토콜, 자바, 안드로이드에 대한 기초적이 부분까지 설명하기에는 양이 너무 많기 때문에 "CAN 통신" 처럼 자세히 설명.. [AWS IoT 프로젝트] AWS LED Button 개요 / 목차 / 동영상 개요 결론적으로는 안드로이드 앱으로 ESP32와 연결된 LED를 켜고 끄는 아주 간단한 프로젝트입니다. 이번 프로젝트의 목표는 하드웨어를 제어하는 것이 아니라, 안드로이드 앱과 임베디드 시스템이 암호화된 웹 클라우드를 매개로 비동기적 통신 시스템을 구현하는 것이기 때문에 제어할 하드웨어 영역을 의도적으로 줄였습니다. 또한 단순한 장거리 통신은 WIFI를 사용하고 ESP32에서 HTTP 서버를 구축하여 구현할 수도 있지만, 아마존 웹 서비스(AWS)를 사용한 이유는 SDK에 보안과 통신을 담당하는 API가 이미 구현되어 있고, 또한 주요 언어, 플랫폼에 대해 제공되기 때문입니다. AWS C언어 SDK는 리눅스용이지만 ESP32 SDK에서 이미 포팅해서 제공하고 있었습니다. Android SDK 링크 제 블.. 이전 1 2 3 다음
