반응형

▼ 프로젝트를 진행하다보면 HTTP 통신을 통해 데이터를 가져와야할 경우가 있습니다. 기본적으로 HTTP통신은 비동기적으로 이루어집니다. 그렇다보니 데이터를 받아오기전에 Rendering이 이루어지는 경우도 있고 미리 연산처리를 해버려 에러를 발생시키는 경우도 빈번하게 발생합니다.

이번 포스팅에서는 위와 같은 일을 방지하기 위해 Javascript 에서의 비동기를 동기로 실행하는 방법에 대해서 알아보려합니다 👍

📋비동기 / 동기

▼ 우리는 카페에가서 음료를 주문하고 진동벨을 받아옵니다. 자리에가서 앉아 있다 진동벨이 울리면 커피를 받아옵니다. 이를 ‘비동기 처리’에 비유할 수 있습니다.

각자의 일을 처리하다 자신의 차례가 오면 자신의 일을 수행합니다. 서로에게 영향을 주지 않습니다.

진동벨이 없다고 생각해보세요 카페에가서 음료를 시키고 음료가 나올때까지 카운터에서 기다려야한다면 우리는 커피가 나오기전까지는 자리에 앉아 업무를 볼 수 없을거에요 이처럼 앞의 일이 끝나야 다음일을 처리할 수 있는 것을 ‘동기의 처리’에 비유할 수 있습니다.

📋비동기를 동기로 동작시키는법

▼자바스크립트에서의 비동기를 동기로 동작시키는 대표적인 3가지의 방법을 알아보겠습니다.

Callback Function

Promise

Async / Await

Generator (이 포스트에서는 다루지 않습니다)

📋 1. Callback

첫번째로 Callback을 이용한 방법을 알아보겠습니다.

기본적인 Callback의 사용법은 위와 같습니다 😉

a 는 callback 즉 function을 받는 함수입니다.

a 는 받은 함수에 ‘i am A’ 라는 값을 넣어줍니다.

b 는 a에서 넘겨준 ‘i am A’ 라는 값을 받아 console 에 찍어줍니다.

위의 코드의 동작을 이해하셨다면 비동기를 동기로 바꾸는 코드도 쉽게 이해하실 수 있습니다.

두개의 함수가 있습니다.

step1은 실행 후 2초가 걸리고, step2는 1초가 걸립니다.

우리는 step1이 실행되고 step2 가 실행되기를 바랍니다.

위의 코드를 실행해보면 우리가 원했던 결과가 나오지 않습니다.

step2 가 실행하고 step1 이 실행됩니다.

어떻게 하면 우리가 원하는대로 실행시킬 수 있을까요 ? 바로 ‘Callback’ 을 이용하면 됩니다.

step1 은 함수를 인자로 받는 함수입니다.

step1 은 받은 함수를 실행해주는 역할을 합니다.

우리가 의도한대로 step1 이 실행된 후 step2 가 실행됩니다.

위와 같은식으로 Callback을이용하면 비동기를 동기처럼 동작하게 할 수 있습니다.

하지만 지금은 함수가 2개 뿐이지만 함수가 많아질 수록 함수의 깊이가 깊어집니다. 표현방법 2 처럼 말이죠 함수안에 함수 함수안에 함수…. 그안에 또 함수 … 다들 한번쯤 들어보셨을만한 Callback Hell 이 되는 것이죠 .. 그래서 조금더 깔끔하게 처리할 방법이 필요했습니다.

그것이 2번째 방법인 Promise 입니다.

📋2. Promise

기본적인 Promise 객체의 사용법 입니다.

foo 는 Promise 객체를 Return 합니다. 그렇기 때문에 foo().then 처럼 이어갈 수 있습니다.

foo().then 에서 then은 foo의 동작이 마무리된 후 동작합니다. Promise resolve 안에 넣어준 값이 들어옵니다.

then 을 계속 이어쓸 수 있습니다

Callback 으로 해결했던 것을 Promise 로 변경해보겠습니다.

a는 Promise 객체를 반환합니다. 그렇기 때문에 a().then 을 통해 순서를 제어할 수 있습니다. then 은 a의 동작이 마무리된 후 실행됩니다.

a 가 실행되며 console.log(‘a run …..’) 이 제일 먼저 실행되고

