coding
-
TIL : 문자열 메소드 공부 (문자열 일부만 변환하여 출력하기)캡틴 코딩일기/javascript 2020. 3. 22. 23:11
TIL : 문자열 메소드 공부 (문자열 일부만 변환하여 출력하기) 문자열(배열) 메소드를 사용한 함수를 구현해보았다. ⭐️기능 1. 띄어쓰기로 구분된 문자열을 인자로 할당하면, 단어의 첫 글자를 대문재로 바꾸어준다. 2. 단어가 하나만 주어질 때에도, 여러가지 단어로 구성된 문자열이어도 처리할 수 있다. ⭐️사용한 문자열 메소드 1. split : 분리 기준이 될 문자열을 인자로 할당하여, 문자열을 분리하고 새 배열로 출력하는 메소드. 2. toUpperCase : 주어지는 문자열 전체를 대문자로 변경하여 출력하는 메소드. 3. substring / slice : 시작과 끝의 인덱스 값을 인자로 할당하여, 문자열을 잘라내어 출력하는 메소드. 4. join : 배열의 모든 요소를 연결하여 문자열로 출력하는..
-
TIL : 재귀(Recursion) 함수 / fibonacci numbers 구현캡틴 코딩일기/javascript 2020. 3. 14. 23:50
TIL : 재귀(Recursion) 함수 / fibonacci numbers 구현 오늘은 재귀 함수를 활용한 피보나치수열(fibonacci numbers) 구현을 공부하였다. 재귀 함수란, 자기 자신을 호출하는 함수를 의미한다. 함수에 숫자가 주어지면 1씩 작은 숫자를 곱하고, 마지막으로 1을 곱하여 그 결과를 반환하는 로직에 재귀 함수가 사용되는 예시를 강의에서 보게 되었다. function multiply(n){ if(n === 1){ return 1; // 1은 더이상 곱할 숫자가 없기때문에, 1을 반환 } return n*multiply(n-1); // multiply( )함수를 함수 안에서 다시 사용(= 재귀함수) } // multiply(5) -> 5*multiply(4) 5*[4*{3*(2*..
-
TIL : arguments 객체와 rest parameter(+ separate 연산자)캡틴 코딩일기 2020. 3. 12. 16:37
TIL : Arguments 객체와 rest parameter(+ separate 연산자) underbar(underscore.js) 공부는 참 어렵다. 유용하게 사용할 수 있는 도구로서의 underscore.js를 직접 만들어보는 것은 함수가 작동하는 원리를 알 수 있어서 도움이 되겠으나, 메소드를 하나하나 구현해 나가는 일이 결코 쉽지 않다. 아직 갈피를 못잡고있지만, _.extend 메소드 구현을 위해 헬프데스크를 기웃거리던 중에 'arguments객체' 와 'rest parameter' 에 대한 내용을 보게 되었다. MDN문서와 블로그 포스팅을 읽고, 같은 듯 다른 두 인자들에 대해서 아래와 같이 정리해본다. 같은 점 : 둘 다, 함수의 소괄호 안에 들어가는 매개변수와 관련된 항목이다. 1) ar..
-
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로 잘 알려진 함수 라이브러리를 스스로 만들어보는 과제이다. 배열 메소..
-
코딩 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코스를 수강하고 있지만, 주중에 질문거리를 충분히 생각할 수 없는 지금의 환경이라면 주말에 출근(?)을 하게 되어도 '좋은 질문'을 '잘' 할 수 없게 된다. 금요일 저녁이 되어서야 부랴부랴 다음날의 학습 진도를 확인하고 토요일의 오피스아워에..