캡틴
-
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 구현하기 - (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..
-
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..
-
TIL : underscore.js _.uniq method 만들기 (javascript)캡틴 코딩일기/javascript 2020. 3. 5. 18:00
TIL : underscore.js _.uniq method 만들기 (javascript) ** 상/하단의 광고 클릭 한 번이, 꾸준한 창작활동에 큰 도움이 됩니다 :) ** underbar라고 명명된 level 4 과제를 해결하려고 2주를 전전긍긍했다. (사실 이제야 겨우 시작점에 섰다. 여보 미안.. 학원비가 더 나가겠어..) 사실, 충분히 팁은 주어졌으나 미리 확인하여야 할 Tip이나 관련 자료들을 주의 깊게 읽지 못하고 띄엄띄엄 이해해보려고 한 잘못이 크다. 지난 주말, 극적으로 저녁 늦은시간에 pair programming이 성사되지 않았더라면, 한 주를 더 낭비하게 되었을 것이다. underbar는, undercsore.js로 잘 알려진 함수 라이브러리를 스스로 만들어보는 과제이다. 배열 메소..
-
일본어 입력 ' づ ' 는 어떻게 입력하며, 언제 사용할까?빈짱의 방구석 일본어 2020. 3. 3. 22:02
일본어 입력 ' づ ' 는 어떻게 입력하며, 언제 사용할까? ** 상/하단의 광고 클릭 한 번이, 꾸준한 창작활동에 큰 도움이 됩니다 :) ** 안녕하세요. 30대 일본계회사원 캡틴입니다. 일본어 알파벳 입력을 기준으로 탁음인 ' づ '와 ' ず '는 각각 어떻게 입력을 해야 할까요? 그 전에, 각각 어떤 상황에서 사용될 수 있는지 단어를 예시로 알아봅시다. ■ づ 의 활용 (사용되는 경우) 주로 복합명사 (≒합성명사)가 되며 아래의 동사 첫 글자로 위치하는 ' つ ' 가 탁음인 ' づ ' 로 변화하게 되는데, 이 때에 ' づ '를 사용하게 됩니다. (복합 형용사에도 사용될 수 있어요!) - 付ける（つける） : 붙이다 → 〜さん（~씨 의 호칭） + 付ける = さん付け（さんづけ） ＊さん付け：상대의 이름에 ..
-
코딩 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 복습 ** 상/하단의 광고 클릭 한 번이, 꾸준한 창작활동에 큰 도움이 됩니다 :) ** 요새는 평일에 맥북을 켜고 앉을 시간이 없다. 매월 수걍료를 지불하며 시간과 비용을 허투루 쓸 수 없기에 주말에는 꼭 오피스 아워에 출석해서 한 주 간의 고민에 대한 힌트를 받아오려고 열심인데, 그것도 내 마음대로는 되지 않는다. 몇 시간씩 한 자리에 앉아 집중할 시간이 부족한 나는, 오늘도 이렇게 복습을 핑계로 공부는 뒤로하고 블로그에 포스팅을 하고 있... 기본이 중요하다는 것은 잘 알고 있지만, 어떻게 머리에 담아두어야 할까? 라는 생각을 해 보면 아직도 좀 막막하다. 아마, 체계적인 나만의 학습방법이 없어서 일 것이다. 이렇게 블로깅을 통해서라도..