본문 바로가기

전체 글

(134)
[자체제작] 유튜브 플레이어 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를 연결합니다...
NGINX + HTTPS + NodeJS + PM2 도커로 만들기 github repository 최근에 정부과제(예비창업패키지)로 윈도우용 특허 검색 프로그램인 CCPatents를 만들었습니다. CCPatents의 인터페이스는 기획할 때부터 단순함을 추구했기 때문에 매우 간단하지만, 내부적으로는 가용성과 보안에 많이 신경썼습니다. 그 중에 사용자가 키워드별로 동의어를 입력하면 자동으로 수집해서 중앙 서버로 전송하는 기능이 있는데요. 최초 구성도는 다음과 같습니다. 여담 처음에 AWS EC2와 RDS를 사용한 것은 자동으로 Scale-out이 가능하고, Scale-up도 손쉽게 할 수 있었기 때문입니다. 그리고 NGINX와 아파치 중에서 NGINX를 선택한 것은 성능때문이었고, NodeJS를 선택한 것은 최근에 자바스크립트를 많이 다뤄왔기 때문입니다. NodeJS의 멀..
[인스타그램 클론코딩] 관련 포스트 목록 ★ 채팅기능 추가: [인스타그램 클론코딩] 채팅기능 추가 ★ 개요 [Lambda + Prisma2+리액트] 인스타그램 클론 코딩 소스코드 웹 (리액트) 앱 (리액트 네이티브) 백앤드 Cognito Pre-SignUp 이벤트 핸들러 인증 [인스타그램 클론코딩] 회원가입 구조 [인스타그램 클론코딩] API 인증 구조 AWS Amplify란? Amplify 초기화 Cognito 소셜 로그인 추가 (이론) Cognito 소셜 로그인 추가 (실전) - 구글 Cognito Pre-SignUp 트리거 서버리스 프레임워크란? 서버리스 프레임워크 초기화 및 AWS에 연결 [인스타그램 클론코딩] Cognito Pre-SignUp 람다 함수 AWS Lambda 핸들러 구조 리액트 [인스타그램 클론코딩] 웹 로그인 구조 [인..
[인스타그램 클론코딩] 댓글 UI 구현3 - 원하는 컴포넌트 위치로 스크롤 상용 앱을 만들 때 이런 UI는 FlatList를 사용해야 합니다. FlatList에도 비슷한 기능이 있지만 추가로 고려해야 할 것이 더 있어보입니다. [인스타그램 클론코딩] 댓글 UI 구현1 - 여러가지 대안들.. 그리고 문제점 포스트에서 ScrollView 안에서 TextInput을 사용하는 여라가지 방법을 테스트해 본 결과, 이 방법을 포기하고, 결국 인스타그램의 댓글창 표시 방법을 카피해 보기로 했습니다. 내부 로직은 다르겠지만, 비슷하게 구현해 봤습니다. 댓글 달기... 버튼이 스크롤뷰의 어디에 있든지 댓글 입력창과 겹쳐지는 위치로 오게 만들어야 합니다. 댓글 입력창과 겹쳐지는 위치는 어떻게 구할 수 있을까요? onLayout 속성을 사용해서 구할 수 있습니다. onLayout 속성으로 부터 컴..
[인스타그램 클론코딩] 댓글 UI 구현2 - 스택 네비게이션을 이용한 댓글창 스크롤뷰 안에서 댓글 달기.. 버튼을 클릭하면 화면 밑에서 키보드와 함께 댓글 입력창이 나오도록 구성해 보겠습니다. [인스타그램 클론코딩] 앱 로그인 구조 포스트에서 로그인에 성공하면 DummyNavigation으로 이동한다고 했었습니다. DummyNavigation은 스택 네비게이션이면서 NavController 네비게이션의 스크린입니다. 그리고 다음과 같이 MainNavigation과 Comment 두 개의 스크린을 포함하고 있습니다. MainNavigation 안에서 다음 코드를 실행하면 Comment 스크린이 생성되면서 MainNavigation 스크린 위로 올라옵니다. 이때 파라미터로 me과 postId에 대한 정보도 함께 넘겨줍니다. const GoComment = () => { navigat..