resolve를 통해 then 으로 (str === ‘a run …..’) 을 넘겨줍니다.

a의 실행이 끝나고 then 에서 b를 실행하며 str을 넘겨줍니다. 이때 console.log(‘b run …..’) 이 찍히게 됩니다.

마지막으로 1초 후 console.log(‘넘겨받은 값: ’, str) 이 찍히게 됩니다.

또 여러개의 비동기 작업이 있을때 비동기 작업이 모두 완료된 후에 어떤 작업이 이루어져야 할때도 Promise를 이용할 수 있습니다.

2개의 작업이 있습니다. 한가지 작업은 1초가 걸리고 다른 한가지 작업은 2초가 걸립니다. 우리가 원하는 것은 두개의 작업이 ‘모두’ 마무리 된 후에 다른 작업이 이루어지기를 바랍니다.

Promise.all 에 [첫번째 Promise, 두번째 Promise] 의 형태로 넘겨주면 모든 Promise의 작업이 끝난후 then 에 결과값을 배열형태로 넘겨줍니다

어떤가요 Callback 보다는 편리해졌나요 ? 하지만 Promise 또한 깊이가 깊어진다면 가독성이 현저히 떨어질 수 있습니다. 사실 Promise를 사용하는데 보기가 너무 힘들고 불편한 현상이 생겼다면 (본인의 코드를 의심해봐야 될 수 있습니다…😉)

📋3. Async / Await

마지막으로 살펴볼 방법은 Async / Await 입니다.

Async /Await 은 말그대로 동작을 일시정지 시킨것처럼 보이게 해줍니다. Promise 나 Callback 보다는 직관적인 코드 패턴을 가질 수 있습니다. (Async 와 Promise 의 차이점에 대해서는 후에 포스트에서 다뤄볼 예정입니다)

async 함수 표현식을 이용합니다.

async 함수 내부에서는 promise 객체들의 순서를 await을 이용하여 순서 조절이 가능합니다.

foo 는 async 함수입니다.

foo 를 실행가된다면 console.log(‘foo run….’) 이 가장 먼저 찍히게되고 아래 await 을 만나게 됩니다.

promise() 은 Promise 객체입니다. promise() 을 실행하면서 console.log(‘promise run ….’) 이 찍히게 되고 2초 후에 resolve(10) 을 실행하게됩니다. 앞에서 살펴봤던 Promise 에서는 then으로 10 으로 들어가지만 await 을 이용하게되면 10 이 return 됩니다. 즉 const num = 10 이 됩니다.

promise() 종료 후 num 에 10이 들어오고 console.log(‘num’, 10) 이 실행된 후 종료됩니다.

📢마무리

▼ 비동기를 동기처럼 사용할 수 있는 3가지 방법에 대해서 알아봤습니다. 어떤 것이 좋고 어떤 것이 안 좋다고 말하기에는 저의 경험과 지식이 아직 부족하기도 하고 상황마다 필요한 것들이 다르기 때문에 감히 말할 수는 없습니다.

Promise와 Async 는 디버깅 시 에러가 걸리는 포인트가 다르기도 하고 개인의 취향에 따라 어떤 것이 더 보기 편하다 나쁘다 등등 굉장히 많은 이야기가 오가는 것으로 알고 있습니다. 이에 대한 이야기는 자료를 더 수집한 후 뒤에 포스터에서 정리해보려 합니다. 😉

​

-출처 https://medium.com/@appear.ko/javascript-async-to-sync-157c57208598

 

반응형
저작자표시 비영리 변경금지

'프로그래밍 > JavaScript' 카테고리의 다른 글

javascript - throw 예외처리  (0) 2022.01.05
D3.JS - 날짜 라인 그래프 그리기  (0) 2022.01.05
JavaScript - ECMA6 문법 (구조분해,애로우함수 등)  (0) 2019.04.30
javascript - foreach 문 , for in 문 , for of문  (1) 2019.03.03
javascript 구동방법이해하기  (0) 2019.03.03
반응형

📢JAVASCRIPT THROW 예외처리

▼ 내용
throw 에 에러가 걸리면 이하 구문은 실행안하고 catch문으로 들어간다

💻코드

