원문 (영어) : https://dev.to/lydiahallie/javascript-visualized-hoisting-478h 저자 : Lydia Hallie 👩🏻‍💻Thanks to Lydia for this amazing article about Javascript! 아래의 코드를 보자 : const name = "Lydia" const age = 21 const city = "San Francisco" function getPersonInfo() { const name = "Sarah" const age = 22 return `${name} is ${age} and lives in ${city}` } console.log(getPersonInfo()) 우리는 name, age, city 변수들의..

원문 (영어) : https://dev.to/lydiahallie/javascript-visualized-hoisting-478h 저자 : Lydia Hallie 👩🏻‍💻Thanks to Lydia for this amazing article about Javascript! 만약 당신이 자바스크립트가 익숙하지 않다면, 어떤 변수들이 랜덤하게 'undefined'로 되어서 ReferenceError가 던져지는 이상한 경험을 해본 적이 있을 것이다. 호이스팅은 '변수와 함수들을 파일의 맨 위쪽에 놓은 것'이라고 주로 설명되는데, 그렇게 보일 수 있지만 맞지 않다. 자바스크립트 엔진이 스크립트를 받게 되면, 처음으로 하는 일은 바로 코드 안의 데이터를 위해 메모리를 세팅하는 일이다. 이 때 코드는 실행되지 않..

원문 (영어) : https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif 저자 : Lydia Hallie 👩🏻‍💻Thanks to Lydia for this amazing article about Javascript! 자바스크립트는 단일 쓰레드로 구성되어있다 = 한 번에 하나의 일을 수행하는 것! 만약 하나의 일이 30초가 걸린다면? 우리는 30초를 기다려야하는 상황인 것이다 (자바스크립트는 기본적으로 브라우저의 메인 쓰레드에서 돌아가기 때문에 모든 UI가 막히게 된다) 다행히도, 브라우저는 자바스크립트 엔진 자체가 제공하지 않는 몇 가지 기능을 제공하는데 바로 'Web API'이다. Web API에는 DOM API, setTimeout, HT..

@RequestEntity 사용하기 ResponseEntity is meant to represent the entire HTTP response. You can control anything that goes into it: status code, headers, and body. @ResponseBody is a marker for the HTTP response body and @ResponseStatus declares the status code of the HTTP response. @ResponseStatus isn't very flexible. It marks the entire method so you have to be sure that your handler method will al..

RxJS = Reactive Extensions for JavaScript RxJS is a library for composing asynchronous and event-based programs by using observable sequences. RxJS는 reactive programming에 쓰이는 라이브러리이며, observables을 사용하여 '비동기', 콜백 코드를 쉽게 만들 수 있도록 한다. Operator은 function이라고 보면 되는데, observables에 사용하여 좀 더 정교한 작업을 할 수 있게 도와준다. RxJS가 제공하는 operator은 API를 참고하면된다 (https://rxjs.dev/api) 수 많은 operator들 중에 자주 사용하는 것들은 이렇게 있다 ..

흔히 하는 실수 '=' 연산자 사용 let origin = { num : 1 } let clone = origin origin.num = 2 console.log(clone) // { "num" : 2 } 객체는 '참조타입(reference type)'이기 때문에 객체를 '='로 복사하면 값이 아니라 메모리 주소값 참조를 복사한다. 즉, clone과 origin는 같은 메모리를 사용한다는 것이다. 그러므로 콘솔에 찍어보면 하나의 객체가 2개의 변수에 의해서 공유되고 있는걸 확인할 수 있다. (하나의 변수를 통해 값을 바꿨지만, 다른 변수의 값도 함께 바뀌었다) console.log(origin === clone) 따라서, 객체를 비교할 때 참조가 같은지 비교하는 '===, =='로 비교해보면 'true'..