일반적인 HTTP 요청이 아닌 동기화를 사용하므로 데이터가 변경될 때마다 연결된 모든 기기가 수 밀리초 내에 업데이트를 수신한다.

"fcmTokens":{
    "token-key":"token-value", 
    ...
}

"messages":{
    "BERLIN(GERMANY)":{
        "message_image_key":{
            "imageUrl":"profile URL",
            "location":"location info",
            "name": "current username",
            "storageUrl":"image file URL",
            "time":"sending time"
        }, 
        "message_text_key":{
            "imageUrl":"profile URL",
            "location":"location info",
            "name": "current username",
            "text":"input text",
            "time":"sending time"
        },
        ...
    }, 
    "DANANG(VIETNAM)": {...},
    ...
}

"status":{
    "username":{
        "bookmark":{
            "bookmarkkey":{
                "image":"bookmark image URL",
                "status": "room name",
                "time":"message time"
            },
            ...
        },
        "location":{
            "status":"current room name"
        }
    },
    ...
}

tripmate
├─ .firebase
├─ .git
├─ functions
│  ├─ .eslintrc.json
│  ├─ index.js
│  ├─ package.json
├─ public
│  ├─ images
│  ├─ scripts
│  |  ├─ list.js
│  |  ├─ login.js
│  |  ├─ main.js
│  |  ├─ map.js
│  ├─ styles
│  |  ├─ index.css
│  |  ├─ list.css
│  |  ├─ main.css
│  |  ├─ map.css
│  ├─ favicon.ico
│  ├─ firebase-messaging-sw.js
│  ├─ index.html
│  ├─ list.html
│  ├─ main.html
│  ├─ manifest.json
│  ├─ test.html
├─ .firebaserc
├─ .gitignore
├─ database-rules.json
├─ firebase.json
├─ storage.rules
└─ README.md

var List_TEMPLATE_BEFORE =
      "<li class='mdl-list__item'>" +
        "<span class='mdl-list__item-primary-content'>"+
          "<i class='material-icons mdl-list__item-icon'>chat</i>"+
          "<a class='name'  href='#'";
var List_TEMPLATE_AFTER =
      ">go</a>"+
        '</span>'+
      '</li>';

function displayList(roomlist) {
  var htmlelt = document.getElementById("lists");

  for(var room in roomlist){
    var divtag = document.createElement( 'div' );
    divtag.innerHTML = List_TEMPLATE_BEFORE + "id = "+roomlist[room]+List_TEMPLATE_AFTER;
    divtag.querySelector('.name').innerHTML = roomlist[room];
    htmlelt.appendChild(divtag);
  }
  listening(roomlist);
}

List_TEMPLATE를 만들어 불러올 채팅방 목록의 형식을 지정하였다. li 태그를 사용하여 채팅방 목록을 list.html 파일에 리스트 형식으로 불러온다.

htmlelt 변수는 list.html 파일에서 ID가 lists인 태그를 가져와 선언한다.

roomlist에 있는 채팅방마다 div 태그를 만들어주고, innerHTML으로 div 태그 안의 내용을 List_TEMPLATE의 형식을 이용하여 변경한다.

var List_TEMPLATE =
      "<li class='mdl-list__item'>" +
      '<div class="status"></div>'+
        '<div class="time"></div>'+
        '<div class="message"></div>'+
      '</li>';

function displayBook(datas){
  var messageListElement = document.getElementById('messages');
  var htmlelt = document.getElementById("lists");
  var divtag = document.createElement( 'div' );
  divtag.innerHTML = List_TEMPLATE;
  ...

마이페이지에 북마크한 내용들을 가져올때도 같은 방법을 이용하였다.

List_TEMPLATE에 북마크를 가져올 형식을 위치, 시간, 메시지 내용을 나누어 지정하였다.

• getelementbyId() : ID를 이용하여 해당 HTML 요소(태그)를 받아온다
• innerHTML=' ' : 선택한 HTML 요소 안의 내용을 ' ' 안의 내용으로 변경한다.

<header class="mdl-layout__header">
        <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
          <div class="mdl-layout__header-row mdl-cell mdl-cell--10-col mdl-cell--10-col-tablet mdl-cell--10-col-desktop">
            <img class="logo" src="images/logo_png_1.png" alt="Tripmate" height="30px">
            <img class="logo" src="images/logo_png_0.png" alt="Tripmate" height="30px">
          </div>
          <div id="user-container">
            <div hidden id="user-pic" onclick="location.href='./map.html'"></div>
            <div hidden id="user-name" onclick="location.href='./map.html'"></div>
          </div>
        </div>
      </header>

고정 헤더와 바디의 기본적인 레이아웃 구성에 google material design lite를 사용한다. 또한 mdl을 이용하여 반응형 디자인을 구현하였다.

ex)

