본문 바로가기

Learn/Javascript

 (20)
GraphQL GraphQL 오픈 소스로 제공된 쿼리 언어 클라이언트 요청에 따라 유연하게 트리 구조의 JSON 데이터를 응답으로 전송 클라이언트 요청에 따라 유연하게 자원을 가져올 수 있다는 점 GraphQL의 특징 GraphQL은 HTTP를 통해 API 서버로 요청을 보내고 응답 받기 응답을 받을 시, 데이터 결과를 JSON 형식. GraphQL은 서버 개발자가 작성한 각 필드에 대응하는 resolver 함수로 각 필드의 데이터를 조회 GraphQL은 GraphQL 라이브러리가 조회 대상 schema가 유효한지 검사 GraphQL vs REST API REST API는 Resource에 대한 형태 정의와 데이터 요청 방법이 연결되어 있지만, GraphQL에서는 Resource에 대한 형태 정의와 데이터 요청이 완전..
Stack과 Queue Stack 쌓다, 쌓이다, 포개지다 와 같은 뜻 데이터(data)를 순서대로 쌓는 자료구조 Stack의 특징 1. LIFO(Last In First Out) 먼저 들어간 데이터는 제일 나중에 나오는 후입선출의 구조 2. 하나의 입출력 방향 Stack 자료구조는 데이터를 넣고 뺄 수 있는 곳이 스택의 가장 최상단, 한 군데 3. 데이터는 하나씩 넣고 뺄 수 있다. 스택에 한개 씩 여러 번 데이터를 넣어 스택 내부에 데이터가 여러 개 쌓여 있다고 하더라도, 데이터를 뺄 때는 스택의 가장 최상단에서 한 번에 한 개의 데이터만을 뺄 수 있다. Stack의 실사용 예제 웹 브라우저 뒤로가기 : 가장 나중에 열린 페이지부터 뒤로 가기를 실행합니다. 문서작업에서 Ctrl+Z : 가장 나중에 수정한 내역부터 되돌립니다..
재귀함수 추가학습 재귀 함수와 메모리 사용량 간의 관계 자바스크립트 엔진은 최대 재귀 깊이를 제한 (만개 정도까진 확실히 허용하고, 엔진에 따라 이보다 더 많은 깊이를 허용하는 경우도 있다 하지만 대다수의 엔진이 십만까지는 다루지 못한다.) 재귀 깊이 제한 때문에 재귀를 실제 적용하는데 제약 요약해보기 -> 재귀 함수는 반복적으로 자신을 호출 하기 때문에 스택이라는 메모리가 쌓인다. 이때, 스택이 많이 쌓이게 된다면 에러가 발생한다. -> '스택 오버 플로우' 현상 꼬리재귀 (Tail Recursion) 재귀 호출이 끝나면 아무 일도 하지 않고 결과만 바로 반환되도록 하는 방법 이전 함수의 상태를 유지하지도 않고 추가 연산을 하지도 않아서 스택이 넘쳐나는 문제를 해결 //일반 재귀 function factorial(n) ..
JSON JSON이란 JavaScript Object Notation의 줄임말 데이터 교환을 위해 만들어진 객체 형태의 포맷 JSON 구조 Javascript 객체 리터럴 문법을 따르는 문자열 { "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [ { "name": "Molecule Man", "age": 29, "secretIdentity": "Dan Jukes", "powers": [ "Radiation resistance", "Turning tiny", "Radiation blast" ] }, { "name": "Madame..
재귀함수 재귀란 원래의 자리로 되돌아가거나 되돌아옴. 재귀함수는 자기 자신을 호출하는 함수 function recursion () { console.log("This is") console.log("recursion!") recursion() } 재귀는 언제 사용 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우 중첩된 반복문이 많거나 반복문의 중첩 횟수(number of loops)를 예측하기 어려운 경우 예시) for (let i = 0; i < n; i++) { for (let j = 0; j < n; j++) { for (let k = 0; k < n; k++) { for (let l = 0; l < n; l++) { for (let m = 0; m < n; m++) { for (let n ..
fetch API 시작하기전에 전에 배웠던 것중에 Promise가 어떻게 작동하는지에 대해 다시 복습 Promise에는 3가지 작동원리가 존재 대기(pending): 이행하지도, 거부하지도 않은 초기 상태. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함. 그리고 console.log를 찍었을 때 어떤 형태를 반환하는지에 대해 숙지 fetch API HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공 -> 특정 url을 불러오는 역할을 하며 비동기적인 역할을 한다. 따라서 promise를 리턴한다. -> fetch의 기본형태 // 1번째 fetch('http://example.com/movies.json') ..
Node:fs 모듈 진행하면서 새로 배운 개념 Path path 모듈은 폴더와 파일의 경로를 지정해주는 모듈 Path 모듈 메소드 Path.join() 인자로 받은 경로들을 하나의 문자열 형태로 리턴 Path.resolve() resolve도 join과 마찬가지로 인자로 받은 경로들을 문자열 헝태로 리턴 차이점은 전달받은 경로인자들의 가장 오른쪽부터 왼쪽으로 합쳐진다. 경로인자들을 합쳐나가는중 / 를 만나면 절대경로로 인식해서 나머지 경로인자들을 무시 만약 / 를 끝까지 만나지 못하면 /현재경로/생성된경로 형태로 결과를 리턴 __dirname 과 결합 __dirname 과 결합했을 때 join 은 모두 결합하는 반면, resolve은 오른쪽부터 /가 있는 부분까지만 결합 const user1Path = path.join(__dirname, 'file..
동기 / 비동기 동기(synchronous) 특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음 코드를 수행하는 것 비동기(asynchronous) 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드들을 수행하는 것 타이머 관련 API setTimeout(callback, millisecond) 일정 시간 후에 함수를 실행 setTimeout(function () { console.log('1초 후 실행'); }, 1000); // 1000밀리초 -> 1초 후 fuction 실행 -> '1초 후 실행' // clearTimeout(timerId) setTimeout 타이머를 종료 const timer = setTimeout(function () { console.log('10초 후 실행'); }, 10000)..

티스토리툴바