전체 글 79

자바스크립트 12. 자료구조(Data Structure) - 연결리스트(Linked List)

자료구조 3번째 연결 리스트를 기록해보자! 📕연결리스트(Linked List) 개념 연결리스트(Linked List)는 영문 뜻 그대로 연결되어 있는 목록을 말한다. 각 데이터들을 하나의 줄로 연결되어 있는 모양을 하고 있는 구조이다. 각각의 데이터들은 링크로 연결이 되어 있다. 연결리스트에는 노드(Node)가 있다. 이 노드 하나하나에는 데이터와 다음 노드를 가르키는 링크가 들어있다. 링크가 반드시 있어야 다음 연결되어 있는 데이터를 찾을 수 있다. 그리고 한 공간에 있지만 분리되어서 있다. 다음 그림을 보면 이해가 쉬울 것 같다. 노란색 상자는 각각의 노드를 표현해주고 있고, 분리되어 있는 두개의 방안에는 각각 그 노드가 가지는 데이터와 다음 노드의 위치를 알려주는 링크가 들어있다. 첫번째 노드는 h..

자바스크립트 12. 자료구조(Data Structure) - 큐(Queue)

계속해서 이어지는 자료구조 기록! 오늘은 큐! 순간 이미지를 보면서 얼마나 맛집일까 궁굼증이 들긴 하지만, 각설하고 오늘은 큐(Queue)에 대해서 기록해보자. ✅큐(Queue)의 개념 큐는 사람들이 음식점이나 놀이기구를 타기위해 기다리는 줄을 생각하면 이해하기 쉽다. 맛집 오픈 10분 전에 가게앞에서 부터 한사람 한사람 줄을 세우는 모습을 상상해보면 좋을 것 같다. 물론 새치기하는 사람들은 없다고 가정한다.(진짜 새치기 하는 인간들.. ㅂㄷㅂㄷ) 맛집이 오픈이 되서 손님들이 들어갈 때, 당연히 먼저 온 사람이 먼저 들어가서 자리를 안내받고 앉게 되고, 주문을 하게된다. 큐도 마찬가지 이다. 먼저 들어간 데이터가 먼저나오는 FIFO(First In First Out) 선입선출 구조로 되어있다. 만약에 맛..

자바스크립트 12. 자료구조(Data Structure) - 스택(Stack)

