Programming (47) 썸네일형 리스트형 Data Structure(1) Stack & Queue 1. Stack LIFO: Last In, First Out. [후입선출] Stack 설명 예시 1. Stack은 쌓여있는 접시 더미와 같이 작동한다. 새로운 접시가 쌓일 때도 맨 위에서 쌓이고, 접시를 가져갈 때도 맨 위에서 가지고 가는 것과 같다. (LIFO: last in, first out). Stack 설명 예시 2. Stack은 하노이의 탑과 비슷한 원리를 갖는다. * Stack에는 할당된 공간이 있다. → Stackoverflow / "Maximum stack exceeded" 발생! Stack 구조에 사용되는 메소드들 : - 데이터 요소를 스택의 최상단에 추가하는 push(element) - 스택의 최상단에서 데이터 요소를 제거하고 반환하는 pop() 아래 코드는 직접 Stack을 가지고 .. ESlint ESLint는 문법을 교정해주는 Grammarly 프로그램과 같은 역할을 한다. Linter를 이용하면 단순히 문법을 고쳐줄 뿐만 아니라, VSC에서 코딩 스타일까지 점검해준다. * 개발자가 원하는 추가 규칙들까지 직접 넣어서 작성한 코드를 검사할 수가 있다. ESLint Installation 자, 그럼 ESLint는 어떻게 설치할 수 있나? ESLint의 공식 홈페이지가 있다. 구글링을 통한 다른 블로그나 글보다 공식 문서를 참고하는 것이 항상 좋다. 공식 문서를 따라 ESLint를 Sprint Repository에 설치하자. * npm 혹은 yarn을 통해 설치할 수 있는데, npm만 먼저 알아보자. "npm install eslint --save-dev" * 설치가 잘 되었다면, package.j.. .bind Method bind 메소드 .bind는 .call과 유사하게 this 및 인자를 바인딩하나, 당장 실행하는 것이 아닌 바인딩된 함수를 리턴하는 함수이다. 첫번째 인자는 this, 두번째 인자부터는 필요한 파라미터를 전달합니다. fn.bind(this값, 인자1, 인자2, ...) .bind의 사용 예시를 살펴보자. bind는 이벤트 핸들러에서 이벤트 객체 대신 다른 값을 전달하고자 할 때 유용하다. 예시1. let target = document.querySelector('#target') let users = ['김코딩', '박해커', '최초보'] users.forEach(function(user) { let btn = document.createElement('button') btn.textContent = u.. .call & .apply Methods 함수를 실행하는 세가지 방법들. * 단순히 소괄호를 사용하는 방법 말고 메소드를 이용해 실행할 수 있다. function foo() { return 'bar' } foo() foo.call() foo.apply() 특히, .call, .apply 호출은 명시적으로 this를 지정하고 싶을 때 사용한다. ∴ 첫번째 인자가 항상 this값이 된다. ** .call과 .apply 메소드의 차이점 : .apply 호출은 배열을 인자로 받는다. ** // null을 this로 지정한다. Math는 생성자가 아니므로 this를 지정할 필요가 없다. Math.max.apply(null, [5,4,1,6,2]) // 6 Array prototype에서 메소드를 빌려와 this를 넘겨 실행할 수도 있다. 아래 예시들을 .. [this] Keyword this 키워드 this는 함수 실행시 호출(invocation) 방법에 의해 결정되는 특별한 객체이다. * 함수 실행시 결정되므로, 실행되는 맥락(execution context)에 따라 this는 다르게 결정된다. 함수 실행의 다섯가지 방법 1. Global : console.log(this) * 정확히 말하면 함수 실행은 아니고, 전역에서 this를 참조할 때를 의미한다. 2. Function 호출 : foo() 3. Method 호출 : obj.foo() 4. new 키워드를 이용한 생성자 호출 : new Foo() 5. .call 또는 .apply 호출 : foo.call() / foo.apply() 함수 실행에 따른 this 바인딩 패턴 이 함수 실행의 다섯가지 방법에 따라 this 또한 다섯.. Arrow Function Arrow Function / 화살표 함수 ES6에서 새로 도입한 화살표 함수(arrow function)와 일반 함수를 비교해보자. 보통 함수 표현식을 축약한 형태로 표시된다. 원래의 함수 표현식 : const add = function (x, y) { return x + y } 화살표 함수 사용 : const add = (x, y) => { return x + y } * function 키워드를 화살표로 축약 가능하다. * () 소괄호(parentheses)를 사용하는 것은 가능 * 함수의 본문(body)에 return 문만 있는 경우, 화살표 함수는 return을 생략 가능하다. ※ 이 때 주의해야 할 점은 {} 중괄호(curly brace)는 사용하면 안 된다. const add = (x, y) .. Node.js Related Tools Achievement Goals Immersive 과정에서 사용하게 될 node.js 및 nvm, npm, package.json의 역할에 대해 이해할 수 있다. 테스트를 npm을 통해 실행시킬 수 있다. Git workflow를 통해 Pair와 협업할 수 있다. pair의 repository를 remote repository로 등록하고, 작업 현황을 공유할 수 있다. 최신 JavaScript 버전을 적극적으로 사용할 수 있다. 화살표 함수, 구조 분해 할당 등의 문법을 사용할 수 있다. this와 call, apply, bind와 같은 함수 메소드의 작동을 이해할 수 있다. Code Quality의 의미와 Code Quality를 향상시키기 위한 도구들에 대해 이해할 수 있다. Linting의 의미와 .. API [Application Programming Interface] [날씨 API] 오늘은 그동안 학습한 개념들을 종합해서 활용해야하는 fetch API를 통한 날씨 앱 만들기를 해봤다. API = Application Programing Interface 먼저, API 가 무엇인지 위키백과에서 정의는 아래와 같다. API는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 즉, API는, 특정 데이터를 송수신 하는 방법을 얘기를 하는 것이다. 또는, 어떤 특정 사이트에서 특정 데이터를 공유할 경우 어떠한 방식으로 정보를 요청해야 하는지, 그리고 어떠한 데이터를 제공 받을 수 있을지에 대한 규격들을 API라고 한다. 그렇다면 특정 정보를 요청하는 사람과 제공해주는 주체가 있을 것이다. 예를 들어.. 이전 1 2 3 4 5 6 다음