function getRectArea(width, height) {
  if (isNaN(width) || isNaN(height)) {
    console.log("시작 1");
    throw "Parameter is not a number!";
    console.log("시작 2");
  }
  console.log("시작 3");
}

console.log("시작 4");

try {
  getRectArea(3, 'a');
  console.log("시작 5");
}
catch(e) {
  console.log("에러22"+e);
  // expected output: "Parameter is not a number!"
}

//console.log 에러일경우
> "시작 4"
> "시작 1"
> "에러22Parameter is not a number!"

//console.log 정상일경우
> "시작 4"
> "시작 3"
> "시작 5"
반응형
저작자표시 비영리 변경금지

'프로그래밍 > JavaScript' 카테고리의 다른 글

[JAVASCRIPT] - 동기 , 비동기  (0) 2022.01.05
D3.JS - 날짜 라인 그래프 그리기  (0) 2022.01.05
JavaScript - ECMA6 문법 (구조분해,애로우함수 등)  (0) 2019.04.30
javascript - foreach 문 , for in 문 , for of문  (1) 2019.03.03
javascript 구동방법이해하기  (0) 2019.03.03
반응형

💻코드

<div id="canvas-realtile-graph"><svg width="355" height="110"></svg></div>
<script> 	
			var n = 60;
			var dataGal=[];
		    //random = d3.randomNormal(0, .2),
		    //dataGal = [0.3639, 0.4862, 0.7588, 0.5905, 0.3522, 0.8548, 0.1268, 0.9583, 0.1176, 0.1361, 0.8377, 0.4384, 0.5754, 0.7842, 0.9094, 0.7698, 0.1691, 0.0518, 0.8581];
		    //dataGal = [5,10,15,20,25,30,35,40];
/* 			dataGal = [ 
							  { "x": 1558583546*1000,   "y": 0.3639},  
							  { "x": 1558583547*1000,  "y": 0.4862},
							  { "x": 1558583548*1000,  "y": 0.7588}, 
							  { "x": 1558583549*1000,  "y": 0.5905},
							  { "x": 1558583550*1000,  "y": 0.8548},  
							  { "x": 1558583551*1000, "y": 0.9583}
							]; */
			
			var svg = d3.select("svg"),
			    margin = {top: 20, right: 20, bottom: 20, left: 40},
			    width = +svg.attr("width") - margin.left - margin.right,
			    height = +svg.attr("height") - margin.top - margin.bottom,
			    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
			
			
			var abcd3 = (1558583546+60)*1000;
			var abcd2 = 1558583546*1000;
			
			var x = d3.scaleTime()
			    .domain([abcd2, abcd3])
			    .range([0, width]);
			
			var y = d3.scaleLinear()
			    .domain([0, 1])
			    .range([height, 0]);
			
			var line = d3.line()
			    .x(function(d) { return x(d.x); })
			    .y(function(d) { return y(d.y); });
			
			g.append("defs").append("clipPath")
			    .attr("id", "clip")
			  .append("rect")
			    .attr("width", width)
			    .attr("height", height);
			
			g.append("g")
			    .attr("class", "axis axis--x")
			    .attr("transform", "translate(0," + y(0) + ")")
			    .call(d3.axisBottom(x).ticks(3).tickFormat(d3.timeFormat("%M:%S")));
			
			g.append("g")
			    .attr("class", "axis axis--y")
			    .call(d3.axisLeft(y).ticks(5));
			
			g.append("g")
			    .attr("clip-path", "url(#clip)")
			  .append("path")
			    .datum(dataGal)
			    .attr("class", "line")
			  .transition()
			    .duration(1000)
			    .ease(d3.easeLinear)
			    .on("start", tick);
			
 			function tick() {
 				console.log("tick 조회")
			  /*var gal = { "x": 1558583552*1000, "y": 0.2590};*/
			  var gal = { "x": new Date().getTime(), "y": Math.floor(Math.random()*10000)/10000};
 				
			  dataGal.push(gal);
			  rescale();
			  
			  // Redraw the line.
			  d3.select(this)
			      .attr("d", line)
			      .attr("transform", null);

			  d3.active(this)
			      //.attr("transform", "translate(" + x(-1) + ",0)")
			    .transition()
			    .on("start", tick);

			  if(dataGal.length>=60){
				  dataGal.shift();
			  } 
			} 
			
			
			function rescale() {
			    
			    y.domain([0,1.0]);  // 스케일 바꾸기
			    x.domain([new Date().getTime()-60000,new Date().getTime()]);
			    
			    g.select(".axis--y").remove(); //스케일 라벨 지우기
			    g.select(".axis--x").remove(); 
				
			    g.append("g")
			    .attr("class", "axis axis--y")
			    .call(d3.axisLeft(y).ticks(6)); //스케일 라벨 그리기
			    
				g.append("g")
			    .attr("class", "axis axis--x")
			    .attr("transform", "translate(0," + y(0) + ")")
			    .call(d3.axisBottom(x).ticks(3).tickFormat(d3.timeFormat("%M:%S")));
			
			}
			
			
			
			function ParseToDate(d){
				return d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
			}

