twittler
-
Twittler(Twitter clone) 구현하기 - (5) random한 tweet 불러오기캡틴 코딩일기/javascript 2020. 3. 11. 14:00
Twittler(Twitter clone) 구현하기 - (5) random 한 tweet 불러오기 이번엔, check new tweet 버튼을 눌러서 random 한 user name - message를 불러와서, tweet창에 추가하는 함수에 대해 정리해보겠다. data.js 에 담긴 data는 user name과 message가 각각 분리된 '배열(array)'로서 저장되어있다. randomUser = []; randomMessage = []; 그리고, 내가 만든 함수는 아니지만 random한 index를 생성하는 함수가 미리 구현되어있었다. 이 포스팅을 정리하면서 처음 들여다보게 되었는데, MDN에서도 내용을 다루고 있어서 쉽게 이해가 되었다. (Math.floor / Math.random 을 검색..
-
Twittler 구현하기 - (3) javascript DOM(Document Object Model)캡틴 코딩일기/javascript 2020. 3. 9. 13:00
Twittler 구현하기 - (3) javascript DOM(Document Object Model) ** 상/하단의 광고 클릭 한 번이, 꾸준한 창작활동에 큰 도움이 됩니다 :) ** 드디어, javascript를 활용하여야 하는 때가 왔다. 처음 해결해야 하는 과제들을 읽고 나서, 구현해야 하는 기능에 대해서는 알 수 있었지만 그 기능들을 어떻게 함수로 만들어야 하는지에 대해서는 갈피를 잡지 못했다. 질의응답 페이지에 가서 다른분들의 고민들을 기웃거려보기도 하고, 비슷한 고민에 머리를 부여잡고 끙끙대셨던 분들의 기록도 참고는 하였다. 하지만, 이때부터 Visual studio의 화면 가득한 코드들을 정식으로 보게 되었던 터라 다른 분들이 작성한 코드는 쉽게 눈에 들어오지 않았다. 게다가 그 구현 논..
-
Twittler(Twitter clone) 구현하기 - (2) HTML (selector 지정)캡틴 코딩일기/javascript 2020. 3. 8. 13:00
Twittler(Twitter clone) 구현하기 - (2) HTML (selector 지정) ** 상/하단의 광고 클릭 한 번이, 꾸준한 창작활동에 큰 도움이 됩니다 :) ** 개요에서는 twittler를 동적으로 구현하기 위한 javascript를 활용한 구현 목표를 집중적으로 다루었으나, 구현되는 기능들을 잘 보여줄 수 있는 HTML도 정말 중요하다. 이미, twittler mock-up을 구현해 보았기 때문에 쉽게 만들 수 있다고 생각하지만 javascript와의 조화를 생각한다면 아직도 고민해야할 부분들이 많다. (실제 그렇게 삽질을 오래도록 했었다.. ) 1) HTML 구성 HTML/CSS 로 mock-up을 구현했던 기억을 되짚어가며, 화면 구성의 뼈대가 되는 영역을 크게 4가지로 구분하였..
-
Twittler(Twitter clone) 구현하기 - (1) 개요캡틴 코딩일기/javascript 2020. 3. 7. 19:26
Twittler(Twitter clone) 구현하기 - (1) 개요 ** 상/하단의 광고 클릭 한 번이, 꾸준한 창작활동에 큰 도움이 됩니다 :) ** 과제를 완성한 지 시간은 조금 지났지만, 스스로 뿌듯했던 twittler 구현에 대해 정리해두고 싶어서 몇 개의 포스팅으로 구분하여 해결 과정을 남겨보려고 한다. 그림에 메모한 주요 구현 기능들을 다시 한번 정리해보면, (네 번째 블록) 처음 페이지를 열었을 때, database(data.js에 등록된 DATA 배열의 요소들)를 tweet 창에 렌더링 할 것. (두 번째 블록) user name과 comment란에 내용을 입력하고, Tweet! 버튼을 눌러서, tweet 창(네 번째 블록)에 위로 쌓아 올리는 tweet을 넣어준다. (세 번째 블록) ch..
-
코딩 2.5개월차, 잘 모르겠다. (javascript, HTML/CSS)캡틴 코딩일기/HTML, CSS 2020. 2. 17. 02:55
코딩 2.5개월 차, 잘 모르겠다. (javascript, HTML/CSS) ** 상/하단의 광고 클릭 한 번이, 꾸준한 창작활동에 큰 도움이 됩니다 :) ** 작년 12월부터 수강을 시작한 코드스테이츠 Pre-course. 2.5개월을 넘어 3개월을 꽉 채우기 직전 단계에서 좀 힘들다. 핑계라며 마음가짐이 약해지는 자신에게 채찍질을 해 댔지만, 역시 평일에는 피곤해서 쉬이 컴퓨터에 손이 가지 않는다. (300만원짜리 맥북이라도 열기 싫더라.) Premium plus코스를 수강하고 있지만, 주중에 질문거리를 충분히 생각할 수 없는 지금의 환경이라면 주말에 출근(?)을 하게 되어도 '좋은 질문'을 '잘' 할 수 없게 된다. 금요일 저녁이 되어서야 부랴부랴 다음날의 학습 진도를 확인하고 토요일의 오피스아워에..