Suwoni블로그

[모던웹을 위한 HTML5 + CSS3 입문]이란 책을 읽은 적이 있습니다. HTML5와 CSS3에 대한 다른 책도 읽어봤지만 그 중에서 제일 괜찮다고 생각한 책입니다. 그런데 그 책의 개정판으로 [모던웹을 위한 HTML5 + CSS3 바이블]이 나왔다고 하여 다시 한 번 읽어보고 싶은 마음에 보게 되었습니다. 이 책의 가장 매력적인 부분은 실무에 참고할 만한 내용이 많다는 점입니다. 첫번째 파트는 선택자와 스타일 기본 속성에 대한 내용인데 매번 사용하는 건데도 작업할 때마다 구글링하게 만드는 스타일들이 알기 쉽게 설명되어 있어서 좋았습니다. 제가 제일 인상 깊었던 부분이 두 번째 파트인데요, 레이아웃 구성 예제코드들을 알려주는 파트입니다. 나만의 프로젝트를 만들고 싶지만 UI 구성이 어려워서 포기하신 ..

책을 읽어 본 후 이렇게 단계 하나 하나 친절하게 설명이 된 책이 또 있었나 싶을 정도로, 단계 하나하나 설명이 잘되어 있습니다. 초보자 분들에게는 정말 좋은 책이라고 생각합니다. 요즘 인기있는 언어인 파이썬 그리고 파이썬 웹프레임워크 중 가장 대중적인 Django 프레임워크를 초보자분들이 처음 접하시기에는 가장 좋은 책인 듯합니다.예제 위주이며 초보자 타겟의 서적으로써 프로그래밍을 중급이상으로 하시는 분들에게는 조금 부족하게 느껴지실 수 있는 책이라고 생각합니다.

1. 책을 선택하며인공지능 분야의 공부를 시작하기로 마음먹면서 초심자가 볼 수 있는 책을 찾게되었습니다.요즘들어 엄청 많이 쏟아져 나오고 있는 인공지능 서적들 중에 '파이썬' 과 '교과서' 라는 제목에 이끌려 책을 보게되었습니다.2. 책의 장점- 프로그램 환경설정부터, 파이썬의 기초문법, 인공지능을 공부하기 위한 기초적인 수학지식, 그리고 인공지능의 기초적인 내용이 포함되어 있습니다.- 항목마다 설명이 초심자를 기준으로 세세하고 친절하게 설명합니다. 그림도 충분히 활용하고 있습니다.3. 책의 단점- 책은 인공지능 초심자를 위한 책이며, 인공지능관련한 수학적 지식이나 파이썬 지식을 이미 충분히 가지고 있는 분들에게는 부족함을 느낄 수 있는 책입니다.- 인공지능의 기본적인 설명은 무척 충실하지만, 실질적인 ..

파이썬 웹개발을 공부한 적이 있습니다. 그 중에서도 Django 를 공부하였었지만, 회사의 업무는 Java로 이루어진 Spring.. 파이썬의 간결함과 편안함으로 늘 파이썬에 대한 목마름이 있었습니다. Django가 2버전대로 업그레이드하고, 어떤 기능이 추가되었을까 궁금하던 찰나에 이 책을 구할 수 있게 되었습니다.1. 책의 첫인상책의 첫인상은 어라 개발서적이 무척 얇네 였습니다. 책이 고작 350여 페이지.. 개발서적 치고는 무척 얇았습니다. 2. 책의 특징보통 개발서적은, 레퍼런스 형 책이 있고, 예제 위주의 책이 있는데 이 책은 예제 위주의 책입니다. 간단하게 웹프로그래밍에대한 서술, 그리고 파이썬을 통한 웹개발을 서술하고, Django를 통한 웹개발로 바로 들어갑니다. 바로 예제를 통해 Djan..

요즘 저는 한창 파이썬과 자바스크립트를 공부 중에 있습니다.자바스크립트를 배우면 활용할 수있는 곳들이 많습니다. 웹 화면에서 기본적으로 자바스크립트를 쓸 뿐만 아니라, React, Angular, Vue와 같은 프론트엔드 프레임워크에서 부터, node.js를 활용한 백엔드 서버 구축, 그리고 리엑트 네이티브, 네이티브 스크립트 같은 모바일 개발까지 그리고 최근에는 Tensorflow.js라고 AI분야까지 접근해 볼 수 있습니다.최근에 눈에 띈 책이 있었습니다. '모던 자바스크립트 입문'이라는 책입니다.웹개발자여서 자바스크립트를 어느정도는 알고 있었고, ES6에 대해서도 조금은 알고 있었지만, 충분하지 않아서 ES6에 대한 내용을 살펴보고자 책을 보게 되었습니다. 1. 어떠한 책인가?자바스크립트 기본서 입..

