Twittler 구현하기 - (4) HTML에 입력한 글을 javascript로 처리하기

Twittler 구현하기 - (4) HTML에 입력한 글을 javascript로 처리하기

HTML 안에서 데이터를 옮기는데, javascript는 어떤 도움을 줄 수 있을까요? / picture by 캡틴.

 

 

벌써 twittler에 대한 네 번째 포스팅이라니!

 

이번에는 user name과 comment 아래에 만들어둔 text / textarea에 직접 입력하는 내용을

javascript 함수를 사용해서, new tweet으로서 추가하는 방법에 대해 정리하겠다.

 

지난 포스팅에서 다루었던 DOM관련 내용 중에, selector를 지정하는 방법은

네 가지가 있다고 언급되었다. 어떤 selector에도 사용이 용이한 'querySelector'를 사용하여

기능 구현에 대해 설명하려고 한다.

 

먼저, 입력 ~ 출력의 순서에 대해 정리해보았다.

 

    1) user name과 comment 에 각각 해당하는 내용을 작성한다.

    2) tweet! 버튼을 클릭하면, 두 개로 나뉘어 입력된 값들을 하나로 합쳐주는 기능(=함수)이 실행된다.
        * 버튼을 눌렀을때, 함수를 실행하도록 'onclick' 을 활용하겠다.

    3) tweet 창에 내용을 입력할때는, 구성요소에 누락이 없도록 '입력시간'을 함께 넣어서 출력한다.
       (입력시간에 대한 구현은, 온전한 나의 노력이 아니므로 이번 포스팅에서는 함수의 일부로만 남기려고 한다.)

 

2) 번에서 한 줄로 보기 쉽게 써 두기는 했지만, 입력된 값(user name, comment)을 가져오는 방법을 모르면,

함수도 작성할수가 없다. google창에 html에서 입력된 값을 js로 활용하는 방법에 대해 검색해보았다.

 

방법을 안내해둔 누군가의 글을 읽게 되었고,

처음 HTML을 배우던 때에, tag에 각종 속성을 부여하였던 내용이 기억났다.

 

'value'는 시각화되어 화면에 나타나는 값을 지정하는 속성이다.

input tag를 포함하여 각종 tag의 속성으로서 value를 지정할 수 있다.

 

<input type = "button", value = "I'm button. And created by value property">

 

이렇게, 미리 입력된 값을 출력하는 데 사용하는 속성의로서의 value가

새롭게 입력되는 값을 처리하는데에도 활용이 가능할까?

 

 

이제, 앞서 정리한 동작순서에 맞춰서 '새로운 트윗'을 출력하기 위한 함수를 작성해보자.

먼저 twittler 구성을 위해 만들어둔 new tweet내용 입력창에 대한 HTML 코드를 확인해보자.

 <div id = "inputArea">
    <div>User name</div>
    <input id = "userNameInput" type="text"> <!--text입력창으로 지정-->
    <div>Message</div>
    <input id = "messageInput" type="textarea"> <!--textarea입력창으로 지정(복수의 줄 대응가능)-->
    <div>
      <button id = "tweet" onclick ="createNewTweet()">tweet</button>
      <!--tweet 버튼을 눌렀을때, createNewTweet()함수가 실행되도록 onclick이벤트 부여-->
    </div>
 </div>

---

 

이제, createNewTweet() 함수의 내용을 살펴보자.

function createNewTweet(){
    let parent = document.querySelector('#messages'); // 메세지를 출력할 tweet창을 지정.
    let template = document.querySelector('#rendering'); // HTML의 템플릿을 활용하도록 지정.
    let brandNewTweet = document.importNode(template.content, true); // 이제 brandNewTweet은 template을 사용합니다.

    let newUserName = document.querySelector('#userNameInput'); // id = "userNameInput"을 참고합니다.
    let newMessage = document.querySelector('#messageInput');  // id = "messageInput"을 참고합니다.
    brandNewTweet.querySelector('.userName').innerHTML = newUserName.value; // id = "userNameInput"의 value를 가져옵니다.
    brandNewTweet.querySelector('.userName').onclick = function(){
        filterTweet(newUserName.value);
    }
    brandNewTweet.querySelector('.tweetTime').innerHTML = new Date().format();
    brandNewTweet.querySelector('.message').innerHTML = newMessage.value; // id = "messageInput"의 value를 가져옵니다.
    parent.prepend(brandNewTweet);
    return DATA.push({user:newUserName.value, message:newMessage.value, created_at:new Date().format(),})
     // 새롭게 입력되는 brandNewTweet은 원본 DATA 배열에도 추가됩니다.
}

 

 

5, 6번째 줄에는 새로 변수를 만들고, HTML tag에 입력된 id인 userNameInput / messageInput를 참조하도록 설정하였다.

7, 12번째 줄에는 user name(text)/comment(textarea)에 입력된 값을, value로서 읽어들일 수 있도록 코드를 작성했다.

 

결과는, 성공!

내가 입력한 값들이 정상적으로 template을 통해, userName, message로 부여되어 화면에 출력되었다.

 

<template> tag를 사용하지 않았다면, 새로운 tweet을 추가하는 createBewTweet() 함수는 몇 줄이 더 늘어났을까?

innerHTML을 사용해 tag를 하나씩 지정하며 허우적대던 때를 생각해보니, <template>는 참 편리한 기능이다.

 

다음 포스팅에서는 "check new tweet!" 이라는 버튼을 클릭하였을 때, 

data.js에 담긴 random user/message의 배열에서 임의의 data를 가져오는

random tweet() 함수의 구현을 다루어 보겠다.