• mdl-grid : 해당 container를 MDL grid component로 정의한다.
• mdl-cell : container를 MDL cell로 정의한다.
• mdl-cell--N-col : 1부터 12까지 column의 size를 지정한다.

.mdl-list__item .message {
  display:inline-block;
  float:left;
  font-size: 14px;
  box-sizing:border-box;
  padding:4px;
  margin-right:4px;
  text-align: left;
  width:100%;
}

@media screen and (max-width: 610px) {

  #user-container #user-pic {
    top: 2px;
    width: 33px;
    height: 33px;
    background-size: 33px;
  }
}

CSS 선택자를 이용하여 여러 요소들에 세부적인 위치, 크기, 여백 등의 디자인을 적용한다.

미디어쿼리를 이용하여 반응형 디자인을 적용한다.

var map, infowindow, pos, geocoder;

function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {

    center: {lat: -34.397, lng: 150.644},

    zoom: 6

  });

  infowindow = new google.maps.InfoWindow;

  geocoder = new google.maps.Geocoder;

map 변수는 html tag 중 id 값이 map인 화면을 받아서 선언한다.

google map api를 통해 infowindow와 geocoder 변수를 선언한다.

• infowindow : 현재 정보와 관련된 window 화면이다.
• geocoder : 위치를 위도와 경도로 나타낸다.

  // Try HTML5 geolocation.

  if (navigator.geolocation) {

    navigator.geolocation.getCurrentPosition(function(position) {

      pos = {

        lat: position.coords.latitude,

        lng: position.coords.longitude

      };


      infowindow.setPosition(pos);

      infowindow.setContent('Location found.');

      infowindow.open(map);

      map.setCenter(pos);

      geocodeLatLng(geocoder, map, infowindow);

    }, function() {

      handleLocationError(true, infowindow, map.getCenter());

    });

  } else {

    // Browser doesn't support Geolocation

    handleLocationError(false, infowindow, map.getCenter());

  }

}

initMap() : 내 위치를 반환하는 Map을 불러온다.

navigator.geolocation.getCurrentPosition 메소드로 position 변수를 통해 pos 에 현재 위도와 경도 값을 저장한다.

infowindow.setPosition(pos) 로 현재 위치와 관련된 지도를 화면에 보여주고 map을 open 해서 화면에 띄운다.

이 곳에서 geocodeLatLng(geocoder, map, infowindow) (1.3 참조) 함수를 불러와서 실제 주소 값까지 반환한다.

var address ;

function geocodeLatLng(geocoder, map, infowindow) {

        geocoder.geocode({'location': pos}, function(results, status) {

          if (status === 'OK') {

            if (results[0]) {

              map.setZoom(11);

              var marker = new google.maps.Marker({

                position: pos,

                map: map

              });

              infowindow.setContent(results[0].formatted_address);

              address=results[0].formatted_address;

              infowindow.open(map, marker);
			var lat = document.getElementById("location");
              lat.innerHTML = address;

            } else {

              window.alert('No results found');

            }

          } else {

            window.alert('Geocoder failed due to: ' + status);

          }

        });

      }

현재 위치로 받아온 위도 경도 값을 주소 값으로 변경하는 geocodeLatLng 함수

Map을 pos(현재 위치)로 Zoom을하고 marker 표시해 그 곳에 setContent로 주소를 화면에 출력한다.

pos에 저장되어 있는 위도 경도 값을 result[0]에 넣고 formatted_address를 사용해서 adress 변수에 실제 주소를 저장한다.