아래 내용은 공부한 것을 정리하므로 틀린 내용이 포함되어 있을 수 있습니다.1. 들여쓰기코딩을 할 때, 가독성을 위해 들여쓰기를 합니다. 하지만 파이썬은 문법적인 강제사항입니다. 코드 블럭을 구성하기 위해 if, for, class, def 등등 을 작성하면서 나오는 : 다음 아랫줄은 들여쓰기를 해야합니다.들여쓰기의 방법은 한칸, 두칸, 4칸, 탭 등 여러가지 방식이 있습니다. 중요한 것은 같은 블록 내에서는 들여쓰기 칸 수가 같아야 합니다. 공백과 탭을 섞어쓰면 안됩니다.for i in range(10): print(i) print(i + 1) 만약 이를 지키지 않으면 IndentationError: expected an indented block 이러한 에러 구문을 보게됩니다.2. 주석프로그래밍 언어..

아래 내용은 공부한 것을 정리하므로 틀린 내용이 포함되어 있을 수 있습니다.1. REPL 이란콘솔 화면에서 파이썬 구문을 입력하면 바로 결과를 반환하고 다시 입력할수 있는 도구.Read Evaluate Print Loop의 줄임말2. REPL 사용Mac 또는 리눅스에서는 터미널 창을 열고, Windows에서는 커맨드창 또는 파워쉘을 오픈한 후, python 또는 python3 를 입력>>> 과 같은 3개의 꺽쇠에서 파이썬 구문을 입력할 수 있음. $ python Python 3.6.3 |Anaconda, Inc.| (default, Oct 6 2017, 12:04:38) [GCC 4.2.1 Compatible Clang 4.0.1 (tags/RELEASE_401/final)] on darwin Type ..

아래 내용은 공부한 것을 정리하므로 틀린 내용이 포함되어 있을 수 있습니다.Python(파이썬) 설치는 Python의 언어를 읽어서 해석 해줄 수 있는 인터프리터와 기본 라이브러리를 설치하게 됩니다. 그리고 이러한 언어 또한 종종 버전 업데이트가 이루어지며, 이러한 버전 업데이트때마다 새롭게 설치를 하고, 구버전으로 개발된 프로그램에 맞추어 다시 인터프리터를 다시 설치하는 것은 무척 비효율적입니다. 그래서 이러한 인터프리터 언어들은 여러 버전을 설치하고 손쉽게 시스템의 인터프리터 환경을 변경시켜주는 version manager가 있습니다. ruby의 rvm, Node.js의 nvm 이 대표적인 예입니다. Python에도 이러한 version manager가 있습니다. pyenv입니다. pyenv를 먼저 ..

이런게 있었다니...Mac용입니다. 이런 기능을 이제야... 코드블럭 기능 입니다.

Models¶ 모델은 당신의 데이터를 표현해주는 객체입니다. 모델은 저장하고자하는 데이터의 field와 behavior를 담고 있습니다.(비즈니스 로직이 담겨 있다는 말이겠지요?) 모델의 맵은 단일 데이터베이스의 테이블로 생성됩니다. The basics: 모델은 django.db.models.Model 상속합니다. 모델의 각 속성은 데이터베이스의 field 입니다. Django는 자동으로 생성된 데이터베이스 엑세스 API를 제공합니다.; 참조: Making queries. Quick 예제¶ 이 예제는 first_name 과 last_name을 가진 Person을 정의합니다. from django.db import models class Person(models.Model): first_name = mod..

Django¶설치 파이썬(Python) 설치¶ 파이썬 웹프레임워크인 Django는 파이썬(Python)이 필요합니다. Django와 함께 사용할 수있는 파이썬(Python) 버전은 아래와 같습니다. Django version Python versions 1.8 2.7, 3.2 (until the end of 2016), 3.3, 3.4, 3.5 1.9, 1.10 2.7, 3.4, 3.5 1.11 2.7, 3.4, 3.5, 3.6 2.0 3.4, 3.5, 3.6 2.1 3.5, 3.6, 3.7 최신 공식 파이썬 설치 링크 : https://www.python.org/downloads/ 추천 파이썬 설치 링크 (Anaconda) : https://www.anaconda.com/download/ Python ..

