codestates
-
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 구현하기 - (4) HTML에 입력한 글을 javascript로 처리하기캡틴 코딩일기/javascript 2020. 3. 10. 13:00
Twittler 구현하기 - (4) HTML에 입력한 글을 javascript로 처리하기 벌써 twittler에 대한 네 번째 포스팅이라니! 이번에는 user name과 comment 아래에 만들어둔 text / textarea에 직접 입력하는 내용을 javascript 함수를 사용해서, new tweet으로서 추가하는 방법에 대해 정리하겠다. 지난 포스팅에서 다루었던 DOM관련 내용 중에, selector를 지정하는 방법은 네 가지가 있다고 언급되었다. 어떤 selector에도 사용이 용이한 'querySelector'를 사용하여 기능 구현에 대해 설명하려고 한다. 먼저, 입력 ~ 출력의 순서에 대해 정리해보았다. 1) user name과 comment 에 각각 해당하는 내용을 작성한다. 2) twee..
-
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..
-
TIL : underscore.js _.reduce method 만들기(javascript)캡틴 코딩일기/javascript 2020. 3. 7. 17:44
TIL : underscore.js _.reduce method 만들기(javascript) ** 상/하단의 광고 클릭 한 번이, 꾸준한 창작활동에 큰 도움이 됩니다 :) ** 지난 _.uniq 메소드에 이어서, _.reduce 메소드 구현에 대해 정리해본다. 먼저, 배열 메소드로서의 reduce 에 대한 개념(동작원리, 매개변수)에 대해 정리해보았다. array.reduce(function(accumulator, currentValue, currentIndex, array){ return do something }, []); // 여기 입력된 빈 배열이 초기값(initialValue) ⭐️매개변수 accumulator (누산기) : callback 함수의 반환값을 누적하며 저장하는 변수. current..
-
코딩 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코스를 수강하고 있지만, 주중에 질문거리를 충분히 생각할 수 없는 지금의 환경이라면 주말에 출근(?)을 하게 되어도 '좋은 질문'을 '잘' 할 수 없게 된다. 금요일 저녁이 되어서야 부랴부랴 다음날의 학습 진도를 확인하고 토요일의 오피스아워에..
-
Javascript Array method(배열 메소드) map 복습캡틴 코딩일기/javascript 2020. 2. 16. 00:08
Javascript Array method(배열 메소드) map 복습 ** 상/하단의 광고 클릭 한 번이, 꾸준한 창작활동에 큰 도움이 됩니다 :) ** 요새는 평일에 맥북을 켜고 앉을 시간이 없다. 매월 수걍료를 지불하며 시간과 비용을 허투루 쓸 수 없기에 주말에는 꼭 오피스 아워에 출석해서 한 주 간의 고민에 대한 힌트를 받아오려고 열심인데, 그것도 내 마음대로는 되지 않는다. 몇 시간씩 한 자리에 앉아 집중할 시간이 부족한 나는, 오늘도 이렇게 복습을 핑계로 공부는 뒤로하고 블로그에 포스팅을 하고 있... 기본이 중요하다는 것은 잘 알고 있지만, 어떻게 머리에 담아두어야 할까? 라는 생각을 해 보면 아직도 좀 막막하다. 아마, 체계적인 나만의 학습방법이 없어서 일 것이다. 이렇게 블로깅을 통해서라도..
-
코딩(coding)은 어떻게 공부해야 할까?캡틴 코딩일기 2020. 1. 27. 23:45
코딩(coding)은 어떻게 공부해야 할까? ** 상/하단의 광고 클릭 한 번이, 꾸준한 창작활동에 큰 도움이 됩니다 :) ** 코딩은 어떻게 배워야 할까. 코딩 공부는 어떻게 시작해야 할까. 4차 산업혁명이 온다는 이야기를 뉴스 등에서 처음 접한지도 꽤 되었으니, 이미 그 물결속에 있다고 해도 과언이 아닐 것이다. 물론 거창한 이름만큼의 편의들이 내 삶에 가까이 와닿을 정도의 체감은 적다. 초등학생 시절(대부분을 '국민학교' 아래서 보냈지만) 브라운관 TV화면을 통해 즐겨보던 '2020년 우주의 원더키디' 라는 만화영화에 그려졌던 2020년의 모습은 아니지만 (아니어서 다행이다.) 최근 몇개월에 걸쳐 고민했던 일들, 정답은 아니겠지만 한 발 떼어보자는 결심을 통해 코딩을 공부하게 되었다. 앞으로 이 카..