id가 location인 화면을 찾아 lat으로 정의한 다음 그 화면에 현재 주소를 나타내기위해 innerHTML 을 사용해서 address를 표시한다.

  <script src="/__/firebase/5.5.8/firebase-app.js"></script>
    <script src="/__/firebase/5.5.8/firebase-auth.js"></script>
    <script src="/__/firebase/5.5.8/firebase-database.js"></script>
    <script src="/__/firebase/5.5.8/firebase-storage.js"></script>
    <script src="/__/firebase/5.5.8/firebase-messaging.js"></script>
    <script src="/__/firebase/init.js"></script>

    <script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>

사용하는 프로젝트의 database가 저장된 firebase 을 연결하기 위해 firebase의 source를 script를 통해서 넣어준다.

    <script src="scripts/map.js"></script>

    <script async defer

    src="https://maps.googleapis.com/maps/api/js?key=[Google_API_KEY]&callback=initMap">

    </script>

firebase-Google Map 연동을 위해 firebase.js를 참조하는 script와 google api key를 넣은 script를 추가한다.

우리가 사용한 Firebase Service 4가지Authentication, Database, Storage, Hosting는 각각의 설정을 모두 console에서 한 후에 사용할 수 있다.
각 develop 환경설정시 주의점과 공통적인 사용법을 알아보자.

환경설정 : google 로그인 허용

기본 사용법: firebase.auth()

 var provider = new firebase.auth.GoogleAuthProvider();
 firebase.auth().signInWithPopup(provider).then(function(authData) {
    console.log(authData);
  }).catch(function(error) {
    console.log(error);
  });

google 로그인을 사용할때는 별도의 google login 메소드인 GoogleAuthProvider()를 사용해서 현재 사용자의 firebase.auth() 정보를 initialize한다.

위 세팅 (sign in method) 이후 firebase.auth() 메소드를 사용하게 되면 현재 사용자의 인증정보에 대한 내용이 드러나며, firebase.auth()를 이용해서 현재 user의 id, profile, token 등을 자신의 서비스에 customizing하는 것이 가능하다.

firebase.auth().signInWithPopup(provider);
firebase.auth().signOut();
firebase.auth().onAuthStateChanged(authStateObserver);
firebase.auth().currentUser.photoURL;
firebase.auth().currentUser.displayName;

환경설정 : rule 설정

기본 사용법: firebase.database()

Database를 사용하기 위해서 보안규칙(security rule)을 설정해야한다. 이때 규칙은 console에서 설정할수 있으며, rules라는 key의 value 값이 firebase database의 보안규칙이된다. value 값에 들어가는 json data는 .read, .write등 다양한 속성에 대해서 true, false를 정의할 수 있다.

