전체 글 (364) 썸네일형 리스트형 비동기 처리 - async/await # Promise를 통한 비동기 코딩 먼저 Promise를 통해서 어떻게 비동기 처리를 하는지 간단하게 리뷰해보자. 어떤 원격 REST API를 호출하여 게시물 작성자의 이름을 return하는 함수를 작성하고, 그 함수를 호출해보자. function fetchAuthorName(postId) { return fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`) .then((response) => response.json()) //resolve()함수의 인자로 넘겨받은 값이 response가 된다. .then((post) => post.id) //위 return한 response.json()값이 post가 된다. .then((userId) => { .. 비동기처리 - Promise # 콜백함수를 통한 비동기처리의 문제점 ES6에 Promise가 도입되어 지금처럼 널리 사용되기 이전에는 주로 콜백함수를 다른 함수의 인자로 넘겨서 비동기처리를 했었다. 2023.12.23 - [JavaScript] - 비동기함수의 순서를 제어하는 방법 1. Callback함수 비동기함수의 순서를 제어하는 방법 1. Callback함수 # 콜백함수란? 2023.12.23 - [JavaScript] - callback함수란? callback함수란? # 함수란? - 어떤 특정한 일을 하는 코드의 묶음 - 다양하고 의미있는 일을 하기 위해 매개변수(인자)를 전달받을 수 있다. - 여러 lion284.tistory.com 단순 코드를 작성할 때는 위와 같이 전통적인 방식으로 콜백함수를 통해 비동기처리를 해도 큰.. 비동기함수의 순서를 제어하는 방법 1. Callback함수 # 콜백함수란? 2023.12.23 - [JavaScript] - callback함수란? callback함수란? # 함수란? - 어떤 특정한 일을 하는 코드의 묶음 - 다양하고 의미있는 일을 하기 위해 매개변수(인자)를 전달받을 수 있다. - 여러 종류의 인자를 전달받을 수 있다. ex: 숫자, 문자열, 객체 등 - 함 lion284.tistory.com 비동기 방식에서는 각각의 처리 로직이 '병렬'로 수행되므로, 이 처리로직이 언제 시작되고 언제 종료되는지 알 수 없다. 하지만, 순차처리를 하고싶은 경우가 있을 수 있다. 콜백함수는 원하는 시점에 호출을 할 수 있으므로, 비동기 처리가 완료되면 호출되도록 할 수 있다. 그래서 콜백함수를 중첩 사용하여 순차처리를 할 수 있다. 즉, 중첩된 콜백함수를 이용.. callback함수란? # 함수란? - 어떤 특정한 일을 하는 코드의 묶음 - 다양하고 의미있는 일을 하기 위해 매개변수(인자)를 전달받을 수 있다. - 여러 종류의 인자를 전달받을 수 있다. ex: 숫자, 문자열, 객체 등 - 함수는 또다른 함수도 전달받을 수 있다. function main(param) { param(); } main(function() {}); //다른 함수의 인자로 전달되는 함수 ← 콜백함수 # 콜백함수 콜백함수는 콜백함수를 전달받은 함수(위 예시에서 main함수)에 의해서 호출된다. 그래서 이름이 'callback 함수'이다. "내가 함수 하나 전달할테니까 나중에 니가 알아서 불러줘!" function main(x) { //x라는 매개변수를 받음 ← x에 숫자, 문자열, 함수(콜백함수) 등 전달 가능... 원시 값과 객체의 비교 # 7가지 데이터타입자바스크립트가 제공하는 7가지 데이터 타입은 크게 원시 타입(primitive type)과 객체 타입(object/reference type)으로 구분할 수 있다. 구분데이터 타입설명원시 타입숫자(number) 타입숫자. 정수와 실수 구분 없이 하나의 숫자 타입만 존재문자열(string) 타입문자열불리언(boolean) 타입논리적 true/falseundefined 타입var 키워드로 선언된 변수에 암묵적으로 할당되는 값null 타입값이 없다는 것을 의도적으로 명시할 때 사용하는 값심벌(symbol) 타입ES6에 추가된 7번째 타입객체 타입객체, 배열, 함수 등 # 원시 타입 vs 객체타입 차이점크게 3가지 측면에서 다르다. 1/ 원시타입의 값, 즉 원시 값은 변경 불가능한 값(im.. [CSS] display에 대하여 # inline - 전후 줄바꿈없이 한 줄에 다른 엘리먼트들과 나란히 배치 - 대표 lnline 엘리먼트 : , , 태그 등 여러 개의 inline 엘리먼트들을 아래와 같이 마크업하면, 줄바꿈없이 순서대로 한 줄에 보이게 된다. HTML 삽입 미리보기할 수 없는 소스 - width, height 속성 : 무시 → 해당 태그가 마크업하고있는 컨텐츠의 크기만큼만 공간을 차지하도록 되어 있기 때문 - margin, padding 속성 : '좌우'간격만 반영 O. 상하 간격은 반영 X. *inline요소는 안에 내용이 있어야 화면에 표시된다. HTML 삽입 미리보기할 수 없는 소스 , , 태그 모두 CSS로 꾸몄음에도 불구하고 화면에 나오지 않고 있다. # block - 전후 줄바꿈이 들어가 다른 엘리먼트들을 .. 자바스크립트 11. 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험 😱 JavaScript Callback | 프론트엔드 개발자 입문편 (JavaScript ES6) 1. 동기와 비동기 JavaScript is synchronous. 자바스크립트는 동기적이다. Execute the code block in order after hoisting. => hoisting이 된 이후부터 우리가 작성한 코드의 순서에 맞춰서 하나하나 동기적으로 실행된다. ex) console.log('1'); console.log('2'); console.log('3'); 코드를 위와 같이 작성하면, console에 1, 2, 3 순서대로 출력된다. # asynchronous : 비동기 : 언제 코드가 실행될 지 예측할 수 없는 것. 예시) "setTimeout"이라고 하는 web API(브라우저에서 제공하는 API) 우리가 지정한 시간이 지나면 전달한 콜백함수를 호출한다. setTimeout.. [Udemy Vue 완벽가이드 Section16] 251. 활성 코치에 대한 요청 필터링하기 이제 모든 요청을 가져오는 것이 아니라, coachId가 우리의 id인 request만을 필터링하고자 한다. getter안에서는 하나 이상의 인수를 받을 수 있다는 사실을 활용해보자. state외에도 다른 getter에 액세스할 수있고, rootState, rootGetters도 가능하다. 여기서 필요한 건 rootGetters이다. userId는 루트 저장소의 일부이므로. 그리고 거기엔 이미 userId 게터가 있다. // index.js import { createStore } from 'vuex'; import coachesModule from './module/coaches/index.js'; import requestsModule from './module/requests/index.js'; c.. 이전 1 2 3 4 5 6 ··· 46 다음
