본문 바로가기

LearningJavaScript

C.S. [Data Structure] Stack, Queue 스스로 검색을 통해 공부할 수 있다. 1. 자료구조를 구현하는 코드는 어떻게 작성할지 생각해보기 2. 자료 구조 모양을 추상적으로 그림 그리기 3. 해당 자료구조가 갖는 property와 method 찾아보기 4. 각 method는 어떻게 동작되는지 알아보고 수도 코드 작성해보기 5. 블로그 등에 TIL 형식으로 기록하기 Stack Stack으로 쌓여있는 접시같은 물건 더미처럼 작동한다. 새로운 접시를 쌓을 때도 맨 위에 쌓이고, 접시를 가져갈 때도 맨 위부터 가져가는 것을 연상할 수 있다. 가장 나중에 들어온 데이터가 가장 먼저 빠지고, 아니면 가장 먼저 들어온 데이터가 가장 나중에 나간다. (LIFO: Last In, First Out or FILO: First In, Last Out) Stack에 .. 더보기
C.S. [Data Structure] Intro 자료 구조(Data Structure)는 크게 네 가지 부분으로 나누어 볼 수 있다. 1. 스택과 큐 스택과 큐는 자료구조들 중 가장 간단해서 활용도가 높은만큼 중요도도 가장 높은 자료구조다. 2. 연결 리스트와 해시 테이블 배열처럼 데이터를 선형적으로 담을 수 있는 연결 리스트가 배열과는 어떻게 다른지 비교하며 공부할 수 있다. 해시 테이블은 자료구조들 중 가장 어렵고 성격도 다르지만, 해시 테이블만이 갖는 장점을 주의깊게 볼 필요가 있다. 3. 그래프, 트리, 이진 탐색 트리 위 세 개는 모두 그래프 형태를 갖지만, 결코 수학적인 부분에서만 사용되는 것은 아니다. 실생활 문제를 해결하는데 어떻게 적용이 가능한지 볼 수 있다. 4. 시간 복잡도(Time Complexity) 시간 복잡도는 알고리즘을 표.. 더보기
node.js 그리고 설치방법 Node.js 노드(Node.js)는 크롬 V8엔진으로 만들어진 JavaScript 런타임이다. (nodejs.org/en/) 여기서 V8은 자바스크립트 언어를 기계어(실제 컴퓨터가 이해할 수 있는 언어)로 컴파일해주는 엔진이다. Node.js를 소개하는 문구 중에 이벤트 기반의 논블로킹 I/O모델이라고도 한다. 여기서 이벤트는 브라우저에서 유저의 버튼 클릭이나 네트워크에 리소스를 요청(fetch등) 하는 것 등을 말한다. 2020/09/22 - [LearningJavaScript] - blocking vs. non-blocking (in terms of Node.js) Runtime Runtime(런타임)에서 런타임이란 프로그래밍 언어(e.g. javascript)가 구동되는 환경 또는 프로그램을 말한.. 더보기
18. 재귀(Recursion) 쪼개서 생각하는 습관 기르기 문제: 자연수의 리스트를 입력으로 받아 리스트의 합을 리턴하는 함수 'arrSum'을 구하라 보통, 지금까지는 새 변수를 만들어 0으로 할당하고, for문을 이용해 0번째 인덱스부터 마지막 인덱스를 그 변수에 더해주는 방법으로 구했다. 하지만 얼마전에 배운 reduce를 이용한 고차함수 사용이 가능할 것 같다. how? 직접 해보기!!! function arrSum(arr) { return arr.reduce(function (acc, cur) { return acc + cur; }, 0); } 재귀 vs. 고차함수 다른점..? 재귀는 언제 사용하는게 좋을까? (사용시점을 판단하는 기준) 1. 주어진 문제가 (구조는 비슷하고) 더 작은 문제로 나뉘어 질 수 있는 경우: 어제 .. 더보기
17. 함수 메소드 Introduction 함수를 실행하는데 다양한 방법들이 있다. function(method) 호출 new 키워드를 이용한 호출 함수 메소드 .call .apply를 이용한 호출 등.. Function Methods Function.prototype.apply() Function.prototype.bind() Function.prototype.call() github.com/codestates/pre-help-desk/issues/1958 .call & .apply The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object), according to.. 더보기
16. 비동기 호출과 타이머 API prerequisite: callback function 2020/08/14 - [LearningJavaScript] - 15. 고차함수 비동기 호출 function B() { console.log('called at the back!'); } function A(callback) { callback(); } A(B); // callback === B 위의 예시에선, 다른 함수(function A)의 전달인자(argument)로 넘겨지는 함수(function B)가 콜백 함수다. callback 함수(B)를 인자로 넘겨받는 함수(A)는 callback 함수인 B를 필요에 따라 즉시 실행(synchronously), 동기적으로 실행을 하고 있다. 하지만, 필요에 따라 콜백 함수 B를 나중에 비동기적으로 (.. 더보기
15. 고차함수 일급 시민 (first-class citizen) 일급 시민의 조건(특징): 변수 안에 담을 수 있다 즉, 변수에 할당(assign) 할 수 있다 다른 함수(또는 메소드)의 인자(argument)로 전달 될 수 있다 반환(return) 값으로 사용할 수 있다 대부분의 프로그래밍 언어에서 숫나자 문자는 1급 시민의 조건을 충족시킨다. 그리고 자바스크립트에서 객체 또한 위의 조건을 충족시키기 때문에 일급 객체가 되고, 자바스크립트 함수는 객체를 상속받기 때문에 일급 함수가 된다. 함수를 변수에 저장하여 사용하는 법을 함수 표현식(function expression), 그리고 **hoisting is JavaScript's default behavior of moving all declarations to t.. 더보기
14. The DOM(Document Object Model) 다시 DOM 을 만남! 이게 있어서 JavaScript가 html에 접근(엘리먼트의 속성값을 얻어내거나, 변경)이 가능해지고, 웹페이지가 작동이 가능해지는! --> DOM을 활용하면 html을 조작할 수 있다. The Document Object Model (DOM) is a programming interface for HTML and XML documents. DOM은 자바크립트 객체와 비슷한 트리 구조를 갖고 있다. 나뭇가지로 잘 표현될 수 있는 부모-자식 관계를 떠올리면 쉽다. 예를 들어 한 부모 아래 여러 자식이 있는 것은 가능하지만, 그 반대는 없는 경우를 말한다. 이런 하나인 부모가 자식을 여러개 갖는 구조가 계속 반복되는 것이다. console.log는 html 형태로 보여주지만, cons.. 더보기