위 세팅 (console setting) 이후 firebase.database() 메소드를 사용하게 되면 현재 프로젝트의 database를 접근하겠다는 의미이다. firebase.database()를 이용해서 MySQL, MongoDB의 query문과 같은 명령어를 사용할 수 있다. database() 메소드를 이용해서, DB 저장 및 연결을 위한 관리는 본 위키의 3. Database 메소드 활용정리(#3. Database 메소드 활용 정리) 에서 자세한 내용을 확인하자.

환경설정 : rule 설정

**기본 사용법 **: firebase.storage()

Database와 마찬가지로 storage를 사용하기 위해서도 버킷규칙(bucket rule)을 설정해야한다. 이때 규칙은 console에서 설정할수 있으며, 이 안에는 file을 저장(write)할때의 이름 규칙 및, imagemaxsize에 관한 설정이 이루어져잇다.

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

위 세팅 (console setting) 이후 firebase.storage() 메소드를 사용하게 되면 현재 프로젝트의 storage를 접근하겠다는 의미이다. database와 마찬가지로 ref("경로")를 이용해서 저장 혹은 접근할 파일의 경로를 지정하고, .put() 등을 이용해서 write한다.

firebase.storage().ref(filePath).put(file)

환경설정 : 현재 개발중인 firebase 프로젝트의 deploy

firebase login
firebase use --add    #firebase 프로젝트 선택 후 alias 부여

# firebase 프로젝트 local 서버로 확인하기
firebase serve
firebase serve --only hosting

# firebase에서 제공하는 hosting을 사용하여 deploy하기
# 본 프로젝트는 firebase에서 제공하는 function을 사용하지 않았기 때문에 exception function을 사용해서 deploy하였다. 
firebase deploy
firebase deploy --except function

local hosting을 이용해서 현재 프로젝트의 진행사항을 체크하고,

프로젝트가 마무리 되면 deploy를 하여 프로젝트의 도메인을 얻어 여러 환경에서 프로젝트를 실행할 수 있다.

shell command와 firebase initalize가 연관되어있으므로 이 위치이다..

firebase 프로젝트를 개발하기 위해서는 firebase console의 프로젝트의 속성정보를 나의 웹앱 source에 가져와야한다. 따라서 속성정보를 나의 source 코드에 가져오는 방법 2가지를 알아보겠다.

firebase console > project Overview > 앱추가 > 웹앱 선택

아래 스피넷이 나오게된다. 이 내용을 내가 현재 개발하고있는 프로젝트의 html 하단이나, 관련 javascript code에 직접 넣게 되면, 해당 html, js 파일에서는 firebase 변수에 접근 할 수 있다. firebase변수에 접근을 하게 되면 firebase.auth(), firebase.database(), firebase.storage()등의 개발 서비스에 접근 할 수 있어 나의 웹앱에 맞춰 커스터마이징이 가능하다.

<script src="https://www.gstatic.com/firebasejs/5.7.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "APIKEY",
    authDomain: "DOMAIN",
    databaseURL: "DB URL",
    projectId: "triptmate",
    storageBucket: "BUCKET URL",
    messagingSenderId: "ID"
  };
  firebase.initializeApp(config);
</script>

하지만 이 경우, source code에 그대로 들어가기 때문에 html에 넣기라도 하면, F12 개발자 도구를 이용해서 APIKEY 등 중요정보를 쉽게 접근할 수 있다는 문제가 있다. 따라서 보안을 위해서라면 다른 방법을 권장한다.

바로 html태그안에 해당 config과 관련한 정보를 연결하는 방법이다.

<script src="/__/firebase/5.5.8/firebase-app.js"></script>
<script src="/__/firebase/5.5.8/firebase-auth.js"></script>
<script src="/__/firebase/5.5.8/firebase-database.js"></script>
<script src="/__/firebase/5.5.8/firebase-storage.js"></script>
<script src="/__/firebase/5.5.8/firebase-messaging.js"></script>
<script src="/__/firebase/init.js"></script>

다음 태그에 있는 js의 내용은 환경변수를 이용해서 사용자 firebase 프로젝트의 주요 정보들을 가린 후 각 service를 initalize 한다.

cmd에서 firebase 명령어를 이용해서 설정한 나의 firebase 프로젝트의 config 값들이 모두 환경변수로 설정되고, 그 환경변수가 저 js 파일에 들어간다.

firebase use --add
? Which project do you want to add? (Use arrow keys)
> friendychat-8920d
  triptmate

아래와 같이 사용할 나의 firebase 프로젝트를 설정할 수 있다.

Firebase Database의 메소드를 Select / Update / Insert 명령어를 연관시켜서 사용법을 분류하였다.

var callback = function(snap){
  printf("snap.val()");
}
firebase.database().ref("path").on("value", callback)

• 해당 path(경로) 안에 있는 value를 snapshot을 찍듯이 가져와서 print하는 source이다.

**기본 사용법 **: .on("value", callback)

• 1번째 argument

  • value = 변경에 대한 수신 대기 (전체)
  • child_added = 하위요소 추가에 대한 수신 대기
  • child_changed = 하위요소 업데이트에 대한 수신대기

• 2번째 argument

  • 1번째 argumnet의 내용대로 대기하던 event가 들어오면 callback 함수 실행

즉, read는 해당 path의 어느부분이라도 변경이 있다면 callback을 실행하여 callback에서 htmltag.innerhtml 등의 html과 연관해서 내보내는 것을 목적으로 하였다.

트래픽 상 1번째 argument의 대기 범위는 변경사항의 최하위 위치가 제일 효율적이다.