지금부터 자료구조에 대해서 기록해보자! 시작은 스택! 스택(stack)의 개념 스택은 겹겹이 쌓여 있는 모습을 생각하면 이해에 많은 도움이 된다. 위에 있는 사진을 보면서 생각을 해보자! 돌탑을 쌓기 위해서는 가장 먼저 아랫돌을 놓고 하나씩 쌓아 올려야 한다. 만약에 다 쌓고 나서 아랫돌을 꺼내고 싶을 때는 어떻게 해야할까? (제발 발로 차거나 손으로 밀쳐서 무너뜨린 후에 아랫돌을 취한다 이런생각은 하지 마시길....) 아랫돌을 가져 갈 수 있도록 위에있는 돌을 하나씩 빼가면 된다. 돌탑을 만들고 돌을 빼는 과정을 살펴본다면. 먼저들어 온것이(아랫돌) 가장 나중에 나갈 수 있고, 늦게 들어오는 것(가장 윗돌)이 먼저나갈 수 있는 구조이다. 스택이 이렇다. 마지막에 들어온 것이 먼저나가는 LIFO(Last..

prototype, constructor, __proto__ 정리

자바스크립트는 OOP를 생각하고 만들지 않았다. 그렇기 때문에 객체지향 언어가 아닌 프로토타입 기반 언어이다. 그래서 개발자들은 prototype를 활용해서 OOP적으로 구현해냈다. (진짜 감사하게도 지금은 자바스크립트에서 OOP를 지원하고 있다.🙇🏻) 채신기술 class를 코드로 작성해보고 알아보자! class Test { // 클래스를 만들 때에는 첫글자는 대문자가 국룰! constructor() { } }; let test1 = new Test(); test1; // 첨부된 사진 참조 이렇게 Test라는 클래스를 만들고, test1이라는 인스턴스를 만들고 test1을 확인해 보았다. ⬇️⬇️⬇️ 뭐가 많다.... 오늘은 그중에서 prototype, constructor, __proto__를 기록해보..

리코딩 : TIL 2020.10.29

객체 지향 프로그래밍 (OOP : Object Oriented Programming)

오늘 호그와트에 등록했다. 질문받는다. OOP에 대해서 알아보자 OOP(Object Oriented Programming)은 한국말로는 객체 지향 프로그래밍을 말한다. 하나의 기준이 되는 청사진(blueprint)를 만들고, 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴이다. 예를 들어 호그와트에 새로운 학생이 입학을 했고, 정보를 입력하는 것을 구현 해본다면 아래의 코드처럼 작성이 될 것 같다. let name = 'codingLee'; let house = 'Gryffindor'; let grade = 'Freshman'; // let student = { name = "codingLee", house = "Gryffindor", grade = "Freshman" } 학교 학생..

리코딩 : TIL 2020.10.28

자바스크립트 - 화살표 함수(Arrow Function)

점점 편리하게 살아가고 싶은 사람의 본심이랄까...? 함수 표현식, 함수 선언식을 쭉 써오다 보니, 함수를 작성하는게 그렇게 귀찮거나 복잡하다는 생각이 들지 않았다. 하지만 이 방법을 알게 되면서 새로운 세상에 눈을 떴다. 기록해보자! 화살표 함수는 단순하고 간결하게 함수를 작성할 수 있게 해준다. (물론 난 아직도 조금 어색...) let add = function(x, y) { return x + y; } 보통 우리는 함수를 이렇게 작성한다. 하지만 화살표 함수를 만나게 되는 순간 정말 놀랍도록 간결해 진다. // ex1 let add = (x, y) => { return x + y; } // ex2 let add = (x, y) => x + y; 3줄이었던 함수 코드가, 1줄로 표현이 가능해졌다. ..

자바스크립트 11. 배열메소드(2)

계속해서 메소드를 기록해보자! 첫 번째로 기록해볼 메소드는 forEach이다. forEach는 반복문과 마찬가지고 반복적인 기능을 수행할 때 사용한다. 하지만 for문 처럼 초기화, 조건식, 증감문을 작성하지 않아도 된다. let arr = [1, 2, 3, 4]; let result1 = []; for (let i = 0; i < arr.length; i++) { return result1.push(arr[i]) }; console.log(result1); // [1, 2, 3, 4] let result2 = []; arr.forEach(function (el) { return result2.push(el) }); console.log(result2); // [1, 2, 3, 4] 두개의 코드다 두개의..

자바스크립트 11. 배열 메소드

고차함수를 배웠으니까! 알아두면 유용한 배열 메소드를 기록해보자! (underbar과제인데 정말 정말 정말 정말 쉽지 않았다구....) 먼저 slice부터 기록해보자! let arr = ['s', 't', 'a', 'r', 'b']; // arr.slice([start], [end]) arr.slice(0, 2); // ['s', 't'] slice에는 인덱스 값을 주어서 시작하는 인덱스 번호(start)를 포함하고, 끝 번호(end)를 제외한 사이에 있는 요소를 리턴한다. 위의 코드는 배열을 0번째 인덱스 요소를 포함하고 2번 이전에 있는 요소를 리턴했다. slice경우에는 기존의 배열의 건드리지 않으면서 배열을 조작해 새로운 배열을 만들 때 유용하다. let arr = [1, 2, 3, 4, 5]; ..

자바스크립트 9. Scope(범위)

처음에 Scope에 대해서 배울 때 쉽지 않았다.... 그래도 최선을 다해서 기록을 남겨보자. 먼저 코드를 통해서 살펴보도록 하자! let greeting = 'Welcome'; // global scope function greetUnknown() { // local scope let name = 'Unknown'; return greeting + ' ' + name; } // local scope greetUnknown(); // 'Welcome Unknown' name; // ReferenceError, global scope 위의 코드를 살펴보고 함수를 실행하게 되면 아름답게 'Welcome Unknown'을 반환해준다. 하지만 name을 실행하게 되면 Error가 띄게 된다. 즉, name이라는..

자바스크립트 8.1 Spread 문법 (전개문법)

이전에 매개변수를 기록하면서 매개변수를 Rest Parameter를 활용해서 배열로 받아왔다. 그러면 반대의 경우인 배열을 통째로 매개변수에 넘기려면 어떻게 해야하는지 기록해 보자! function showNatoAlphabet(a, b, c) { console.log(a); // Alpha console.log(b); // Bravo console.log(c); // Charlie } let arr = ['Alpha', 'Bravo', 'Charlie']; showNatoAlphabet(...arr); 먼저 함수를 하나 만들어 주었다. 이 함수는 매개변수 하나하나를 찍어주는 함수를 만들었다. 그리고 나서 배열을 하나 만들어 주었다. 그리고 마지막에 함수를 실행시켜 주었는데, '...'을 활용해 주었다...