DOM / Twittller

트위틀러 화면

  2일간 트위터를 따라한 트위틀러 만들기 프로젝트를 수행하였으므로 주요 내용을들 정리해보았다.

---

CSS

1. CSS 변수 사용하기

• CSS 속성에 구체적인 값, 숫자를 넣는 것을 지양하고 변수를 선언하여 속성에 할당한다.
• 현재 같은 값을 갖고 있으면서 디자인 변경 시 함께 같은 값으로 변경될만한 속성들은 같은 변수를 할당한다.

:root{
  --main-color: #1ea2f1;
  --dark-color: #16212b;
  --light-color: #75cafe;
  --white-color: #ffffff;
  --invalid-color: #630000;
  --font-size: 1.25rem;
  --input-border-bottom-style: 1px solid var(--white-color);
  --invalid-input-border-bottom-style: 2px solid var(--invalid-color);
  --border-radius: 5px;
  --width-size: 500px;
  --hight-size: 80px;
  --margin-value: 0.2rem;
  --padding-value: 0.2rem;
}

2. 마지막요소

• 2020/12/18 - [CSS] - last-child가 작동하지 않을 때

---

JavaScript

 

1. 새로운 트윗 만들기

• username-box와 comment-box의 입력값을 가져와서 유효한 입력값인지 확인한다.
• 입력값과 현재 시간을 이용하여 트윗객체를 만들고 이를 전체 트윗배열에 저장한다.
• 새로운 객체를 이용하여 트윗(HTML Element)을 만든다.
• 만들어진 트윗을 트윗리스트(HTML)의 맨 앞에 붙인다.
• username-box와 comment -box를 비운다.

const clickedTweetBtn = function(){
    let username = document.querySelector('#username-box');
    let comment = document.querySelector('#comment-box');

    if(!checkStrLength(username.value, 15) || !checkStrLength(comment.value, 280)){
        return;
    }

    let newTweetData = createTweetData(username.value, comment.value);
    let htmlData = objectToHTML(newTweetData);

    tweet_list.prepend(htmlData);

    username.value = "";
    comment.value = "";
}

 

2. 입력 글자수를 넘기면 입력칸을 붉은 색으로 변경하고 메시지 보여주기

• username-box와 comment-box에 input 이벤트리스너를 추가한다.
• input 이벤트 발생 시 값에 대한 유효성검사를 실시한다.
• 유효성검사에 통과하지 못했다면 class에 invalid를 추가하고 textContent를 사용하여 에러메시지를 추가한다.
• class가 invalid인 경우 CSS에 의해 붉은 색으로 변경된다.

const checkStrLength = function(str, limit){
    return str.length <= limit && str.length !== 0;
}

const displayInvalidName = function(){
    let userName = userNameInput.value;
    if(!checkStrLength(userName, 15)){
        userNameInput.classList.add("invalid");
        errorDiv.textContent = "UserName is invalid";
    }else{
        userNameInput.classList.remove("invalid");
        errorDiv.textContent = "";
    }
}

userNameInput.addEventListener("input", displayInvalidName);

 

3. 새로운 트윗 가져오기

• refresh버튼을 눌렀을 때 refresh 버튼의 텍스트 혹은 class에 따라 다른 행동을 한다.(나는 text로 구현)
• 버튼의 텍스트가 'check new tweet'라면 새로운 트윗을 생성 후 이를 트윗배열(DATA)에 넣는다.
• 트윗 리스트(HTML)를 비우고 새 트윗이 추가된 트윗배열을 이용하여 새로운 트윗 리스트를 만든다.
• 버튼의 텍스트가 'go back & clear filter'라면 원래 트윗배열을 이용하여 새로운 트윗 리스트를 만든다.

const clickedrefreshBtn = function(){
    if(refreshBtn.textContent === 'check new tweet')
        DATA.push(generateNewTweet());
    
    if(refreshBtn.textContent === 'go back & clear filter')
        refreshBtn.textContent = 'check new tweet';

    tweet_list.textContent = '';
    createTweetByArray(DATA);
}

 

 

4. 이름을 클릭하면 그 사람이 쓴 트윗만 보여주기

• 트윗 이름에 click 이벤트 리스너를 추가한다.
• 이름 클릭 시 event객체를 통해 이름 값을 가져오고 이를 이용하여 전체 트윗배열을 이름으로 필터링한다.
• 필터링된 결과 배열을 이용하여 새로운 트윗 리스트를 만든다.
• refresh 버튼의 텍스트를 'go back & clear filter'로 변경한다.

const clickedUserName = function(event){
    let key = event.target.textContent;

    tweet_list.textContent = '';

    let filterdArr = DATA.filter(function(value){
        return value.user === key;
    });
    
    createTweetByArray(filterdArr);

     let refreshBtn = document.querySelector('#refresh-tweet');
     refreshBtn.textContent = "go back & clear filter";
}

const addNameClickEvent = function(){
    let userNameTag = document.querySelectorAll(".tweet-username");
    for(let i =0; i<userNameTag.length; i++){
        userNameTag[i].onclick = clickedUserName;
    }
}

 

5. 트윗 생성 날짜 보여주기

• Date.prototype.format을 이용하여 트윗 객체의 생성 날짜 형식 통일
• 트윗 생성 날짜를 HTML로 보여줄 때 moment.js를 이용하여 현재 시간에 대한 상대적 날짜로 보여주기
• 2020/12/29 - [Javascript] - CDN과 Javascript Library

function generateNewTweet() {
  var tweet = {};
  tweet.user = randomUser[getRandomInt(0, randomUser.length)];
  tweet.message = randomMessage[getRandomInt(0, randomMessage.length)];
  tweet.created_at = new Date().format(); //날짜형식
  return tweet;
}

Date.prototype.format = function() {
  var yyyy = this.getFullYear();
  var month = (this.getMonth() + 1).padLeft();
  var dd = this.getDate().padLeft();
  var HH = this.getHours().padLeft();
  var mm = this.getMinutes().padLeft();
  var ss = this.getSeconds().padLeft();

  var format = [yyyy, month, dd].join('-') + ' ' + [HH, mm, ss].join(':');
  return format;
}

const objectToHTML = function(tweetObj){
    const liTag = document.createElement('li');
    liTag.setAttribute("class", "tweet-content");

    const titleDiv = document.createElement('div');
    titleDiv.setAttribute("class", "tweet-title");
    
    const usernameDiv = document.createElement('div');
    usernameDiv.setAttribute("class", "tweet-username");
    usernameDiv.textContent = tweetObj.user;

    const dateDiv = document.createElement('div');
    dateDiv.setAttribute("class", "tweet-date"); //HTML로 만들 때 상대날짜로 표시
    dateDiv.textContent = moment(tweetObj.created_at, 'YYYYY-MM-DD hh:mm:ss').fromNow();

    titleDiv.appendChild(usernameDiv);
    titleDiv.appendChild(dateDiv);

    let commentDiv = document.createElement('div');
    commentDiv.setAttribute("class", "tweet-commnet");
    commentDiv.textContent = tweetObj.message;

    liTag.appendChild(titleDiv);
    liTag.appendChild(commentDiv);

    usernameDiv.onclick = clickedUserName;

    return liTag;
}