본문 바로가기

Javascript

(10)
자바스크립트 Promise Promise 객체 프로미스 객체는 비동기 통신에 이용되는 객체이다. 프로미스 객체 등장 전에 자바스크립트는 콜백함수를 통해 비동기 통신을 처리했다. 그런데 서비스의 규모가 커질수록, 콜백함수를 통한 비동기 통신 처리는 여러 한계를 마주쳤다. 대표적인 예로, 콜백함수가 계속해서 콜백함수를 낳는 콜백 헬 및 애매한 에러 처리가 있다. 그래서 콜백 헬을 없애고, 더 명확한 비동기 통신의 표현을 위해 ES6에서 프로미스 객체가 도입되었다. 비동기 통신을 callback으로 처리했을 때 문제점 콜백 헬(callback hell) 자바스크립트에서 자주 사용되는 비동기 통신은 각 요청을 병렬로 처리한다. 덕분에 프로그램이 Blocking되지 않는(중단되지 않는) 장점이 있다. 그러나 비동기 통신을 올바르게 처리하기..
자바스크립트 Shallow Copy vs Deep Copy 얕은 복사(Shallow Copy) 얕은 복사는 한 depth만 복사합니다. 참조값을 복사한다고도 볼 수 있습니다. 따라서 데이터가 새로 생성되는 것이 아니라 하나의 주솟갓을 두개의 변수가 가르키는 형태가 됩니다. const obj = { a: 1, b: 2}; const copyObj = obj; console.log(obj === copyObj) // true 깊은 복사(Deep Copy) 깊은 복사는 객체 내부의 중첩된 객체까지 전부 복사합니다. 완벽한 Deep copy를 하고싶다면, 재귀적으로 깊은 복사를 수행하거나 JSON.parse(JSON.stringify(obj) 같은 방법을 쓰면 됩니다. JSON.parse() + JSON.stringify() const obj = { a: 1, b: 2..
자바스크립트 Strict mode 암묵적 전역 function foo() { x = 10; } foo(); console.log(x); 위 코드의 실행 결과는 무엇일까? 에러일까? 🤔 그렇지 않다. 자바스크립트 엔진은 x를 콘솔에 출력하기 위해 foo 함수의 스코프에서 x 변수의 선언을 검색한다. 하지만 x는 선언되어 있지 않다. 따라서 foo함수의 상위 스코프인 전역 스코프에서 x 변수의 선언을 또 찾지만, 전역에도 없다. 이럴 경우 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성한다. 따라서 콘솔에는 10이라는 숫자가 찍히고, 마치 정상 동작하는 코드처럼 보인다. 이런 현상을 암묵적 전역이라 한다. Strict mode 개발자의 의도와는 상관없이 발생한 암묵적 전역은 오류를 발생시키는 원이이 될 가능성이 크다. 코..
자바스크립트 Hoisting 호이스팅 자바스크립트에서 호이스팅이란 유효 범위 내 최상단으로 변수와 함수를 끌어올리는 것을 말한다. 함수나 변수가 실제 선언은 밑에 되어있지만 호이스팅을 통해 유효 범위의 내 제일 위에 선언된 것 처럼 보이는 것이다. 호이스팅 대상 var로 선언된 변수 var로 선언된 변수의 선언만 호이스팅된다. 할당은 호이스팅되지 않는다. let, const로 선언된 변수는 호이스팅되지 않는다. console.log("hello"); var name = "var Ella"; // var 변수 let name2 = "let Ella"; // let 변수 // 호이스팅 결과 var name; console.log("hello"); name = "var Ella"; // var 변수 -> 호이스팅 발생 let name2 ..
자바스크립트 Prototype 자바스크립트 공부를 하면서 제일 많이 어려워했던 부분을 꼽으라하면 난 무조건 프로토타입을 꼽을 것 같다 🥲. 처음 프로토타입을 공부했을 당시에는 헷갈리는 프로퍼티들과 머릿속으로 잘 그려지지 않는 구조로 인해 많이 어려워했다. 그리고 무엇보다 '나는 프로토타입을 사용하지도 않는데, 이걸 왜 공부해야하지?'라고 생각했다. 그런데 이런 생각들은 최근 프로토타입 공부를 하며 싹 바뀌었다. 그리고 다음의 목록으로부터 많은 도움을 받았다. 1. 내가 언제 프로토타입을 사용했는지 살펴보기 2. 코어 자바스크립트 06.프로토타입 읽기 3. 프로토타입의 삼각형 구조(밑에 나옴)를 바탕으로 이해하기 난 언제 프로토타입을 썼을까? 🤔 먼저 자바스크립트 개발자가 프로토타입을 언제 사용하는지 알아보자. 분명히 모든 개발자들이 ..
함수 선언문 vs 함수 표현식 이 궁금증의 경우, 함수를 표현할 때 function A( ) { }의 표현법을 사용할 지, const A = ( ) => { } 의 표현법을 사용할지에 대해 페어와 고민하다가 갖게 되었다. 그러다 리뷰어님의 도움을 받아 함수 표현식과 함수 선언문이 있다는 것을 알게 되었다. 함수 선언문 function test() { // 함수 내용 } 일반적인 프로그래밍 언어에서 함수를 선언하는 방식으로 함수 리터럴과 모양이 동일하다. 함수 이름을 생략할 수 없다. Hoisting에 영향을 받는다. 즉, 코드를 구현한 위치와 관계없이 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어올려준다. 함수 표현식 const test1 = function foo() {}; const test2 = function () {}; ..
DOM DOM 텍스트 파일의 웹 문서를 브라우저에 렌더링하려면, 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저 렌더링 엔진은 이를 위해 웹 문서를 load하고 parsing 하여, DOM을 생성하고 이를 메모리에 적재한다. DOM이란, 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이 객체들의 부자 관계가 표현된 트리 구조이다. DOM은 JS를 통해 동적으로 변경할 수 있으며, 변경된 DOM은 리렌더링 된다. 정적인 웹페이지를 동적으로 조작하기 위한 방법은, 메모리 상에 존재하는 DOM을 변경하는 것이다. 그리고 이때 필요한 것이 DOM API이다. DOM API는 DOM에 접근하고 변경하는 프로퍼티와 메소드의 집합이다. DOM에서 모든 요소, 어트리뷰트, 텍스트는..
자바스크립트 This 대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체릐 의미한다. 하지만 자바스크립트에서의 this는 어디서든 사용할 수 있고, 그래서 가장 혼란스러운 개념 중 하나라고 할 수 있다. 상황에 따라 달라지는 this 자바스크립트에서 this는 실행 컨텍스트가 생성될 때 함께 결정된다. 실행 컨텍스트는 함수가 호출될 때 생성되므로, this는 함수를 호출할 때 결정된다. 함수를 실행하는 방법에는 일반적인 함수로서 호출하는 방법과 메서드로서 호출하는 방법이 있다. 일반적인 함수는 그 자체로 독립적인 기능을 수행하지만, 메서드로서 호출된 함수는 자신을 호출한 객체에 관한 동작을 수행한다. 메서드 내부에서의 this this에는 호출한 주체에 대한 정보가 담긴다. 즉, 메서드로서 호출된 함수의 경우..