CodeStates/JavaScript 33

Section4 / Unit1 : Tree, Graph

트리(Tree) 계층적 자료구조, 단방향 그래프 아래로만 뻗어나가기 때문에 사이클(cycle)이 없다 → 트리는 사이클이 없는 하나의 연결 그래프(Connected Graph) 트리 관련 용어 노드(node) : 각 데이터 간선(edge) : 각 데이터를 간선으로 연결 루트 노드(root) : 부모가 없는 최상위 노드 단말 노드(leaf node) : 자식이 없는 노드 크기(size) : 트리에 포함된 모든 노드의 개수 깊이(depth) : 루트 노드부터의 거리 높이(height) : 깊이 중 최댓값 레벨(level) : 같은 깊이를 가지고 있는 노드 묶음 차수(degree) : 각 노드의(자식방향) 간선 개수 서브 트리(sub tree) : 트리 구조를 갖춘 작은 트리 기본적으로 트리의 크기가 N일 때..

Section4 / Unit1 : Stack & Queue

Stack 데이터(data)를 순서대로 쌓는 자료구조 특징 입력과 출력이 하나의 방향, 즉 스택의 최상단에서만 이루어지는 제한적 접근 LIFO(Last In First Out), FILO(First In Lst Out) 후입선출 구조 스택 구조 내에서 특정 데이터를 조회할 수 없음 데이터를 저장할 때나 검색할 때 항상 스택의 최상단에서만 행위가 이루어지며 이에 따라 데이터를 저장하고 검색하는 프로세스가 매우 빠름 Stack에 데이터 넣기 : 'PUSH', 데이터 꺼내기 : 'POP' 예제 브라우저의 뒤로 가기, 앞으로 가기 기능(⌘+Z, ⌘+⇧+Z 기능) Queue 대기행렬 특징 FIFO(First In First Out), LILO(Last In Last Out) 선입선출 2개의 입출력 방향 → 데이터..

Section3 / Unit1 : JSON.stringify

JSON(JavaScript Object Notation) 데이터 교환을 위해 만들어진 객체 형태의 포맷 어떠한 객체 내용을 다른 프로그램에 전송한다면? const message = { sender: "나", reciever: "너", message: "저녁에 만나자", createdAt: "2023-06-12 10:10:10" } 전송할 수 있는 조건(transferable condition) 수신자(reciever)와 발신자(sender)가 같은 프로그램을 사용한다 또는, 문자열처럼 범용적으로 읽을 수 있어야 한다 객체는 타입 변환을 이용해 String으로 변환할 경우 객체 내용을 포함하지 않는다 → JavaScript에서 .toString()이나 String()을 시도하면, [object Objec..

Section3 / Unit1 : 재귀

재귀 함수 자기 자신을 호출하는 함수 재귀로 문제 해결하기 1. 문제를 작게 쪼개기 - 배열의 합을 구할 때 [1, 2, 3, 4, 5]의 합을 구하는 것보다 [2, 3, 4, 5]의 합을 구하는 것이 더 작은 문제이고, 여기서 또 [2, 3, 4, 5]의 합을 구하는 것보다 [3, 4, 5]의 합을 구하는 것이 더 작은 문제일 것입니다. //예시 arrSum([1, 2, 3, 4, 5]) === 1 + arrSum([2, 3, 4, 5]) arrSum([2, 3, 4, 5]) === 2 + arrSum([3, 4, 5]) ... 2. 문제를 가장 작은 단위로 쪼개기 - 위에서 문제를 쪼갠 방식을 반복해서 문제를 계속해서 쪼개면 더 이상 쪼갤 수 없는 상태에 도달하게 됩니다. //예시 ... arrSum..

Section2 / Unit3 : fetch API, axios

fetch API URL로 요청하는 것을 가능하게 해주는 API Promise를 기반으로 동작한다 fetch()가 반환하는 프로미스 객체는 404, 500과 같은 HTTP 오류 상태를 수신해도 거부되지 않는다 fetch API 사용하기 fetch('//url 주소') .then((response) => response.json()) .then((data) => console.log(data)) 네트워크에서 JSON 파일을 가져와서 콘솔에 출력한다 응답은 Response 객체로 표현되며, 직접 JSON 응답 본문을 받을 수는 없다. Axios 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 fetch API와 비슷한 역할을 하는 라이브러리 -> fetch A..

Section2 / Unit3 : Node.js

Node.js https://nodejs.org/en/about 비동기 이벤트 기반 JavaScript 런타임 확장성 있는 네트워크 애플리케이션을 만들 수 있도록 설계 Node.js 내장 모듈 목록 내장 모듈 목록 : Node.js v16.14.2 Documentation -> ex) DNS : 파일 시스템 모듈이 파일을 읽거나 저장하는 기능을 구현할 수 있도록 돕는다 -> ex) readFile : 파일 읽을 때 사용 -> ex) writeFile : 파일 저장할 때 사용 Node.js는 JavaScript 코드 가장 상단에 require 구문을 이용하여 다른 파일을 불러온다 const fs = require('fs'); //파일 시스템 모듈을 불러옵니다 const dns = require('dns')..

Section2 / Unit3 : 비동기

코드스테이츠 수업 25일차! 비동기 뜻은 이해하지만 내용이 어렵다 정확한 개념인지를 위해 복습하자 복습복습복습!! 동기 특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음 코드를 수행하는 것 비동기 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드들을 수행하는 것 비동기는 주로 콜백함수를 활용하는 것이 특징 JavaScript의 작동원리 싱글 스레드 기반으로 동작하는 언어 -> 동기적으로 작동함 하지만 런타임에서 비동기 처리를 동와주기 때문에 비동기 처리 가능 타이머 관련 API setTimeout(callback, millisecond) 일정 시간 후에 함수를 실행 // 매개변수 : 실행할 콜백 함수, 콜백 함수 실행 전 기다려야 할 시간 (밀리초) // return 값 : 임의의 타이머..

Section2 / Unit2 : 프로토타입 체인

프로토타입 체인 상위 객체의 프로퍼티를 호출할 수 있도록 해주는 메커니즘 자바스크립트는 특정 프로퍼티에 접근할 때 해당 객체에 프로퍼티가 없으면 [[Prototype]] 내부 슬롯의 참조를 따라 상위 프로토타입의 프로퍼티를 순차적으로 검색한다. ↓(좀 더 이해하기 쉬운 말) 인스턴스 객체의 key에 접근할 때, 해당 객체에게 key가 없다면 그 다음으로 상위 프로토타입(원형) 속성에서 key가 있는지 확인한다. 없다면 그것을 찾기 위해 더 상위의 프로토타입(부모)에서 찾는다. function Fruit(name, price){ this.name = name; this.price = price; } Fruit.prototype.itsPrice = function(){ console.log(`${this.n..

Section2 / Unit2 : 프로토타입과 클래스

✔︎ 자바스크립트는 흔히 프로토타입 기반 언어(prototype-based language)라 불린다 -> 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다는 의미 프로토타입(prototype) 원형 객체를 의미 객체는 프로퍼티를 가질 수 있는데 프로토타입이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티 프로퍼티에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결 //예시 function Person() {...} Person.prototype.eyes = 2; Person.prototype.nose = 1; let kim = new Person(); let Lee = new Person(); console.log(kim.eyes); // 2..