Twittler(Twitter clone) 구현하기 - (1) 개요

Twittler(Twitter clone) 구현하기 - (1) 개요

 

** 상/하단의 광고 클릭 한 번이, 꾸준한 창작활동에 큰 도움이 됩니다 :) **

 

과제를 완성한 지 시간은 조금 지났지만, 스스로 뿌듯했던 twittler 구현에 대해 정리해두고 싶어서

몇 개의 포스팅으로 구분하여 해결 과정을 남겨보려고 한다.

 

twittler 개요 / 구현기능 메모

 

그림에 메모한 주요 구현 기능들을 다시 한번 정리해보면,

 

• (네 번째 블록) 처음 페이지를 열었을 때, database(data.js에 등록된 DATA 배열의 요소들)를 tweet 창에 렌더링 할 것.
• (두 번째 블록) user name과 comment란에 내용을 입력하고, Tweet! 버튼을 눌러서,
  tweet 창(네 번째 블록)에 위로 쌓아 올리는 tweet을 넣어준다.
• (세 번째 블록) check new tweet을 클릭하면, data.js - random user / random message 배열에서
  불규칙하게 user와 message를 선택하여 tweet 창에 쌓아 올린다.
• (네 번째 블록) 새로운 tweet, 랜덤 한 tweet을 출력할 때, user name, message와 함께 출력되는 시간은
  YYYY-MM-DD   hh-mm-ss (연-월-일  시-분-초)의 형태를 띤, 현재시간을 출력한다. 
• (네 번째 블록) 출력된 tweet 창에서, 임의의 user name을 클릭하였을 때,
  해당 user name에 해당하는 tweet만 모아서 보여주는 기능을 구현한다.

각각의 기능은 javascript를 활용하여 '동적'으로 구현했다.

'동적(dynamic) 구현' 이라는 말을 여러 번 들었는데, 

나름대로 정리한 동적 프로그래밍의 정의는 아래와 같다.

 

 

"중복되는 코드를 하나의 포맷을 반복 사용하게 지정하여, 낭비를 줄이는 것. "

(= 코드 재활용성을 높이는 것.)

 

 

다음 포스팅에서는 본격적인 jacvascript 코딩 전, HTML 구조에 대해 다루어보도록 하겠다.

 

** 상/하단의 광고 클릭 한 번이, 꾸준한 창작활동에 큰 도움이 됩니다 :) **