전체 글
-
JAVASCRIPT / Array.at() 배열에서 쉽게 요소 찾기DEV/JavaScript 2022. 7. 26. 22:11
자바스크립트에서 쉽게 요소를 찾는법 Array.prototype.at() 으로 쉽게 요소를 찾을 수 있음 const arr = [1,2,3,4,5] 라고 할때 기본적으로 인덱스로 배열의 값을 찾으려면 arr[idx] 로 값을 찾는다. 하지만 역으로 값을 찾으려면 length값을 찾아 거꾸로 값을 빼주면서 값을 찾아야하는데 자바스크립트 최신문법인 at을 통해 그것을 쉽게 할수 있다. 기본적으로 idx가 양수라면 arr.at(idx) 는 arr[idx]와 동일하게 작용한다. 하지만 음수라면 arr.at(idx) 는 arr[arr.length + idx] 과 동일하게 작용한다. arr.at(-1); // return 5 arr[arr.length - 1]; === arr[4] //arr.length = 5 /..
-
Section21 - 스택 & 큐자료구조 & 알고리즘 & CS + 2022. 7. 23. 23:53
[스택] 데이터의 모음 압축적인 데이터 구조 후입선출(LIFO) - 가장 먼저 넣어진게 나중에 배출 - 함수호출상황에서 많이 사용됨 - undo / Redo - 라우팅(방문기록) [배열로 스택 만들기] const stack = []; //O stack.push('google'); stack.push('insta'); stack.push('youtube'); stack.pop(); //X stack.unshift('create new file'); stack.unshift('resize'); stack.unshift('wrinkle'); stack.shift() [스택 만들기] class Node { constructor(val){ this.val = val; this.next = null; } } cla..
-
Section20 - 이중 연결 리스트자료구조 & 알고리즘 & CS + 2022. 7. 21. 01:12
[이중 연결 리스트] 싱글 리스트와 거의 비슷함 하지만 해줘야하는 일은 좀 더 많음 previous로 가는 node도 있음 [코드] // piece of data -val // reference to next node - next class Node { constructor(val){ this.val = val; this.next = null; this.prev = null; } } class DoublyLinkedList{ constructor(){ this.head = null; this.tail = null; this.length = 0; } push(val){ const newNode = new Node(val); if(this.length === 0){ this.head = newNode; } ..
-
Section19 - 단일 연결 리스트자료구조 & 알고리즘 & CS + 2022. 7. 20. 23:37
날라가서 다시씀 분명 어제 저장했던 기억이 있는데, 기억만 남아버리고 파일은 날아가버렸넵 [단일 연결 리스트] 얼핏보면 배열과 같지만, 다른 점들이 짱짱많음 [코드] // piece of data -val // reference to next node - next class Node { constructor(val){ this.val = val; this.next = next; } } class SinglyLinkedList{ constructor(){ this.head = null; this.tail = null; this.length = 0; } push(val){ const newNode = new Node(val); if(this.head === null){ this.head = newNode; ..
-
Section18 - 자료 구조 소개자료구조 & 알고리즘 & CS + 2022. 7. 18. 23:52
이전에 받은 유데미 강의 복습 다양한 자료구조가 있고, 각 상황에 맞는 최적의 알고리즘을 만들기 위해 그를 공부하는 것이다. [ES2015 클래스 구문 개요] 클래스란? 사전에 정의된 속성 및 메소드들을 이용해 객체를 생성하기 위한 청사진 [자료 구조 : 클래스 키워드] class Student{ constructor(firstName, lastName){ this.firstname = firstName; this.lastName = lastName; } } 새로운 오브젝트를 생성하기 위한 매소드는 constructor로 진행 클래스 키워드는 상수(const)를 만드는데, 그렇기 때문에 재정의 불가능 let firstStudent = new Student("Lee","min"); let secondStu..
-
Vue / 13강, 14강 / VuexDEV/Vue 2022. 7. 17. 22:32
Vue / 12강 / Router, SPA Vue / 9강 ~ 11강 / Component Life Cycle, Directive Vue / 7강, 8강 / Component의 기본, Data Binding https://ccamanglab.tistory.com/25 Vue / 1~6강 / 프론트엔드 프레임워크와 ES6 프론트엔드 개발자를 위.. ccamanglab.tistory.com 전 강에 이어서 작성하는 글 [State Management] 1.상태(State) 애플리케이션 데이터 Component 내에서만 유지되고 관리되어야 하는 데이터를 상태라고 표현하지는 않음 어플리케이션 전역에서 이용되는 데이터 그리고 그것을 어떻게 관리할지가 상태관리임 2.상태 관리(State Management) 여러 ..
-
Vue / 12강 / Router, SPADEV/Vue 2022. 7. 16. 10:48
Vue / 9강 ~ 11강 / Component Life Cycle, Directive Vue / 7강, 8강 / Component의 기본, Data Binding https://ccamanglab.tistory.com/25 Vue / 1~6강 / 프론트엔드 프레임워크와 ES6 프론트엔드 개발자를 위한 Vue.js 시작하기 강의를 들으며 정리한 내용 1강 프.. ccamanglab.tistory.com 전 강에 이어서 작성하는 글 [SPA - Single Page Application] spa는 하나의 페이지에서 어플리케이션의 여러 화면을 제공하는 웹 어플리케이션을 의미 Multi Page Application의 반대 개념으로 이용 매번 HTML 로딩하는 것 보다, 하나의 로딩되는 HTML에서 화면만 바..
-
Vue / 9강 ~ 11강 / Component Life Cycle, DirectiveDEV/Vue 2022. 7. 15. 22:28
Vue / 7강, 8강 / Component의 기본, Data Binding https://ccamanglab.tistory.com/25 Vue / 1~6강 / 프론트엔드 프레임워크와 ES6 프론트엔드 개발자를 위한 Vue.js 시작하기 강의를 들으며 정리한 내용 1강 프론트엔드 웹 어플리케이션 서버 사이드 도움 받지 ccamanglab.tistory.com 에 이어서 작성 [Component Life Cycle] 컴포넌트는 생성부터 소멸까지 일련의 LifeCycle을 거침 ex { data(){ return {count:1} }, created(){ console.log('count is: '+this.count) } } 1.Create 컴포넌트가 생성되는 단계이며 DOM에 추가되지 않은 단계 befo..