조금 늦었지만 Pre Course의 세 번째 스프린트 과제였던 Twittler 구현 과정을 남겨놓고자 한다. 총 다섯개의 스프린트 과제 중 내가 가장 헤매며 완성했던 과제라 더욱 기억에 남는 애증의(?) 과제다.
트위터처럼 사용자이름과 코멘트를 작성 후 등록버튼을 누르면 트윗 목록에 추가되도록 하면 되는 것이었다. 먼저 HTML과 CSS를 활용하여 Mock up(모형)을 구현하였다. 여기까지는 할만했고 재미도 있었다. 비록 강의에 제시되어있는 샘플을 모방한 수준이었으나, 내가 직접 구현한 디자인이 웹 상에서 보여지는 것이 신기했다.
Mock up 구현 후, 이제 이 Mock up에 동적인 요소를 부여하기 위해 DOM과 JS를 활용해야 했다. DOM(Document Object Model)은 Mock up에 구현해놓은 버튼 등을 클릭했을 때 작동할 수 있도록 하는 모델로, 쉽게 말해 HTML코드를 조작하기 위해 필요한 요소이다. 그러나 나는 이 원리가 잘 이해되지 않아 며칠간을 고생하였다.
아무튼 HTML로 만들어놓은 Mock up에 DOM과 JS를 활용하기 위해 몇 가지 로직이 필요했다.
- JS에 이미 작성되어 있는 트윗 목록을 보여주기
- 신규 트윗을 작성하고 Tweet 버튼 클릭 시, 기존 트윗 목록의 맨 위에 추가되도록 하기
- 신규 트윗의 작성 시간이 현재 시간으로 표시될 수 있도록 하기
- Check New Tweet 버튼 클릭 시, JS에 작성되어 있는 랜덤 메세지들이 신규 트윗 목록에 추가될 수 있도록 하기
- 트윗 목록의 사용자이름 클릭 시, 해당 사용자의 이름으로만 필터링한 타임라인 보여주기
1번의 경우 DOM을 활용하여 새로운 div를 만들고 거기에 HTML 구조에서와 동일한 class를 부여해준 후 textContent를 넣어주고 이를 한 단계 위의 부모 엘리먼트에 삽입시켜주면 된다.
let eluseranddate = document.createElement("div");
let elusername = document.createElement("div");
elusername.classList.add("username");
elusername.textContent = DATA[i]['user'];
eluseranddate.appendChild(elusername); 나는 이 과정이 무척 어려워서 코스에 있는 50분짜리 DOM강의를 전체적, 부분적으로 몇 번을 돌려봤는지 모르겠다. 이해되고나니 별 것 아닌 것 같지만, 아마 나 같이 이 원리를 이해하는 데 고생한 사람도 분명 있을것이다.
아무튼 위와 같이 div 요소(사용자이름, 날짜, 코멘트 등)를 하나씩 만들어준 후 이 요소들을 최종적으로 HTML 구조의 최상위 부모 엘리먼트에 삽입시켜줘야 한다.
document.querySelector(".mybox2").appendChild(elusertweet);
// 여기서 난 사용자이름과 날짜 코멘트를 모두 elusertweet으로 묶어준 후,
// 이를 한꺼번에 mybox2 클래스를 가진 부모 밑으로 삽입시켜주었다. 이렇게 DOM을 활용하여 부모-자식 엘리먼트를 짝지어준 후, for문을 활용하여 JS에 이미 작성되어 있는 트윗 목록이 보여지도록 하였다.
for(let i =0; i < DATA.length; i++){
~~~DOM을 활용한 코드 작성~~~
};1번 과정을 구현하고나니 앞으로가 문제였다. 2번의 경우는 새로운 트윗을 작성하고 Tweet 버튼을 클릭했을 때 트윗 목록의 맨 위에 추가되도록 하면 되는 것인데 말로는 쉬워보였으나 나는 이 과정을 구현하기 위해 며칠을 고민해야했다(ㅎㅎ) 당시 나의 문제점은 새로운 트윗을 작성하고 Tweet 버튼을 누르면 새로운 트윗만 추가되는 것이 아니라, 기존 JS에 작성되어 있던 트윗 목록 + 새로운 트윗이 한덩어리처럼 추가된다는 것이었다. 그리고 약 일주일간의 고민 끝에 기존 트윗 목록을 삭제하면 된다는 로직을 생각해냈다.(유레카를 외칠 뻔..)
function removeTweet() {
const deleteCommen = document.querySelector('.mybox2');
while (deleteCommen.children.length > 1) {
deleteCommen.removeChild(deleteCommen.lastChild);
}
}3번의 경우는 아래와 같이 Date 메서드를 활용하여 간단하게 설정할 수 있었다.
let newObj ={};
let newName = document.querySelector('#idName').value;
let newComm = document.querySelector('#commentName').value;
newObj.user = newName;
newObj.message = newComm;
newObj.created_at = new Date().format();
DATA.unshift(newObj);3번까지 구현하고나니 4번 과정은 조금 수월했다. Check New Tweet 버튼의 ID(random)에 onclick 메서드를 설정하고 RandomTweet 함수에 연결되도록 하였다.
document.getElementById("random").onclick = RandomTweet;
function RandomTweet(){
코드 작성
}마지막 5번 과정도 일주일정도 고민의 시간이 필요했다. 이 과정은 결국 배열의 요소 추가 개념을 활용하면 되는 것이었다. 즉 반복문을 실행하여 DATA 사용자와 매개변수(userName)로 지정한 사용자이름이 같을 때 새로운 배열에 추가하는 것이다.
function nameFilter(userName) {
let filterdName = [];
for (let i = 0; i < DATA.length; i++){
if(DATA[i].user === userName){
filterdName.push(DATA[i]);
}
}
}그러나 여기서 또 한번의 고비를 맞게 되는데, 그것은 바로 기존 함수에 filterdName이라는 매개변수를 지정했을 경우 실행이 되지 않는다는 것이었다. 이것때문에 또 한번 힘든 시간을 보냈다(ㅎㅎ) 그러다 정말 순간적으로 간단히 문제를 해결하게 되었다. 문제점은 바로 애초부터 기존함수에 DATA라는 매개변수를 지정해놓지 않다보니 뒤에서 filterdName이라는 매개변수를 지정했을 때 인식을 하지 못한 것이었다. 컴퓨터 언어라는 것은 정말.. 유연하지 못하다는 걸 제대로 느꼈다😂😂
function oldTweet(DATA){}
oldTweet(filterdName);많은 고비를 넘기고 이제 끝난 줄 알았으나, 필터링 구현한 것을 직접 작동해보니 필터링한 화면에서 다시 기존 목록으로 돌아가는 로직이 필요하다는 걸 깨닫게 되었다^^; Check New Tweet 버튼을 클릭했을 때 이 버튼의 value가 Go Back이면 다시 Check New Tweet으로 바뀌고 기존 목록은 지워준 후 원래 목록이 나올 수 있도록 하고, 버튼의 value가 Check New Tweet이면 원래대로 랜덤 트윗을 생성하는 역할을 할 수 있게 하였다.
document.querySelector('#random').onclick = reTweet;
function reTweet(){
if(document.querySelector('#random').value === "Go Back"){
document.querySelector('#random').value = "Check New Tweet";
removeTweet();
oldTweet(DATA);
} else if(document.querySelector('#random').value === "Check New Tweet"){
RandomTweet();
}
}이렇게 하고나니 정말 Twittler 과제는 끝이었다..! 이것을 구현하기 위해 얼마나 많은 시행착오를 겪었는지 모른다. 그러나 덕분에 DOM과 JS, HTML의 유기적 작동 원리에 대해 이해할 수 있게 되었고 Hiring Assessment의 DOM 관련 문제를 가장 쉽게 풀 수 있었다. 또한 스스로 생각했을 때 0에 수렴할 정도였던 나의 코딩 실력은 이상하게도(?) 이 과제를 해결하고 난 후 50정도로 뛰어올랐고 이후 코플릿을 풀 때도 레퍼런스를 보지 않고 해결하는 빈도가 늘었다. 그러다보니 코딩에 점차 흥미가 생기기 시작했다. 어디선가 코딩 실력은 계단식으로 오르는 것이 아니라, 실력이 제자리에 멈춰있다고 느끼다 어느 순간 확 뛰어오를 때가 있다고 들었는데 정말 그런건가보다..!😱
