Twittler 과제를 했다.

• appendChild 메서드를 썼다가 오류를 만났는데 알고보니 데이터가 string 형이었다. appendChild는 "노드"와 노드를 연결해 주는거라 document.createTextNode 메서드를 사용해서 노드로 만들어 준 뒤 appendChild를 해줘야했다.
• appendChild 메서드를 계속 쓰다가, innerHTML를 쓸 때보다 상대적으로 코드가 길어지는 것 같아 바꿀까 고민이 됐다. 하지만 같은 질문이 스택오버플로우에 있어서 봤더니 appendChild가 훨씬 빠르다고해서 유지했다. 속도 비교 => https://jsperf.com/innerhtml-and-createtextnode
• 전날 세션에서 배운 class를 써보고 싶어서, 함수로만 되어있던 코드에 class Tweet을 작성해 주었다. 이름, 메세지, 작성일을 데이터로 받고 화면 출력 Print 함수를 정의했다. 그런데 화면 출력을 위해 article, span, div 등의 element를 생성하고 appendChild 메서드로 엮어주는 작업을 Print 함수에서 해야할 지 constructor에 넣어도 될 지 고민이 됐다.
• 👆이 클래스는 localStorage를 사용하는 방식으로 수정하면서 없어졌고 다시 함수 방식으로 바뀌었다... 😂
• 내가 원하는 기능의 코드를 여기저기서 가져왔더니 이 페이지가 제대로 돌아가는 환경이 어디까지일지 걱정됐다. Twittler 과제 결과물을 소개할 때 정리해봐야겠다.
• 구글 개발자 모드에 재미를 느꼈다. 실제 트위터에서 svg를 가져오면서 열어보게 됐는데 구조적으로도 따라하게 되었다. div로 되어있던걸 section, article로 시간은 time 태그에 '6분 전'등의 텍스트를 보여주고 정확한 시간은 datetime 속성 값에 넣어주고 있어서 똑같이 바꿨다. 안그래도 시맨틱 태그쓰고 싶었는데 잘됐다.

• 오랜만에 퍼블리싱도 하게 되어서 집중해서 열심히 했다. 트위터 마케팅 페이지를 벤치마킹 했고 PC/Tablet(이라고 쓰고 PC 레이아웃이 어울리지 않는 지점이라고 읽는다.)/Mobile 세 해상도로 분기하여 적응형으로 디자인했다.

  • 벤치마킹 1 - 디자인 @Stink Studios
  • 벤치마킹 2 - 실제 페이지
• Mobile 분기는 실제 트위터의 방식대로 트윗 작성 인풋을 메인 화면에 노출하지 않고 버튼만을 제공한 뒤, 모바일용 인풋 페이지로 연결해 주었다. 다른 페이지에서 작성한 내용을 어떻게 메인에 뿌려줄까 잠깐 고민했으나, localStorage에 저장해준 뒤 메인 화면으로 이동시켜주면 방금 작성된 내용이 같이 출력되기 때문에 금방 해결했다.
• 그동안 배우겠다고 다짐만 했던 SCSS를 드디어 해봤다. CSS 베이스가 있으니까 어렵지는 않았는데, 이 기술만의 특장점을 많이 활용한 것도 아니라서 아쉽다. 변수나 중첩, &로 부모 선택하는 것 정도만 써 본... 다음 번에 또 디자인할 일이 생기면 더 많이 다뤄봐야지!
• 로컬에서만 쓸 수 있으므로 Twitter Private라는 컨셉을 만들어 봤다...😃
• 이번엔 커밋도 자주 해줬다!