firebase의 realtime database가 가능한 이유는, db 변경에 대한 수신을 대기하고 이에 대해 바로 반영할 수 있는 eventlistener를 기반으로 만들어졌기 때문이다.

firebase.ref("path").push({
	json1_key : json1_val,
    json2_key : json2_val
});

• 해당 path(경로) 에 push안에있는 argument를 key로 하도록 data를 insert하는 source이다.

기본 사용법: .push(json)

= 해당 json을 value로 갖는 key를 생성하고 push

• json
  • { }를 이용해서 여러 key-value 쌍의 json 값을 넣어도 상관없다.
  • 이때 주의해야할 점은 argument가 해당 경로의 value로 들어간다는 것이다.
  • 그렇다면 key는? 임의생성

key : random_key, value : json

위 code를 적용했을 때 아래와 같은 규칙으로 database에 반영된다.
path아래에 바로 argument의 내용이 들어가는 것이 아니다.

path
  ㄴrandom_key2 (afdlahfkasdjka)
    ㄴjson1_key : json1_val
    ㄴjson2_key : json2_val

firebase.ref("path").set({
	json1_key : json1_val,
    json2_key : json2_val
});

• 해당 path(경로)를 key로 하고 set안의 argument를 value로 하는 data를 insert하는 source이다.

기본 사용법: .set(json)

= 해당 json을 value로 path를 key로해서 해당 key(경로)의 내용을 덮어씌운다

• json
  • { }를 이용해서 여러 key-value 쌍의 json 값을 넣어도 상관없다.
  • 이때 주의해야할 점은 key값, 즉 해당 path안에 있던 기존내용이 .set의 argument로 대체된다는 점이다.

key : path, value : json

위 code를 적용했을 때 아래와 같은 규칙으로 database에 반영된다.
path아래에 바로 argument의 내용이 들어간다

path
  ㄴjson1_key : json1_val
  ㄴjson2_key : json2_val
  

#기존값이 어떤것이든 상관없이 덮어씌어진다.
(기존값)
path
  ㄴjson1_key : json1_val
  ㄴjson2_key : json2_val
  ㄴjson3_key : json3_val
  ㄴjson4_key : json4_val
  ㄴjson5_key : json5_val
  ㄴjson6_key : json6_val
-> 어찌됐든 set의 argument가 key로 설정!

1. google_login page 띄우기
2. google api 이용한 로그인 OAUTH
3. show log_out button
4. show chat button (./list.html)

firebase.database().ref('/fcmTokens').child(currentToken).set(firebase.auth().currentUser.uid);

유저 fcmtoken 저장

firebase.database().ref('messages/').limitToLast(12).on('value', callback);

[loadList(), displayList(roomlist)];

database에 있는 roomlist 전부 불러오기 및 보여주기 경로 : messages

firebase.database().ref('/status/'+getUserName()+'/location').set({
    status: clickRoom
  }).catch(function(error) {
    console.error('Error writing new message to Firebase Database', error);
  });

database에 현재 사용자가 클릭한 room의 위치 업데이트하기 경로 : /status/{username}/location 저장결과 : status : {clickRoom}

firebase.database().ref('/messages/'+getRoom).limitToLast(12).on('child_added', callback);
  firebase.database().ref('/messages/'+getRoom).limitToLast(12).on('child_changed', callback);

user가 클릭한 room의 채팅방 message를 전부 불러오기 및 보여주기 경로 : messages/{currentUserRoom}

firebase.database().ref('/messages/'+getRoom).push({
    name: getUserName(),
    imageUrl: LOADING_IMAGE_URL,
    profilePicUrl: getProfilePicUrl()
  }).then(function(messageRef) {
    // 2 - Upload the image to Cloud Storage.
    var filePath = firebase.auth().currentUser.uid + '/' + messageRef.key + '/' + file.name;
    return firebase.storage().ref(filePath).put(file).then(function(fileSnapshot) {
      // 3 - Generate a public URL for the file.
      return fileSnapshot.ref.getDownloadURL().then((url) => {
        // 4 - Update the chat message placeholder with the image’s URL.
        return messageRef.update({
          imageUrl: url,
          storageUri: fileSnapshot.metadata.fullPath,
          location : address,
          time: makeTime()
        });
      });
    });
  }).catch(function(error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  });