Firebase Realtime Database의 경우 개발자가 흔하게 접할수 있는 SQL 데이터베이스와는 확연히 다릅니다. JSON형태의 NoSQL 데이터베이스이며 실시간 동기화라는 특별한 기능 덕분에 강력한 기능을 앱상에서 구현할 수 있지만, 그로 인해 형태는 같은 NoSQL 이지만 일반적인 NoSQL 데이터베이스와도 다르게 신경써야하는 부분들이 있습니다. 앞서 Realtime Database챕터와 예제 챕터들을 거치면서 많이 다루어보았지만, 조금 더 익숙해지기 위해 간단한 예시들로 다양한 상황들을 연습해보겠습니다. 1) SQL to Firebase 흔하게 사용하는 SQL쿼리를 Firebase 메소드로 변형해보겠습니다. 예제를 시작하기전에 아래의 링크의 파일을 받습니다. 앞서 예제를 하면서 git에서..

디지털 노마드, 개인적으로 관심이 많아 기대를 많이하고 산 책, 디지털 노마드라는 제목의 이름으로 최근에 나온 책이 두 권 정도 있는데.. 그 중에 하나 골랐습니다. RAON BOOK이라는 이름의 출판사의 '디지털 노마드'.. 솔직히 책읽는 동안 저자가 본인의 디지털 노마드를 유지하기위해 그냥 만든 책이구나 라는 느낌이 강하네요. 솔직히 실망스런 책.. 예를 하나 들어보겠습니다. 중간에 챕터 중에 '무일푼으로 온라인 부동산 만들고 돈버는 법' 이라고 있는데.. 무슨 네이버 까페 생성하는 법에 페이지를 여러 페이지 할당하고 있고... 까페 회원과 유치전략이 중요하다. 스터디모임이나 강의 등을 개설하여 자신의 까페에 쓰도록하자.. 결코 단기간에 되는건 아니다 꾸준히 하면 수익모델을 만든다.. 좀.. 후회막심..

여기까지 따라오시느라 수고하셨습니다. 코드는 완성되었습니다. 앞서도 언급되었지만, Firebase Realtime Database특성상 권한 설정은 무척 중요합니다. 특히나 웹의 경우는 서버의 주요 로직들이 클라이언트에서 드러나기 때문입니다. Realtime Database의 기본 권한은 Authentication 인증 받았을 때 읽기와 쓰기 허용입니다. database.rules.json 파일에 Realtime Database 권한이 입력되어 있습니다. 해당 파일을 배포함으로써 권한 정보를 업데이트할 수 있습니다. Firebase console 창을 통해서도 권한 룰을 변경할 수 있습니다. Firebase console 화면에서 Database항목 에서 규칙 탭으로 들어가면 권한을 변경할 수 있고, 시..

