FRONTEND 36

도대체 HTTP, AJAX, XHR, XML 그리고 JSON은 무엇인가?

Q. http 란 무엇인가? A. Hyper Text Transfer Protocol의 약자. · client와 server간에 데이터를 request, resoponse하는 protocol 즉, 서버와 클라이언트가 어떻게 데이터를 주고 받을지 정한 규칙 Q. AJAX 란 무엇인가? A. · Asynchronous JavaScript And XML 의 약자. · 자바스크립트의 라이버러리 중의 하나로, 웹페이지에서 동적으로 서버와 클라이언트가 데이터를 주고 받을 수 있는 기술 · 대표적인 브라우저 API로는 XMLHttpRequest, fetch 가 존재 Q. XML 이란 무엇인가? A. eXtensible Markup Language의 약자. HTML과 마찬가지로 Markup Language의 일종. ·..

FRONTEND/JavaScript 2021.06.06

(Promise, async & await) - 콜백헬을 피해서...

앞서 우리는 비동기적인 것을 제어하는 방법으로 콜백함수를 살펴 보았다. 하지만, 이렇게 작성할경우, 코드의 이해가 매우 힘들어 질수 있다는 단점이 있었다. 이러한 콜백헬을 극복하기 위해서 나타난 개념이 바로 Promise이다. Promise var Promise: PromiseConstructor new (executor: (resolve: (value: any) => void, reject: (reason?: any) => void) => void) => Promise ✔️ 위에서 볼 수 있듯이, Promise는 첫번째 인자로 executor함수를 받게 된다. ✔️ JavaScript에 내장되어 있는 object ☑️ "성공한 상태(State)" 인지, "실패한 상태(State)" 에 대한 이해가 필요..

FRONTEND/JavaScript 2021.05.31

(callback) - 비동기적인 것을 제어하는 방법

callback함수 function printNow(print){ print(); } 라는 함수가 있다고 하자, 여기에서 print라는 파라미터는 printNow함수의 콜백함수가 되게 된다. 우리는 보통 callback함수를 비동기적이라고 말을 하지만, 모든 callback함수가 비동기적인것은 아니다. 만약에 printNow(() => console.log("Hi! syncrnous callback function"))이라고 하게 된다면, printNow의 연결인자로 들어온 익명함수는 콜백함수는 맞지만, 동기적인 함수가 되게 된다. 하지만 만약, printNow(setTimeout(() => console.log("it is asynchronous"), 1000 )) 이라고 하게 된다면, 해당 함수는 비..

FRONTEND/JavaScript 2021.05.31

asynchronous function

오늘은 학습에 어려움을 많이 겪었던 비동기적 함수에 대해 정리를 해보려고 한다. 우선, asynchronous라는 것은, "비동기적"이라는 뜻이다. 비동기적이라는 것은 무엇일까? -> 비동기적이라는 것은 '동기적이지 않다.' 라는 뜻이다. -> 그렇다면, 동기적이라는 것은 무엇인가? 우리가 쉽게 생각할 수있는 callstack을 생각하면 된다. 순서를 기억하고, 그 순서에 따라 실행하는 것을 의미한다. -> 그렇게 생각해본다면, 비동기적이라는 것은 호출된 순서에 상관없이, 여러 녀석들의 작업을 진행하고, 빨리 종료된 녀석들 부터, 출력되는 것을 의미한다는 것을 알 수있다. 이는 eventloop라는 개념을 통해 접근 하면 보다 이해하기 쉽다. 그러므로 여기서 잠시 eventloop라는 개념을 짚고 넘어가..

FRONTEND/JavaScript 2021.05.20

순열로 모든 경우의수 배열로 정리하기

오늘은 코플릿 toy문제를 풀다가 막혔던 부분이 풀린 기념으로 포스팅을 작성해보려고 한다. 이 문제를 풀면서, slice를 제대로 쓰는법과 스프레드 문법에 조금 더 익숙해 진것 같아 뿌듯하다.(하지만 코플릿 문제가 시행시간초과로 안풀렸다는건 안비밀ㅋㅋㅋ) 내가 막혔던 부분은 숫자 n을 입력 받았을때, 순열로 n의 모든경우의 수를 배열로 정리하고 싶었다. 즉, 3을 입력 받았을때 => [1, 2, 3], [1, 3, 2], ..., [3, 2, 1]와 같이 말이다. 여기서 재귀함수를 사용하게 되는데, 이는 계속 반복되는 작업이기 때문이다. 예를 들어, 4를 고정, 나머지 3개의 모든 경우의수 3를 고정, 나머지 3개의 모든 경우의수 2를 고정, 나머지 3개의 모든 경우의수 1를 고정, 나머지 3개의 모든 ..

FRONTEND/JavaScript 2021.05.19

배열, 객체 풀어서 합치기(... spread문법, assign메소드)

...spread문법 ✔️ 객체나 배열을 스프레드 문법을 사용하여 풀어서 붙이기 ☑️e.g const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; let result = {...target, ...source} 하게 되면 result는 {a: 1, b: 4, c: 5}가 되게 된다. let arr1 = [1, 2, 3, 4, 5] let arr2 = [6, 7, 8] let arrs = [...arr1, ...arr2]; 하게 되면 arrs = [1, 2, 3, 4, 5, 6, 7, 8]가 되게 된다. Object.assign() ✔️ Boolean값을 return ☑️ e.g const target = { a: 1, b: 2 }; const sou..

FRONTEND/JavaScript 2021.05.19

scope 활용하여 반복문 원하는 횟수만큼 실행시키기

for문에서 외부변수를 통해, 조건만족시점까지 반복시키기 ✔️for문 밖의 외부변수(count) 이용 ✔️ 숫자가 있는 배열에서, 순서대로 3개의 짝수만 새로운배열에 넣어 return 하는 함수 만들기 ✔️ for문 밖의 외부변수(count) 이용 ✔️ 0을 제외한 모든 숫자들은 truty하고, 0은 falthy하다는점 알고 있기. let arr = [1, 2, 3, 4, 5, 6, 7, 8] const collectEven = function(arr) { let count = 3; let result = []; for(let i =0; i

FRONTEND/JavaScript 2021.05.19

Array.some(), Array.every()

some() ✔️ Boolean값을 return ☑️ 배열안의 요소가 단 하나라도 참이라면 return true ☑️ 배열안의 요소가 모두 다 거짓일때에만 return false every() ✔️ Boolean값을 return ☑️ 배열안의 요소가 단 모두 다 참일때에만 return true ☑️ 배열안의 요소가 하나라도 거짓이라면 return false 💡e.g. const array = [1, 2, 3, 4, 5]; let result1= array.some(el => el%2 === 0) result = true; let result2= array.every(el => el%2 === 0) result = false;

FRONTEND/JavaScript 2021.05.19