</script>
반응형
저작자표시 비영리 변경금지

'프로그래밍 > JavaScript' 카테고리의 다른 글

[JAVASCRIPT] - 동기 , 비동기  (0) 2022.01.05
javascript - throw 예외처리  (0) 2022.01.05
JavaScript - ECMA6 문법 (구조분해,애로우함수 등)  (0) 2019.04.30
javascript - foreach 문 , for in 문 , for of문  (1) 2019.03.03
javascript 구동방법이해하기  (0) 2019.03.03
반응형





◎ => (애로우 함수)

▼ 내용

ECMA6 들어서면서 => 애로우 함수를 사용할수 있따.

const handleListening = () =>{ console.log('ㅎㅇ'); } // 위에 는 const handleListening = function () { console.log('ㅎㅇ'); } //이거랑 같다

​

◎ import , export

▼ 내용

import 문은 외부 모듈이나 다른 스크립트 등으로부터 export 된 기능을 가져오는데 사용됩니다.

(함수,변수 모듈화 class화?)

​

자바스크립트는 호이스팅이 되는 관계로 변수나 함수가 전역에서 사용할 수 있었기 때문에 이름으로 충돌을 일으키는 경우가 많아서 이용하기 어려웠다. (CommonJS로 사용할 수는 있었음)

ES6부터는 모듈 시스템을 사용할 수 있게 만들었다.

하지만 브라우저에서 지원이 되지 않고있기때문에 webpack같은 모듈 번들러를 사용해야만 모듈시스템(import, export)을 사용할 수 있다.

문법.. import name from "module-name"; import * as name from "module-name"; import { member } from "module-name"; import { member as alias } from "module-name"; import { member1 , member2 } from "module-name"; import { member1 , member2 as alias2 , [...] } from "module-name"; import defaultMember, { member [ , [...] ] } from "module-name"; import defaultMember, * as alias from "module-name"; import defaultMember from "module-name"; import "module-name";

​

export const pi = Math.PI; export function square(x) { return x * x; } export class Person { constructor(name) { this.name = name; } }

export 키워드로 변수, 함수, 클래스를 외부의 스크립트로 모듈화 시킬 수 있다.

외부로 보내고 싶은 것들에 일일이 키워드를 붙여도 되고 아래처럼 한번에 export해도된다.

const pi = Math.PI; function square(x) { return x * x; } class Person { constructor(name) { this.name = name; } } export { pi, square, Person };
import {userRouter} from "./router"; //export const userRouter = express.Router(); import app from "./app"; //export default app;

또한 export default app; 이렇게 할경우엔 바로 import app 할수 있지만

(export default 파일명 한다는건 안에있는 모든걸 export 해준다는것)

export const userRouter 이렇게 할경우엔 가져올때 {} 를 붙혀서 써줘야한다.

// main.js import { pi, square, Person } from './lib'; console.log(pi); // 3.141592653589793 console.log(square(10)); // 100 console.log(new Person('Lee')); // Person { name: 'Lee' }

반대로 가져오는 방법은 위와 같이 "import" 키워드를 사용하고 from 으로 해당 모듈의 js파일을 가리키면 된다.

​

import * as lib from './lib'; console.log(lib.pi); // 3.141592653589793 console.log(lib.square(10)); // 100 console.log(new lib.Person('Lee')); // Person { name: 'Lee' }