FCM 수신은 앱이 구동되고 있을 때 수신하는 포그라운드로 수신하는 방법과 앱이 구동되고있지 않을 때 백그라운드로 수신하는 방법이 있습니다. 접속하지 않은 유저들에게만 푸시를 보내려고 하기 때문에 백그라운드만 작성할 계획입니다. 포그라운드로 수신하는 방법도 잠시 소개합니다. 아래는 포그라운드로 수신하는 코드입니다. Firebase Messaging을 설정할때 권한을 획득하면서 requestPermission 메소드를 실행했는데, 이 메소드 이후에 적당한 위치에서 실행하면 됩니다.firebase.messaging().onMessage(function(payload) { var options = { body : payload.notification.body , icon : payload.notificatio..

FCM 발송 작업을 클라이언트 코드에서도 할 수 있으나, Firebase Messaging Server API Key가 클라이언트 코드에 포함되는 것은 보안상 좋은 방법이 아니므로 서버를 사용해야합니다. 여기서 처음으로 Firebase Functions 를 이용해볼 것입니다. Functions 는 Firebase 서비스들이 동작하면서 발생하는 이벤트를 받아 서버에서 Firebase Admin을 통하여 Firebase 서비스들을 구동시키는 코드를 수행합니다. Functions가 받는 이벤트는 아래와 같습니다. Reatime Database 트리거 - onWrite() - 실시간 데이터베이스에서 데이터가 생성, 폐기 또는 변경될 때 발생 - onCreate() - 실시간 데이터베이스에서 새 데이터가 생성 시..

요즘 웹브라우저에서는 안드로이드 또는 IOS에서 볼 수 있는 푸시 기능을 지원하는 브라우저가 있습니다. 요즘 Youtube나 Facebook을 이용하시고, Chrome 또는 Firefox 브라우저를 사용하신다면 아래와 같은 푸시를 받아보셨을 것입니다. 이는 서비스 워커라는 브라우저에서 백그라운드로 실행되는 자바스크립트 기반의 워커를 통해서 메세지를 수신하고 노티피케이션을 구동하게 됩니다. 일반적인 웹 워커는 웹앱 내에서 자바스크립트로 멀티쓰레드 처리를 위해 사용됩니다. 서비스워커도 비슷하지만 차이점이 있습니다. 웹워커는 웹앱이 실행되는 동안만 유지되고 실행되지만 서비스워커의 경우 웹앱을 벗어나더라도 브라우저가 실행이 되어 있으면 지속적으로 이벤트를 받고 처리를 수행합니다. 이러한 서비스워커를 지원하는 브..

단순 채팅메세지를 넘어 파일을 서로 주고 받을 수 있는 기능을 구현해보겠습니다. Firebase Storage를 활용하게 됩니다 클립버튼을 누르면 파일을 선택을 할 수 있고, 파일을 선택하면, 팝업 모달 창이 뜨면서 파일 전송 현황을 볼 수 있는 프로그레스바가 움직이며, 최종적으로 파일을 다운로드 받을 수 있는 링크정보가 메세지로 전달 됩니다. 코드를 시작하기 전 Firebase console 로 들어가서 Storage 메뉴로 들어갑니다. 처음 들어가면 아래와 같은 화면이 나옵니다. 시작하기 버튼을 눌러 주세요. 시작하기 버튼을 눌러야 기본적인 권한이 생성이 되고 Bucket이 생성이 되며 Storage를 사용할 수 있는 상태가 됩니다. 이제 코드를 작성해보겠습니다. 아래의 코드를 추가해주십시오. 위 코..

Realtime Database 에는 사용자의 접속상태가 바뀔 때마다 데이터가 변경이 되는 특수한 위치가 있습니다. '/.info/connected' 위치입니다. 해당 위치를 활용하여 접속이 되면 유저리스트 화면에서 접속하였음을 표시해주는 기능을 구현해 보겠습니다. 접속을 하거나 접속을 끊게 되면 UsersConnection 위치에 데이터를 입력하는 코드를 작성하겠습니다. 아래의 코드를 작성해 주세요. 로그인 후 checkOnline 메소드가 실행됩니다. 접속을 하게 되면 앞서 언급한 '/.info/connected' 위치에 true 값이 입력됩니다. 아래의 코드는 '/.info/connected' 위치의 데이터 변화를 감지하여, true 값이 들어왔는지 확인한 후 UsersConnection 아래 자신..

이제 1대 1대화 뿐만 아니라 여러명이 한꺼번에 채팅을 나눌 수있는 채팅방 초대 기능을 만들어 보겠습니다. 우선 채팅방 우측 상단에 '+' 모양의 버튼이 있습니다. 해당 버튼을 누르면 초대할 수 있는 인원들이 보여지는 팝업 모달 창을 띄우도록 하겠습니다. 현재 상태에서도 초대버튼을 누르면 팝업 모달창이 뜨게 됩니다. Git을 통해 소스를 다운 받으시면 맨처음에 초대 버튼을 누르면 모달창이 뜨는 코드가 포함되어 있는 상태입니다. 이제는 모달 창을 채울 유저리스트를 모달창으로 가지고 오겠습니다. 유저리스트는 앱 첫화면 유저리스트의 Dom을 그대로 가지고 와서 채팅방 안에 속한 인원을 제외 시키고, 숨겨두었던 체크버튼을 보이도록 하겠습니다. openChatRoom메소드에 setAddUserList 메소드를 실..

채팅방 리스팅 화면입니다. 아래와 같이 두번째탭에 자신이 속해있는 채팅방 목록이 나오는 화면 입니다. 메세지를 저장할 때 UserRooms위치에도 데이터를 저장했는데 이 위치에 저장된 데이터를 채팅방 리스팅 화면에 활용하게 됩니다. 채팅방 리스트 화면을 만들기 위해 다음 코드를 추가해주십시오. 채팅방 목록을 불러오는 코드입니다. 로그인 인증이 완료된 후 수행되는 setLogin 메소드 안에서 loadRoomList메소드를 호출합니다. loadRoomList메소드를 확인을 해보면 유저리스트와 는 다르게 메세지를 받을 때마다 목록을 갱신시켜 주기위해 once메소드가 아닌 on메소드를 사용하였습니다. getRoomList메소드는 loadRoomList에서 채팅방 목록을 데이터를 받을 때마다 화면을 만드는 메소..

이번에는 채팅메세지 전송기능을 구현해보겠습니다. 채팅방화면에서 아래쪽 메세지 입력란에서 입력한 후 엔터키를 누르거나 삼각형 모양의 전송버튼을 누르면 메세지가 전송이 되는 기능을 구현해보겠습니다. 위 코드는 입력란에서 엔터키를 누르거나 전송버튼을 클릭했을 시 saveMessages 메소드가 실행이 되는 코드 입니다. saveMessages 여러 위치에 저장을 하게 되는데 하나씩 살펴보겠습니다.var multiUpdates = {};this.database.ref().update(multiUpdates); // 권한 때문에 먼저 저장해야함 multiUpdates 객체를 선언하고 저장할 위치와 값을 객체에 입력한 뒤 update 메소드로 저장하게됩니다. update 메소드는 이렇게 여러 위치에 한번에 저장할 ..

카카오톡을 보면 유저리스트 화면을 터치하면 프로필 화면이 나오고 1:1 채팅 버튼을 눌러야 채팅방 화면이 나옵니다만, 예제에서는 곧바로 1:1 채팅 화면으로 진입하는 코드를 작성하겠습니다. 일단 먼저 유저리스트 화면에서 유저를 클릭하면 채팅방을 오픈하는 코드를 작성하겠습니다. 아래의 코드를 추가 또는 수정해주세요. 유저리스트 데이터를 받아 화면을 그리는 getUserList 메소드에서 화면을 그리고 난 뒤 유저별로 클릭 이벤트를 바인딩 하는 코드를 입력하였습니다. 그리고 클릭시 수행되는 코드는 onUserListClick 메소드 입니다. onUserListClick 메소드는 아직까지는 단순하게 숨겨져있던 백버튼과 친구 초대버튼을 보이게 하고 openChatRoom메소드를 통해서 채팅방 화면을 보이게 하는..

이제 저장된 유저 데이터를 읽어와 아래와 같은 사용자 목록화면을 완성해 보겠습니다. 이제 아래의 코드를 추가합니다. 위 코드는 로그인 인증이 완료되고 수행되는 setLogin메소드 안에서 Realtime Databse 에서 Users Reference를 불러오는 loadUserList 메소드가 수행됩니다. loadUserList 메소드를 살펴보면 Users 위치를 once메소드를 통해 한번 만 불러오도록 되어 있고, userName 순으로 정렬하여 데이터를 가지고 옵니다. off 메소드는 여러 메소드가 수행하는 과정에서 미리 할당된 이벤트가 있으면 이벤트를 제거한 후 다시 이벤트를 붙여서 중복으로 이벤트가 할당되는 것을 막기 위함입니다. getUserList 메소드는 데이터를 받고 최종적으로 화면을 그리..

새로 가입한 유저 데이터를 저장할때는 몇 가지 고민해야 할 부분이 있습니다. 첫번째는 유저데이터를 저장하는 시점입니다. Realtime Database의 특성상 권한이 부여된 후 저장이 되는 것이 바람직합니다. 가입 메소드에서 수행하면 아직 미인증 상태이므로 기본을 설정된 데이터베이스 권한으로는 저장할 수 없습니다. 그러므로 저장 위치는 onAuthChange 메소드에서 저장해야할 것입니다. 두번째는 onAuthChange메소드 위치에 두면 로그인할때마다 프로세스를 수행하게 됩니다. 그리고 새로 가입한 유저데이터를 저장하는 프로세스를 로그인할 때마다 저장하는 것은 Realtime Database 특성상, 만약에 Users 위치를 클라이언트에서 변화 감지해서 데이터를 받아오는 코드가 작성되어 있다면 불필요..

1) Realtime Database 특징 Firebase Realtime Database 는 JSON형태의 NoSQL 데이터베이스입니다. 그리고 연결된 모든 클라이언트에 실시간 동기화되는 특징이 있습니다. 이로 인하여 일반적인 SQL 데이터베이스로 구현하는 웹개발과는 다른 특징을 가집니다. NoSQL의 특징을 가지고 있는 데이터베이스로서 데이터베이스 구조를 미리 정의 하지 않습니다. (미리 테이블이나 칼럼을 생성할 필요가 없습니다.) NoSQL 데이터베이스지만 실시간 동기화되는 특성으로 인하여, 저장할 데이터 구조는 최대한 중첩을 배제해야합니다.(JSON Object 값에 다시 JSON Object가 중첩이 되는 형태를 말합니다.) Firebase Realtime Database와 Node.js를 함께..

1) Authentication 콘솔 설정 Firebase Authentication을 사용하여 가입 및 로그인 처리를 해보겠습니다. Authentication 을 사용하기 위하여 Firebase Console화면으로 진입한 후 좌측 Authentication 메뉴에 들어가고, 그 다음 로그인 방법 탭으로 들어갑니다. 로그인 방법 탭 항목 중 이번 예제에서는 '이메일/비밀번호', 'Google', 'Facebook' 항목을 이용하겠습니다. '이메일/비밀번호' 라인을 클릭해봅니다. 그러면 아래와 같은 팝업창이 뜹니다. 사용설정 스위치버튼을 눌러 사용설정을 해줍니다. 'Google'도 마찬가지로 사용설정을 해줍니다. Facebook 설정은 Facebook 로그인과 Firebase Authentication을..

1) 예제 시작 소스 다운로드 받기 프로젝트를 시작하기 위해서 미리 구조를 잡아둔 예제 시작파일을 다운로드 받습니다.예제 시작 파일을 받기위하여https://github.com/cionman/firebase-tutorial-chat/ 아래 링크로 진입하여 commit 히스토리를 볼 수 있는 부분을 클릭합니다. commit 히스토리 중 맨 아래 쪽 '1. 예제 시작 파일' 부분 우측에 '<>' 버튼을 클릭 합니다. 나중에 예제를 글 단위별로 커밋을 해두었으니 따라하시면서 commit 히스토리를 참조하시면 됩니다.'1. 예제 시작 파일' 커밋 화면으로 진입한 후 아래의 스크린샷 부분을 클릭하면 예제 시작 파일을 다운로드 받을 수 있습니다. 다운로드 받은 파일을 프로젝트를 구성할 위치에 압축을 풀어줍니다. 다..

