티스토리

뚝딱뚝딱 프론트엔드

검색하기

블로그 홈

뚝딱뚝딱 프론트엔드

hjuu.tistory.com/m

h_j_u_u_ 님의 블로그입니다.

구독자: 4

방명록 방문하기

주요 글 목록

자바스크립트 Promise Promise 객체 프로미스 객체는 비동기 통신에 이용되는 객체이다. 프로미스 객체 등장 전에 자바스크립트는 콜백함수를 통해 비동기 통신을 처리했다. 그런데 서비스의 규모가 커질수록, 콜백함수를 통한 비동기 통신 처리는 여러 한계를 마주쳤다. 대표적인 예로, 콜백함수가 계속해서 콜백함수를 낳는 콜백 헬 및 애매한 에러 처리가 있다. 그래서 콜백 헬을 없애고, 더 명확한 비동기 통신의 표현을 위해 ES6에서 프로미스 객체가 도입되었다. 비동기 통신을 callback으로 처리했을 때 문제점 콜백 헬(callback hell) 자바스크립트에서 자주 사용되는 비동기 통신은 각 요청을 병렬로 처리한다. 덕분에 프로그램이 Blocking되지 않는(중단되지 않는) 장점이 있다. 그러나 비동기 통신을 올바르게 처리하기.. 공감수 0 댓글수 0 2021. 10. 6.
자바스크립트 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.. 공감수 1 댓글수 0 2021. 10. 2.
자바스크립트 Strict mode 암묵적 전역 function foo() { x = 10; } foo(); console.log(x); 위 코드의 실행 결과는 무엇일까? 에러일까? 🤔 그렇지 않다. 자바스크립트 엔진은 x를 콘솔에 출력하기 위해 foo 함수의 스코프에서 x 변수의 선언을 검색한다. 하지만 x는 선언되어 있지 않다. 따라서 foo함수의 상위 스코프인 전역 스코프에서 x 변수의 선언을 또 찾지만, 전역에도 없다. 이럴 경우 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성한다. 따라서 콘솔에는 10이라는 숫자가 찍히고, 마치 정상 동작하는 코드처럼 보인다. 이런 현상을 암묵적 전역이라 한다. Strict mode 개발자의 의도와는 상관없이 발생한 암묵적 전역은 오류를 발생시키는 원이이 될 가능성이 크다. 코.. 공감수 2 댓글수 1 2021. 9. 24.
자바스크립트 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 .. 공감수 0 댓글수 0 2021. 9. 19.
자바스크립트 Prototype 자바스크립트 공부를 하면서 제일 많이 어려워했던 부분을 꼽으라하면 난 무조건 프로토타입을 꼽을 것 같다 🥲. 처음 프로토타입을 공부했을 당시에는 헷갈리는 프로퍼티들과 머릿속으로 잘 그려지지 않는 구조로 인해 많이 어려워했다. 그리고 무엇보다 '나는 프로토타입을 사용하지도 않는데, 이걸 왜 공부해야하지?'라고 생각했다. 그런데 이런 생각들은 최근 프로토타입 공부를 하며 싹 바뀌었다. 그리고 다음의 목록으로부터 많은 도움을 받았다. 1. 내가 언제 프로토타입을 사용했는지 살펴보기 2. 코어 자바스크립트 06.프로토타입 읽기 3. 프로토타입의 삼각형 구조(밑에 나옴)를 바탕으로 이해하기 난 언제 프로토타입을 썼을까? 🤔 먼저 자바스크립트 개발자가 프로토타입을 언제 사용하는지 알아보자. 분명히 모든 개발자들이 .. 공감수 0 댓글수 0 2021. 9. 19.
함수 선언문 vs 함수 표현식 이 궁금증의 경우, 함수를 표현할 때 function A( ) { }의 표현법을 사용할 지, const A = ( ) => { } 의 표현법을 사용할지에 대해 페어와 고민하다가 갖게 되었다. 그러다 리뷰어님의 도움을 받아 함수 표현식과 함수 선언문이 있다는 것을 알게 되었다. 함수 선언문 function test() { // 함수 내용 } 일반적인 프로그래밍 언어에서 함수를 선언하는 방식으로 함수 리터럴과 모양이 동일하다. 함수 이름을 생략할 수 없다. Hoisting에 영향을 받는다. 즉, 코드를 구현한 위치와 관계없이 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어올려준다. 함수 표현식 const test1 = function foo() {}; const test2 = function () {}; .. 공감수 0 댓글수 0 2021. 4. 27.
DOM DOM 텍스트 파일의 웹 문서를 브라우저에 렌더링하려면, 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저 렌더링 엔진은 이를 위해 웹 문서를 load하고 parsing 하여, DOM을 생성하고 이를 메모리에 적재한다. DOM이란, 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이 객체들의 부자 관계가 표현된 트리 구조이다. DOM은 JS를 통해 동적으로 변경할 수 있으며, 변경된 DOM은 리렌더링 된다. 정적인 웹페이지를 동적으로 조작하기 위한 방법은, 메모리 상에 존재하는 DOM을 변경하는 것이다. 그리고 이때 필요한 것이 DOM API이다. DOM API는 DOM에 접근하고 변경하는 프로퍼티와 메소드의 집합이다. DOM에서 모든 요소, 어트리뷰트, 텍스트는.. 공감수 0 댓글수 0 2021. 4. 27.
자바스크립트 This 대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체릐 의미한다. 하지만 자바스크립트에서의 this는 어디서든 사용할 수 있고, 그래서 가장 혼란스러운 개념 중 하나라고 할 수 있다. 상황에 따라 달라지는 this 자바스크립트에서 this는 실행 컨텍스트가 생성될 때 함께 결정된다. 실행 컨텍스트는 함수가 호출될 때 생성되므로, this는 함수를 호출할 때 결정된다. 함수를 실행하는 방법에는 일반적인 함수로서 호출하는 방법과 메서드로서 호출하는 방법이 있다. 일반적인 함수는 그 자체로 독립적인 기능을 수행하지만, 메서드로서 호출된 함수는 자신을 호출한 객체에 관한 동작을 수행한다. 메서드 내부에서의 this this에는 호출한 주체에 대한 정보가 담긴다. 즉, 메서드로서 호출된 함수의 경우.. 공감수 1 댓글수 0 2021. 4. 27.
No newline at end of file(EOF) github에 미션을 올리고 보니, 'No newline at end of file' 이라는 문구가 뜨는 것을 발견했다. VSCode 상에서는 발견하지 못했어서 이게 뭐지 하고 의아했는데, 알고보니 '파일의 끝에 개행문자가 없음'의 의미로 파일의 제일 마지막 한줄을 꼭 비워두라는 의미였다. 그렇다면 파일 끝에 개행문자(\n)를 왜 넣어야할까? 결론부터 말하자면, 옛날에 IEEE가 책정한POSIX에서줄(line)을 그렇게 정의했기 때문이다. 이전에 C컴파일러 gcc는 POSIX에 근거하여 동작해서 코드를 한 줄씩 읽었다. 따라서, 파일 끝에 개행문자(\n)인 EOF가 없으면 문제가 발생했다. 그리고 여러 파일을 합칠 때, 끝에 한 줄이 비워져있지 않다면 병합(merge)하는 과정에서 에러를 발생시킬 가능성.. 공감수 0 댓글수 0 2021. 4. 26.
자바스크립트 Fetch API 자바스크립트에서 fetch()를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다. fetch()가 등장하기 전에는, 클라이언트 단에서 직접 HTTP 요청하고 응답을 받는 게 상당히 복잡해서 request나 axios, jQuery와 같은 라이브러리를 사용했다. 하지만 이제는 브라우저에서 내장된 fetch() 함수를 이용하면 대부분의 HTTP 요청을 할 수 있다. fetch 사용법 fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)) fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 .. 공감수 0 댓글수 0 2021. 4. 25.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.