2. FrontEnd - jmini1234/tripmate GitHub Wiki

1. JavaScript와 HTML 연동

ㄱ. 채팅방 목록 만들기

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 요소 안의 내용을 ' ' 안의 내용으로 변경한다.

2. Google Material Design Lite 사용

<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를 지정한다.

3. CSS 적용

.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 선택자를 이용하여 여러 요소들에 세부적인 위치, 크기, 여백 등의 디자인을 적용한다.

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