이제 예제 프로젝트를 수행하기 전 먼저 Firebase를 설정 및 준비를 해보겠습니다. 1. Firebase 프로젝트 추가하기 Firebase를 사용하기 위해서 가장 먼저 할 일은 Firebase Console로 진입하여 Firebase 프로젝트를 생성하는 일입니다. 그러기 위해 다음 URL을 방문하십시오. Firebase 홈페이지 https://firebase.google.com/ Firebase 홈페이지에서 우측 상단 GO TO CONSOLE 을 클릭하여 들어가면 아래와 같은 화면이 나옵니다. 화면을 보시면 이미 생성되어 있는 프로젝트 목록을 볼 수 있고, 프로젝트 추가 버튼이 있습니다. 프로젝트 추가 버튼을 누릅니다. 프로젝트 추가 버튼을 누르면 위와 같은 화면이 나옵니다. 프로젝트에 원하시는 이름..

Firebase 웹용 라이브러리들을 활용하여 아래와 같은 채팅앱을 만들어 보겠습니다. 채팅앱의 모든 기능이 포함되어 있지는 않습니다. 예제를 열심히 만들었지만.. 버그도 있을 수 있습니다. Firebase 의 기능을 한 번씩 활용해본다고 생각해주셨으면 좋겠습니다. Firebase의 여러 기능을 사용하면 카카오톡과 같은 메신저에 포함되어 있는 대부분의 기능이 구현 가능하겠지만, 지금부터 구현할 기능은 다음과 같습니다. 유저 가입 및 로그인 유저데이터 저장 유저 리스팅 화면 채팅메세지 리스팅 화면 채팅 메세지 전송 채팅방 리스팅 화면 채팅방 초대기능 파일 전송 접속 중인 유저 표시기능 파일 전송기능 푸시 기능 위 기능을 구현을 하면 아래와 같은 Realtime Database는 아래와 같은 데이터 구조를 가..