image.png

개요

username, message 를 입력받아 시간의 역순으로 트윗을 기록합니다.
트윗의 username 을 클릭하면 해당 user 의 트윗을 보여줍니다.

주요 로직 소개

document.querySelector('#newTweetBtn').onclick = function () {
    let username = document.getElementById('username');
    let message = document.getElementById('message');

    insertBeforeTweet('newTweet', username.value, message.value);

    username.value = '';
    message.value = '';
}

새로운 tweet 을 올리는 로직으로 'insertBeforeTweet' 을 호출합니다.

tweetNameOnclick = function () {
    let parentElement = this.parentElement.parentElement;
    let filteredTweet = [];
    let selectedName = document.getElementsByClassName(this.parentElement.className);

    for(let i  = 0; i < selectedName.length; i++){
        filteredTweet.push(selectedName.item(i));
    }

    while (parentElement.firstElementChild) {
        parentElement.removeChild(parentElement.firstElementChild);
    }

    while(filteredTweet.length > 0){
        parentElement.appendChild(filteredTweet.shift());
    }
}

username 을 클릭하면 해당 user 의 트윗만을 보여주는 기능입니다.
선택된 username 의 트윗을 selectedName Array 에 담은 후, 전체 트윗인 parentElement 를 비우고 여기에 selectedName 의 트윗을 넣습니다.

function insertBeforeTweet() {
    let newTweetData = generateNewTweet();

    let viewTweet = document.getElementById('viewTweet');
    let tmpTweet = document.createElement('div');

    let tweetName = document.createElement('div');
    tweetName.textContent = newTweetData.user;
    tweetName.onclick = tweetNameOnclick;
    tweetName.className = 'tweetName';

    let tweetTime = document.createElement('div');
    tweetTime.textContent = newTweetData.created_at.format();
    tweetTime.style.cssFloat = 'right';

    let tweetMsg = document.createElement('div');
    tweetMsg.textContent = newTweetData.message;
    tweetMsg.style.width = '80%';
    tweetMsg.style.cssFloat = 'left';

    if (arguments[0] === 'newTweet') {
        if (arguments[1] === '') {
            tweetName.textContent = '신규유저';
            tweetMsg.textContent = '내용을 입력하면';
        } else {
            tweetName.textContent = arguments[1];
            tweetMsg.textContent = arguments[2];
        }
    }

    tmpTweet.appendChild(tweetName);
    tmpTweet.appendChild(tweetTime);
    tmpTweet.appendChild(tweetMsg);
    tmpTweet.className = 'div_' + tweetName.textContent;

    if (viewTweet.firstElementChild === null) {
        viewTweet.appendChild(tmpTweet);
    } else {
        viewTweet.insertBefore(tmpTweet, viewTweet.firstChild);
    }
}

username, message, time 을 받아 트윗을 작성하는 핵심 기능입니다.
기본적인 layout 과 트윗이 없는 경우에도 작동할 수 있는 방어 로직을 넣었습니다.

후기

과제의 요구 조건을 구현하는 것은 어렵지 않았지만, 이전의 java 코딩 습관과 CSS 처리를 별도로 하지 못한 것이 아쉽습니다. JS 의 스타일을 좀 더 공부한 후 리팩토링을 할 떄 개선할 예정입니다.