Twittler 완성

베어 미니멈 조건 4가지를 만족하는 Twittler(Tweet의 MVP버전)를 모두 완성하고 github에 제출 완료 했다.

미리 며칠 전에 직접 만들어 놓은 Mock-Up(HTML, CSS)에 생명력을 불어넣는 작업은 생각보다 재미있었다.

한편, 아래 4가지 조건을 만족시키면서 깨달은 점들이 있다.

• 조건 1: 목업에서 하드코딩되어있던 트윗 대신에, JavaScript에 담긴 이미 작성되어 있는 트윗들(DATA.js에 있는 JSON 이용)을 보여주세요.

  JSON형태의 DATA란 변수에 트윗 내용들을 객체형태로 넣고, 이것을 HTML 화면에 뿌려주겠구나!

• 조건2: 언제 트윗들이 만들어졌는지에 대한 timestamp를 보여주세요. 이 timestamp는 트윗이 작성된 실제 시간을 반영해야하며 하드코딩되지 않아야합니다.

  new Date() 만 이용하면 사용자가 봤을 때 보고 싶지 않은 timestamp가 찍히고, format을 정의해 줘야 사용자 친화적인 timestamp를 만들 수 있구나!

• 조건3: 트윗을 작성하고 제출하면, 목록에 신규 트윗이 추가될 수 있게 하세요.

  신규로 추가된 트윗을 추가할 때 prepend()를 이용하는 것보다 DATA 변수에 unshift()로 넣어서 항상 HTML 뿌려줄 때는 DATA만 뿌려주게 만들면 더 단순하고 이해하기 쉽겠구나!

• 조건4: 트윗 작성자의 이름을 클릭하면 해당 사용자로만 필터링하여, 해당 사용자의 타임라인을 볼 수 있도록 하세요.

  클릭 이벤트를 할당할 때 HTML로 Rendering 된 후에 반복문으로 하나씩 할당하는 게 아니라 Rendering 함수 내에 클릭이벤트 코드를 같이 넣음으로써 DATA의 객체가 HTML 트윗으로 탄생될 때 마다 클릭이벤트가 할당되도록 해야만 새 트윗이 추가되도 클릭이벤트를 할당 할 수 있다. Rendering된 후에 클릭이벤트를 할당하면 작성자 이름의 클릭이벤트는 딱 한번만 동작하고 비활성화가 된다!

! JS 코드를 짤 때도 최대한 같은 범위의 일은 하는 것끼리는 묶어서 모듈로 구성해야 훨씬 단순하게 코드를 읽을 수도 있고 오류도 적다는 것을 알았다. 사람이 눈으로 보고 먼저 동작 흐름을 명확하게 이해할 수 있어야 컴퓨터도 올바르게 이해할 수 있다!