위와 같이 "as"를 사용해서 일일이 모듈을 불러오지 않고 한번에 사용할 수 있다.

◎ 구조 분해 할당 ( destructuring assignment )

▼ 내용

객체 또는 배열을 소인수분해 하듯이 분해하여 할당할수 있다.

const searchingBy = req.query.term //기존방식 const { query: {term : searchingBy} //req.query.term 의값을 searchingBy 할당 } = req;

솔직히 이걸 작성하면서 대략적인 느낌만 이해가간다.. 하지만 왜 구지 보기힘들게 이렇게쓰나 싶다.. 나중에 이해더가면 추후작성하기로하고 mdn 주소를 남긴다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

​

▼새로운 변수 이름에 할당

객체 구조분해를 사용하여 새로운 변수 이름에 값을 할당할 수 있습니다.

var o = {p: 42, q: true}; var {p: foo, q: bar} = o; console.log(foo); // 42 console.log(bar); // true





​


반응형
저작자표시 비영리 변경금지

'프로그래밍 > JavaScript' 카테고리의 다른 글

javascript - throw 예외처리  (0) 2022.01.05
D3.JS - 날짜 라인 그래프 그리기  (0) 2022.01.05
javascript - foreach 문 , for in 문 , for of문  (1) 2019.03.03
javascript 구동방법이해하기  (0) 2019.03.03
javascript - 콜백함수 확장판 (콜백함수 이해하기)  (0) 2019.03.03
반응형

◎ foreach 문

▼ 내용

foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드입니다. (ES6부터는 Map,Set 지원)

배열의 요소들을 반복하여 작업을 수행할수 있습니다.

foreach구문의 인자로 callback함수를 등록할수 있고, 배열의 각 요소들이 반복될 떄 이 callback 함수가 호출됩니다. callback 함수에서 배열요소의 인덱스와 값에 접근할수 있습니다.

배열의 첫번쨰부터 마지막까지 반복하면서 item을 꺼낼수 있다.

var arr = ['가','나','다','라']; arr.forEach(function(item,index,arr2){ console.log(item,index,arr2[index+1]); }) //첫번쨰 인수는 배열의 각각의 item //두번쨰 인수는 배열의 index //세번째 인수는 배열 그자체

​

◎ for .... in 반복문

▼ 내용

객체에 사용 할수 있습니다.

객체의 key값과 value 값을 뽑아내는데 유용합니다.

객체의 키값의 갯수만큼 반복하여 첫번쨰키값부터 마지막 키값까지 반복합니다.

var obj = { a: '가', b: '나', c: '다' }; for (var key in obj) { console.log(key, obj[key]); // a 가, b 나, c 다 }

​

​

◎ for ... of 반복문

▼ 내용

for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다.

for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 합니다.

(직접 명시 가능)

var iterable = [10, 20, 30]; for (var value of iterable) { console.log(value); // 10, 20, 30 }

​

◎ for in 반복문과 for of 반복문의 차이점

▼ 내용

for in 반복문 : 객체의 모든 열거 가능한 속성(property)에 대한 반복

for of 반복문 : [Symbol.iterator] 속성을 가지는 컬렉션 전용

Object.prototype.objCustom = function () {};// Object 프로퍼티에 객체 생성 Array.prototype.arrCustom = function () {}; // array 프로퍼티에 객체 생성 var iterable = [3, 5, 7]; iterable.foo = "hello"; for (var key in iterable) { console.log(key); // 0, 1, 2, "foo", "arrCustom", "objCustom" } //기본 js 내장함수에 프로퍼티를 추가해서 프로퍼티까지 다뽑힌다 for (var value of iterable) { console.log(value); // 3, 5, 7 }

​


반응형

'프로그래밍 > JavaScript' 카테고리의 다른 글

D3.JS - 날짜 라인 그래프 그리기  (0) 2022.01.05
JavaScript - ECMA6 문법 (구조분해,애로우함수 등)  (0) 2019.04.30
javascript 구동방법이해하기  (0) 2019.03.03
javascript - 콜백함수 확장판 (콜백함수 이해하기)  (0) 2019.03.03
javascript - 콜백함수,함수의 선언,클로저  (0) 2019.03.03

+ Recent posts

티스토리툴바