기초적인 Twitter 구조 만들어보기

DOM을 이용하여 동적인 웹 페이지를 만들어보자

아직 많이 부족한 실력이지만 DOM을 배운 기초지식을 바탕으로 트윗을 작성하고 올리는 기능을 직접 만들어 보면서 어떻게 동적으로 작동되는지 알아보았다. 아래 해당 링크를 클릭하면 코드를 직접 확인해볼 수 있다.
Git 👈 Jeong-HW Repositories

동적으로 생성되는 기본 트윗구조(html)

        <li class="writer">
          <div class="userData">
            <div class="name">정현웅</div>
            <div class="date">2021-01-01 17:33:54</div>
          </div>
          <div class="comment"><p>안녕하세요!</p></div>
        </li> 

date라는 class에 실시간으로 작성된 트윗의 시간이 입력되고 트윗을 작성한 사용자 이름과 코멘트가 name과 comment의 textContent로 생성된다

html 실행화면

• 객체에 저장되어있는 기존 트윗 내용들을 동적으로 생성하여 목록에 추가한다.

var DATA = [
  { user: 'ingikim', message: 'Welcome to Code States #codestates', created_at: '2019-01-03 12:30:20' },
  { user: 'satya', message: 'this is test message #pair #programming', created_at: '2019-01-04 18:30:20' },
  { user: 'sundar', message: 'code now! #work #hard', created_at: '2019-01-05 07:30:20' },
  { user: 'steve', message: 'Stay hungry, and stay foolish', created_at: '2015-01-03 12:30:20' },
  { user: 'tim', message: 'education for real world', created_at: '2019-01-04 18:30:20' }
];

• UserName에 해당 사용자의 이름과 적고 싶은 Comment를 작성하여 Twitt!버튼을 클릭하면 트윗 목록의 최상단에 작성된다.
  

• 트윗 목록의 좌측 상단의 Check new Twitt버튼을 클릭하면 기존에 객체 형태로 저장되어 있는 사용자 이름과 메시지 내용이 랜덤으로 생성된다.
  

• 목록 내의 User를 클릭하면 Timeline 형식으로 해당 사용자의 트윗만 목록에 보여준다. 그리고 Go back버튼을 클릭하면 다시 전체 트윗 목록을 보여준다.
  

개선 및 추가하고 싶은 기능들...

1. 트윗 삭제기능
2. 트윗을 작성하지 않았을 경우, Twitt버튼 비활성화 (현재는 알림창이 뜨도록 구현)
3. CSS 다듬기
4. 트윗이 언제 만들어졌는지에 대한 사용자 친화적 방식 (e.g. "10분 전")

느낀점

정적인 html에 Javascript를 활용하여 동적으로 작동하는 코드를 완성할 때마다 그에 따라오는 희열감을 느꼈다. 디자인 감각이 많이 부족하여 Front-end 개발자가 될 수 있을지 걱정도 느꼈다. 아직은 많이 부족한 실력이라서 어디 보여주기 좀 부끄러운 결과물이지만 오늘을 기억하면서 나에게 더 큰 자극제가 될 것이라고 생각된다.