본문 바로가기

JavaScript5

자바스크립트 fetch와 axios 자바스크립트에서 ajax를 하는데 있어 axios라는 라이브러리를 많이들 사용합니다. axios는 fetch와 무슨 차이가 있길래 쓰는 걸까요? 1. 예전 브라우저에서는 fetch가 작동하지 않는 경우가 있는데 axios의 경우 예전 브라우저에서는 XMLHttpRequest를 사용해 호환이 가능합니다. 2. fetch를 쓰는 경우 예를 들어 get함수를 쓸때 https://www.google.com/search?first=123&second=456 이런식으로 가독성이 그리 좋지 못한데 axios를 사용하면 baseURL을 사용가능하고 아래처럼 params를 따로 설정해서 가독성에서 장점이 있습니다. 1 2 3 4 params: { first: 123, second: 456, } cs 3. json변환 과.. 2021. 5. 15.
자바스크립트 this binding 자바스크립트에서는 this.를 callback 등으로 전달할때 this의 class 정보가 무시됩니다. 예를 들어 아래와 같은 코드가 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 class Test { constructor(a, b) { this.a = a this.b = b this.test = document.querySelector('.box') this.test.addEventListener('click', this.onClick) } onClick() { const tot = this.a + this.b console.log("a+b: " + tot) } } t = new Test(1,2) Colored by Color Scripter cs clickMe.. 2021. 5. 13.
자바스크립트 ... 이용하기 javascript에서 ...은 spread operator로 배열을 풀어주는 역할을 합니다. 이를 활용하면 배열을 복사하는 용도로도 이용할 수 있습니다. 1 2 3 4 5 6 7 const people = [ {name: 'Kim', age: 10}, {name: 'Lee', age: 20}, {name: 'Park', age: 30}, ] const copied = [...people, {name: 'Alex', age: 40}] cs 위처럼 하면 copied 배열에는 people 배열에 있는 3개의 object + 새로운 object (Alex) 이렇게 4개가 생깁니다. ** 위 예제에서 copied와 people 배열은 같은 object를 가리키고 있기 때문에 Kim, Lee, Park의 obje.. 2021. 5. 12.
자바스크립트 싱글스레드와 Event Loop 자바스크립트는 싱글 스레드 언어입니다. 그러나 분명히 promise, callback 등을 이용한 비동기 프로그래밍이 가능합니다. 많은 사람들이 이런 부분에 있어서 헷갈려하고 저도 역시 헷갈려서 정리해보았습니다. 앞서 말했듯이 자바스크립트는 싱글 스레드 언어 입니다. 하나의 call stack을 갖고 있고 한번에 하나의 코드를 실행할 수 있습니다. 그러나 자바스크립트는 브라우저 위에서 작동합니다. 그리고 브라우저는 멀티스레딩이 가능합니다. 즉, 자바스크립트는 싱글 스레드 언어이지만 런타임시 브라우저 위에서 작동하고 브라우저는 멀티 스레딩이 가능하기 때문에 비동기 프로그래밍이 가능한 것입니다. 이를 이해하려면 event loop, stack, task queue의 개념에 대해 이해해야합니다. stack은 .. 2021. 5. 8.

티스토리툴바