프로젝트 (15) 썸네일형 리스트형 [1등 오답노트] 입체 자르기 추가 1등 오답노트 사용 시간은 대부분 저녁 시간대인데, 이 시간에 문제를 수직 각도에서 촬영하면 그림자가 생길 가능성이 높습니다. CamScanner같은 스캔 앱에서는 기울여서 그리림자 없이 촬영한 후에 Perspective Crop 기능으로 수직 각도에서 촬영한 것처럼 변환시킬 수 있습니다. 1등 오답노트에 Perspective Crop 기능이 없는 것이 아쉬웠습니다. Scanbot 리액트 네이티브 라이브러리가 있지만 무료가 아니었습니다. 최소 2만 유로부터 시작하는데 부담스러운 가격입니다. 무료인 react-native-perspective-image-cropper 라이브러리도 있지만, 인터페이스도 별로고, 안드로이드에서 테스트해보니 이상한 영역이 크롭되어 사용하지 못했습니다. 그래서 직접 만들었고, 코.. [App] 1등 오답노트 출시 학생이나 고시생을 위한 오답노트 앱입니다. 최대한 단순하면서도 많은 정보와 기능을 담으려고 노력했습니다. 아래 랜딩페이지에서 기본 정보와 스토어로 이동할 수 있는 버튼이 포함되어 있습니다. 일등오답노트 편리함 1등 기능도 1등 오답노트 앱 xn--o80b61as7bhx6adrbf25a.kr 모든 기능을 어떻게 구현했는지 자세히 설명하지는 않고, 주요 기능에 어떤 라이브러리를 사용하고 고려했으며, 구현할 때 겪었던 문제나 고민을 위주로 말씀드리겠습니다. 사용자 인터페이스 사용자가 정리한 오답들을 구글 Keep처럼 2열로 벽돌 쌓듯이 보여줍니다. 하지만 ScrollView 안에서 그냥 쌓기만 하면 안됩니다. 50~100개가 넘어가면 특히 안드로이드에서 버벅거리기 때문입니다. (탈락) FlatList는 다중 .. [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.. [인스타그램 클론코딩] 채팅기능 추가 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 토큰을 사용하여 자동으로 관리해 주기 때문에 신경쓰지 않아도 됩니다. 그리고 클라이언트(앱, 웹)에서 로그인한 사용자 정보를 사용하여.. 이전 1 2 다음
