무야홍 ~

개요 다음과 같이 버스 운행 정보가 담긴 앱을 구현하려 한다. 해당 서비스는 3 가지 Section 으로 구분되어 있는데, 간선버스 지선버스 직행버스 해당 UI 를 Flat-List 를 사용하여 구현 하려한다면, 각각의 (버스 번호가 담긴) 아이템이 시작되는 첫번째를 알아내어, 그 위에 Section 을 추가해야하는 번거로움을 맞닥드리게 된다. 이와 같은 상황에 Section-List 컴포넌트를 사용하면, 조금 더 간단하게 구현할 수 있다. Flat-List UI 를 Flat-List 로 구현하려면, FlatList 안에 data 라는 props 를 받고 그 안에 배열을 넣어주어 구...

개요 Firebase 는 Google 에서 개발한 클라우드 기반 백엔드 플랫폼으로, 모바일 및 웹 애플리케이션 개발 시 조금 더 쉬운 기능과 서비스를 제공하고 있다. 사용이유 ? 개발자가 어플리케이션을 개발하고 운영하는데 필요한 다양한 서비스를 제공하여 생산성을 높이고 유지보수를 간편하게 해 주는 플랫폼 이다. Fast (쉬운 개발) 제공하는 서비스를 이용하여 안정성 serverLess 아키텍쳐를 사용하기 때문에 유지보수 및 확장성에 용이함. 실시간 데이터베이스 데이터의 변경사항을 실시간으로 감지하여 동기화...

개요 이전 포스팅에선, 서로 다른 웹 브라우저 환경에서 실시간으로 메세지를 보내고 받는 기능을 구현했다. 이번 포스팅에서는 상대방 혹은 자신이 보낸 메세지들을 채팅 기능과 유사하게 메세지를 보낸 사람이 누구인지와 받은 메세지들을 리스트형태로 화면에 출력하는 로직을 구현해 보고자 한다. a : text b : text a : text1 ... UI 이전 포스팅에서 home.pug에 ul 태그를 생성해 두었다. 그 아래에 메세지를 받을 경우 리스트형태로 쌓일 수 있게 li태그를 생성한다. li태그는 front.js 영역의 MessageEvent 영역에 다음과 같이 추가 해 준다. const li = docu...