user가 첨부한 image를 firebase stroage에 올리고, 그 url을 얻어 user가 클릭한 room의 채팅방 message로 저장 경로 : messages/{currentUserRom} 저장결과 messsage_key: { ​ imageurl: currnet user profile image, ​ location: current user location, ​ name: current user name, ​ storageUri: filepath, ​ time: current time }

 var callback= function(snap){
    console.log(snap.val().status);
    getRoom = snap.val().status;
    loadMessages(getRoom);
    console.log(userName);
    htmlroom.innerHTML = getRoom;
  }
  firebase.database().ref('/status/'+userName+'/location').on('value', callback)

database에 현재 사용자가 클릭한 room의 위치를 찾는 function이다. callback함수를 이용해서, 해당 위치 database의 snapshot을 찍고, 해당 위치의 각종 속성에 접근할 수 있도록한다. 경로:/status/{username}/location

firebase.database().ref('/status/'+getUserName()+"/bookmark").push({
    text: text,
    status: getRoom,
    time: time,
    image: output
  }, getToggle()).catch(function(error) {
    console.error('Error writing new message to Firebase Database', error);
  });

database에 현재 사용자가 클릭한 room의 위치에서 선택한 message를 mypage의 bookmark에 추가하기 경로: /status/{username}/bookmark 저장결과 bookmark_key{ ​ text: user click text massage ​ status: room name, ​ time: current time, ​ image: user click image message }

function loadBook() {  // Loads the last 12 messages and listen for new ones.
  var callback = function(snap) {
    console.log(snap);
    var data = snap.val();
    for(var key in data){
      //  console.log(data[key]);
       displayBook(data[key]);
    }

  };
  firebase.database().ref('status/'+getUserName()+"/bookmark").on('value', callback);
}

[loadBook(), displayBook(roomlist)];

현재 user의 bookmark 정보를 mypage에 보여주기 위해 해당 리스트를 찾는다. callback함수를 이용해서, 해당 위치 database의 snapshot을 찍고, 해당 위치에 접근한다. 위치에 접근해서 얻은 data를 displaybook()함수를 이용해서 html과 연동한다. 경로 : status/{username}/bookmark

• 고승의 (uiuiui629) : 사용자 인터페이스(UI) 디자인, 프론트엔드 개발
  • uiuiui629
  • loginChatDesign : 로그인창, 채팅창 디자인(main.css 수정 및 index.css, list.html 추가)
  • listDesign : 채팅방 list 디자인(list.html, list.js 수정 및 list.css 추가)
  • mypagedesign : 마이페이지 디자인(map.html, map.js 수정 및 map.css 추가)
  • UIdesign : header 수정, 채팅방 list 레이아웃 수정
• 김민정 (mjung1798) : 데이터베이스 관리, 백엔드 개발
  • ming : login 분리하기, 브랜치 정리, apply .gitignore
  • ming123 : 채팅방 list 개발(list.html, list.js 추가), icon 수정
  • Listlink : list의 기능에 맞게 db 연결, user가 위치하는 room인 status DB 재구성
  • roomname : DB에서 불러온 room list의 정보를 html에 보여주기 (js와 html 연동)
  • mapinformation : 북마크 버튼 추가하고, 유저의 bookmark만 모은 DB 재구성 및 저장
  • debugging : 북마크가 지워지는 현상 (push와 set 차이점 발견), DB 저장 오류 수정
  • snackbar : 북마크 저장시 snackbar 나타나게 수정
  • final, tripmate.V.1.0 : deploy를 위한 최종적인 전체 수정
• 심정민 (jmini1234) : 백엔드 개발, 지도api, firebase 연동, 현재 위치 반환
  • Shim
  • roomlist : 채팅방 생성 및 분리
  • MapApi : google map api 와 firebase 연동하기
  • converting : 현재 위치 반환 후 , 위도 경도를 주소로 변환

git branch를 이용해서 기능을 수정하고, pull request를 이용해서 변경사항을 확인하고, conflict를 대처했습니다.