티스토리

무브라더

검색하기

블로그 홈

무브라더

leedhhhhh.tistory.com/m

이것저것 올리는 블로그

구독자: 1

방명록 방문하기

주요 글 목록

[JavaScript] async 와 await 출처 https://joshua1988.github.io/web-development/javascript/js-async-await/ 자바스크립트 async와 await (중급) 자바스크립트 개발자를 위한 async, await 사용법 설명. 쉽게 알아보는 자바스크립트 async await 개념, 사용법, 예제 코드, 예외 처리 방법 joshua1988.github.io async & await 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완했다. var user = fetchUser('domain.com/users/1'); if (user.id === 1) { console.log(user.name); } fetchUser() 이라.. 공감수 0 댓글수 0 2022. 4. 1.
[JavaScript] Promise 에 대해서 알아보자 Promise 자바스크립트 비동기 처리에 사용되는 객체 서버에서 받아온 데이터를 화면에 표시할 때 사용 데이터를 받아오기도 전에 화면에서 데이터를 표시하려고 할 때 발생하는 오류를 방지하기 위해 사용 프로미스를 사용하기 전에 프로미스를 사용하지 않고 데이터를 받아오는 코드를 살펴보면 function getData(callbackFunc) { $.get('url 주소/products/1', function(response) { callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌 }); } getData(function(tableData) { console.log(tableData); // $.get()의 response 값이 ta.. 공감수 0 댓글수 0 2022. 4. 1.
[JavaScript] 이벤트 버블링, 이벤트 캡쳐, 이벤트 위임, event.stopPropagation() 이벤트 버블링 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다. const divs = document.querySelectorAll('div'); divs.forEach(function(div) { div.addEventListener('click', logEvent); }); function logEvent(event) { console.log(event.currentTarget.className); } div 태그 한개만 클릭했을 뿐인데도 3개의 이벤트가 발생하는걸 결과로 알 수 있다. 그 이유는 브라우저가 이벤트를 감지하는 방식 때문이다. 브라우저는 특정 화면 요소에서 이벤트가 일어났을 때 이벤트를 최상위에 있는 화면 요소까지 전파 시.. 공감수 0 댓글수 0 2022. 3. 31.
[JavaScript] apply, call, bind 함수 호출 자바스크립트에서 함수를 호출하는 방법에는 먼저, 가장 일반적이고 빈번히 사용되는 함수 뒤에 ()를 붙여 호출하는 방법과 call, apply를 사용하여 호출하는 방법이 있다. 뭘 사용해도 다 같은 결과가 출력되는데 그렇다면 call apply bind의 차이점에는 무엇이 있는지 알아보자. function foo(a, b, c) { console.log(a + b + c); }; foo(1, 2, 3); // 6 foo.call(null, 1, 2, 3); // 6 foo.apply(null, [1, 2, 3]); // 6 1. Function.prototype.call() func.call(thisArg[, arg1[, arg2[, ...]]]) thisArg: func 호출에 제공되는 thi.. 공감수 0 댓글수 0 2022. 3. 29.
[JavaScript] this 바인딩 this 라는 개념이 애매하고 헷갈려서 제대로 정리를 해보려고 한다. https://nykim.work/71 [JS] 자바스크립트에서의 this this는 이것을 뜻합니다! (그러니까 '이게' 뭐죠...... 😵) 자바스크립트 내에서 this는 '누가 나를 불렀느냐'를 뜻한다고 합니다. 즉, 선언이 아닌 호출에 따라 달라진다는 거죠. 그럼 각 상황별로 th nykim.work 위 게시글을 통해 this 의 역할에 대해서 알아봤는데 보면서 이해가 안된 부분만 정리해보았다. this 1. 단독으로 쓴 this 2. 함수 안에서 쓴 this 3. 메소드 안에서 쓴 this 4. 이벤트 핸들러 안에서 쓴 this 5. 생성자 안에서 쓴 this 6. 명시적 바인딩을 한 this 7. 화살표 함수로 쓴 this .. 공감수 0 댓글수 0 2022. 3. 29.
[JavaScript] Array.from 클로저에 관해 공부를 하다가 예제에서 Array.from 이라는 코드를 알게되었다. 공부도 하고 복습도 하고 정리도 할겸 포스팅을 해보려고한다. Array.from( {length : 20}, () => Array(10).fill(0) ); 대충 20x10 짜리 2차원 배열을 리턴하겠구나 정도는 파악 할 수 있었지만 생소한 표현법이라 어떻게 동작하는지 한번 알아보자 Array.from 은 유사 배열 객체를 배열로 바꾸는 데 자주 사용했었다. MDN에서 나와있는 예시로는 다음과 같다. 1. Array.from('Tei'); // ['T','e','i'] 2. Array.from([1,2,3], x => x + x ); // [2,4,6] 1번의 예시는 눈에 익는 예시이다. 문자열을 인자로 받아 이를 배열로.. 공감수 0 댓글수 0 2022. 3. 25.
[JavaScript] 클로저 정리 ※ 본 게시글은 모던자바스크립트 deep dive를 보고 정리한 내용입니다. 틀린 내용이 있다면 댓글로 적어주시면 감사드리겠습니다 (__) 클로저에 대해 공부하고 클로저에 대해 간단히 설명을 해보자면 둘러싸여진 상태의 참조와 함께 다발로 묶여진 함수의 콤비네이션 내부함수로부터 외부함수의 접근 권한을 줌 함수 생성 시점에 언제나 생김 작성한 글을 쭉 읽어보면 무슨 말을 하고 싶은 건지 대강 이해가 될것이다. 렉시컬 스코프 함수를 어디에 정의했는지에 따라 상위 스코프를 결정 -> 렉시컬(정적) 스코프 렉시컬 환경의 '외부 렉시컬 환경에 대한 참조' 에 저장할 참고값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경에 의해 결정된다. 이것이 바로 렉시컬 스코프이다. 함수 객체의 .. 공감수 0 댓글수 0 2022. 3. 25.
[JavaScript] '?' 옵셔널 체이닝 연산자 ES2020에서 새롭게 등장한 연산자인 옵셔널 체이닝 연산자는 '?.' 형태로 사용되며 체인으로 이루어진 각 참조가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있는 연산자이다. 체이닝 연산자와 비슷하게 동작하지만 참조가 null 이거나 undefined여도 에러가 나오지 않고 undefined 값을 리턴한다. 함수 호출시에도 값이 없다면 undefined를 리턴한다. 만약 염색을 하려고 미용실을 가서 어떤 컬러를 할지 결정하기 위해 컬러북을 살펴봤다고 생각해보자 컬러는 무수히 많지만 거기에 나와있는 컬러는 없는 컬러도 있을 것이다. 없는 컬러를 선택했다고 가정하고 코드로 나타내보면 const color = { red : { name : '빨강' } , bl.. 공감수 0 댓글수 0 2022. 3. 24.
[JavaScript] prototype 정리 ※ 모던자바스크립트 책을 보고 이해가 어려웠던 부분만 정리한 내용입니다. 틀린 내용이 있다면 댓글 달아주시면 수정하겠습니다! 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어다. ES6에서 js에도 클래스를 제공하여 클래스와 와 생성자 함수 모두 프로토타입 기반의 인스턴스를 생성하지만 정확히 동일하게 동작하지는 않는다. 자바스크립트를 이루고 있는 거의 모든것은 객체이며 원시 타입의 값을 제외한 나머지 값들은 모두 객체이다. 자바스크립트에서 객체는 key와 value를 가지는 존재이며 생성자 함수 또한 객체이므로 속성과 값을 가진다. 상속과 프로토타입 자바스크립트에서의 상속은 프로토타입 기반으로 구현을 한다. 예제코드 // 생성자 함수 function Circle(radius) { this.radi.. 공감수 0 댓글수 0 2022. 3. 24.
[JavaScript] 가비지콜렉션, WeakRef 몇달 전에 나온 ES2021 문법에서 자바스크립트에서도 약한 참조라는 개념이 등장했다고 한다. 이는 가비지콜렉션(Gabage Collection) 과 관련이 있는데 가바지 콜렉션이란 과연 뭘까? 해석을 해보면 '쓰레기수집' 이다. 메모리 관리 기법 중의 하나로, 프로그램이 동적으로 할당했던 메모리 영역 중에서 필요없게 된 영역을 해제하는 기능이다 C를 예로 들면 free()라는 함수로 직접 메모리를 해제해줘야하지만, Java 개발자들은 메모리를 직접 해제해주는 일이 없었을텐데 이는 JVM의 가비지 컬렉터가 불필요한 메모리를 알아서 정리해주기 때문이다. 대신 자바에서는 불필요한 데이터를 표한하기 위해 일반적으로 null 을 선언해준다. Number num = new Nmuber(); num.setNumbe.. 공감수 0 댓글수 0 2022. 3. 21.
[ES6] const, let, var 차이점 알아보기 1. var 자바스크립트 ES5 버전까지의 변수 선언 방식 ( 요즘은 사용하지 않는걸 추천한다) 특징 1. var 키워드는 생략이 가능하다. (var) a = 29; console.log(a); //29 2. 재선언과 재할당이 가능하다. var a = 10; console.log(a); // 10 var a = 42; console.log(a); // 42 a = 12312; console.log(a); //12312 3. 함수 레벨 스코프이다. 자바스크립트는 블록레벨 스코프를 사용하는 java나 C와 다르게 함수레벨 스코프이다. 함수레벨 스코프(function level scope) 란 함수 안에서 사용하면 함수 밖을 제외한 내부 어디서든 접근이 가능하고 함수 외부에서 선언된 모든 변수는 전역 변수로 .. 공감수 0 댓글수 0 2022. 3. 2.

문의안내

티스토리
로그인
고객센터

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