모든 트리에서 사용 가능 BFS vs DFS - 시간 복잡도는 같은 ( 모든 노드들을 한번 씩 방문하기에) DFS의 공간 복잡도 ↑ 노드가 깊고 길때(일자로 쭉 이어진 트리) BFS의 공간 복잡도 ↑ 노드가 엄청나게 많을 때 (데이터의 양이 방대할 때) 너비 우선 탐색[Breadth-first Search] → 자식 요소를 보기전에 먼저 형제 노드를 다 보는 것 ( 같은 층에 있는 노드들을 먼저 확인함 ) [수평] Queue (FIFO)를 사용해서 노드들을 확인하고 dequeue하면서 탐색을 하고 확인된 노드들은 따로 저장해둔다 2~4번의 과정을 보게되면 6,15가 추가되고 6이 선입선출이라서 먼저 빠지게 된 후 15가 빠지기전에 6에 자식노드가 추가 된 것을 확인할 수 있다 (작업을 진행할 큐를 예약걸..

양방향으로 연결이 되어있는 구조 (prev , next) 기본적인 구조는 단일 연결 리스트와 같기에 설명은 생락하고 바로 메소드를 작성하겠다 prev와 next를 둘다 연결해야하기에 코드가 좀 더 복잡해지지만 flexible하게 사용가능해진다 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){ var newNode=new Node(val) if(this.length===0){ this.head=newNode this...

연결 리스트 Head(시작), tail(마지막), length 프로퍼티를 갖는 데이터 구조 [인덱스 없는 객차] 연결 리스트는 nodes를 가지고 있고 각 요소를 node라고 한다. 각 노드는 next 포인터를 통해 연결되어 있고 node에는 값을 담고 있는 '데이터'와 다음 node를 가리키는 '링크' 정보를 저장한다. 데이터에는 다양한 형식을 가질 수 있고, 각 노드들은 다음 노드가 가리키는 정보를 저장하고 있어야 하며, 더 이상 노드가 없을 경우 null을 저장하게 된다. [!] 배열은 인덱스가 존재해서 arr[5]이런식으로 바로 접근이 가능하지만 연결 리스트는 접근이 불가능하다. 2개다 고층 아파트인데 배열은 EV가 있지만, 연결 리스트는 EV가 없어서 계단으로 층을 거쳐가며 이동해야 한다. 아래..

https://youtu.be/kPRA0W1kECg https://www.bigocheatsheet.com/ Big-O Algorithm Complexity Cheat Sheet (Know Thy Complexities!) @ericdrowell Know Thy Complexities! Hi there! This webpage covers the space and time Big-O complexities of common algorithms used in Computer Science. When preparing for technical interviews in the past, I found myself spending hours crawling the internet putting t www.big..

Babel 설치후 Babel 프리셋 설치, babel.config.json 설정 파일 작성을 해줘야한다 @babel/preset-env -> Babel 프리셋 프리셋 설치 후 babel.config.json 설정파일을 생성하고 아래처럼 적어준다 { "presets": ["@babel/preset-env"] } Browserslist https://blog.shiren.dev/2020-12-01/ 브라우저를 선택하는 옵션 기능만 따로 뽑아 놓은 도구 트랜스파일링 하나의 프로그래밍 언어를 다른 언어로 컴파일하는 특별한 형태 package.json안에 script에 이 명령어 추가 "bulid": "babel src/js -w -d dist/js" -w : 타깃 폴더에 있는 모든 자바스크립트 파일들의 변경을 ..

const $button=docu~ const $elem=docu~ 변수 앞에 $이게 붙어있는 경우를 종종 볼 수 있고 jQuery가 아니여서 뭔지 찾아봤다 https://www.thoughtco.com/and-in-javascript-2037515 What's In a Name? Understanding $ and _ in JavaScript The $ and _ characters in JavaScript are identifiers that are considered to be letters rather than special characters. www.thoughtco.com _(언더바)는 private를 나타낼때 쓰는 식별자이고 $도 마찬가지로 식별자다 $은 document.getElement..

제너레이터 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다 일반 함수를 호출하면 제어권이 함수에게 넘어가 제어가 불가능하지만 제너레이터는 가능 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다 제너레이터 함수를 호출하면 함수 코드를 실행하는 것이 아니라 이터러블이면서 동시에 이터레이터인 제너레이터 객체를 반환한다 제너레이터 함수의 정의 function* getDecFunc(){ yield 1; } const genExpFunc=function* (){ yield 1; } const obj={ * genObjMethod(){ yield 1..

비동기 처리를 위한 콜백 패턴 콜벡 헬 비동기+비동기+비동기.... (에러 ????? / 가독성 ↓) 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료된다 즉, 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료된다. 따라서 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나 상위 스코프의 변수에 할당하면 기대한 대로 동작하지 않는다 ex)setTimeOut let g=0; setTimeout(()=>{g=100},0) console.log(g) //0 onload는 비동기 let toods; const get=url=>{ const xhr=new XMLHttpRequest(); xhr.open(..

REST : HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 구성 요소 내용 표현 방법 자원 자원 URI(엔드포인트) 행위 자원에 대한 행위 HTTP 요청 메서드 표현 자원에 대한 행위의 구체적 내용 페이로드 *페이로드 => 사용에 있어서 전송되는 데이터를 뜻함, 페이로드라는 용어는 큰 데이터 덩어리 중에 '흥미 있는' 데이터를 구별하는 데 사용 REST API 설계 원칙 1. URI는 리소스를 표현해야 한다 ( 명사 사용 ) # bad GET /getTodos/1 GET /todos/show/1 # good GET /todos/1 2. 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다 HTTP 요청 메서드 종류 목적 페이로드 GET index/retrieve 모든/특..

자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹 페이지에 동적으로 갱신하는 프로그래밍 방식 - 변경할 부분을 갱신하는 데 필요한 데이터만 서버로부터 전송받기 때문에 불필요한 데이터 통신 발생 X - 변경할 필요가 없는 부분은 re-rendering X 따라서 화면이 순간적으로 깜빡이는 현상이 발생하지 않는다 - 클라이언트 서버 통신이 비동기로 작동 ==> 블로킹 발생 X 참고 : https://stackoverflow.com/questions/1510011/how-does-ajax-work JSON 클라이언트와 서벅 간의 HTTP 통신을 위한 텍스트 데이터 포맷이다 JSON의 키는 반드시 큰따옴표로 묶어야한다. { "name":..