Harvey's TechNote

 Callback의 지옥에 한 번쯤은 다들 빠져보셨을 겁니다. Callback 지옥에 한번 빠지면 코드 가독성도 너무 떨어지고 코드를 짜는 사람도 머리가 아파지는데 비동기 코드를 작성할 때 더욱 효율적인 방법인 Promise & async/await에 대해 공부하여 이러한 지옥에서 빠져나와봅시다.

Promise

 Promise 와 async/await은 결론부터 말하자면 둘 다 개발자가 더 읽기 쉽고, 더 쉽게 유지 관리 가능한 방식으로 비동기 코드를 작성하고 처리할 수 있게 해주는 기능입니다. promise는 비동기 작업의 완료(성공 or실패)와 그 결괏값을 나타내는 객체입니다. 이것이 기존 콜백보다 어째서 더 효율적인 걸까요?

 promise가 생성될 때 promise는 pending상태가 되고 결과가 값으로 resolved 되거나 오류와 함께 reject 될 수 있습니다. 그리고 promise는 아래 코드와 같이 then을 이용하여 chain연결이 가능하고 출력값을 이를 통해 넘겨주는 것이 가능합니다. 이를 통해 작업의 결과를 처리하고 또한 catch문을 마지막에 사용하여 한번에 error 처리를 할 수 있습니다. 

Promise의 예시입니다. 

const testPromise = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('success!!');
    }, 4000);
  });
};

testPromise()
  .then((data) => {  //데이터를 넘겨 받아 처리합니다.
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

async/await

async/await은 Promise를 사용하기 위해 존재하는 구문입니다. 비동기식 코드를 동기식으로 작성할 수 있어서 읽고 이해하기가 더 쉽습니다.

 방식은 이렇습니다. async는 비동기 함수를 선언할 때 사용되고 wait은 promise가 해결될 때까지 기다리는 데 사용됩니다. wait을 사용하면 promise가 resolve 되거나 reject 될 때까진 코드 실행이 멈춥니다.  아래 코드를 보면서 이해해 봅시다.

const testPromise = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('success!!');
    }, 4000);
  });
};

const getData = async () => {
  try {
    const data = await testPromise();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

getData();

위 코드에서 testPromise함수는 Promise를 return 하고 wait을 통해 데이터를 콘솔에 기록하기 전 Promise가 resolve or reject 될 때까지 기다립니다. async로 선언된 getData함수는 안에서 wait을 사용할 수 있게 됩니다. 

 json은 개발 관련 공부를 하다 보면 자주 마주하게 될 수밖에 없습니다. 

 저만 해도 수십 번은 json 파일을 봐왔으나.. json이 대충 데이터를 전달할 때 사용되는 방식이라고만 알고 있고 남에게 정확하게 설명하라면 어떻게 서론을 시작해야 할지도 감히 안 잡혔습니다. 그래서 이번에 확실히 개념과 Javascript에서의 간단한 사용법을 짚고 넘어가고자 합니다.

JSON

 JSON(JavaScript Object Notification)은 사람이 읽고 쓰기 쉽고 기계 또한 구문을 분석하고 생성하기 쉬운 경량 데이터 형식입니다. 
서버, 웹, 프로그램 간 데이터를 전송하고 데이터를 저장 및 교환하는 데 자주 쓰입니다.

키는 문자열이며 값은 문자열,숫자,Boolean, 배열 및 객체를 포함합니다.  아래의 JSON 객체의 간단한 예를 보시면서 이해하시면 됩니다.

{
   "name" : "YUNSU KEUM"
   "age" : 27
   "face" : "young"
}

key(키) : "name" , " age" , "face "

value(값) :  "YUNSU KEUM", 27, "young"

JSON.stringify / JSON.parse

JSON.stringify

 JSON으로 만들어진 메시지를 보내려면 보내는 이와 받는 이가 같은 프로그램을 사용하여야 합니다. 아니면 문자열로 되어서 누구나 읽을 수 있는 형태여야 하죠. JSON.stringify는 여기서 자바스크립트 객체나 값을 JSON 문자열로 변환해 주는 자바스크립트의 메서드입니다.

그렇게 결과로 생성 된 JSON 문자열은 네트워크를 통해서 저장되거나 전송될 수 있게 되죠.

 예시의 자바스크립트 객체에 JSON.stringify 메서드를 사용해 보겠습니다. 

const yunsu = {
  lastName: "Keum",
  age: 27,
  city: "Gyeongsan"
};

const jsonYunsu = JSON.stringify(yunsu); // {"name":"Keum","age":"27","city":"Gyeongsan"}

결과가 JSON 표현이 문자열로 반환됩니다.  

JSON.parse

 JSON.parse()는 JSON.strigify와 달리 JSON 문자열을 자바스크립트 객체나 값으로 변환하는 자바스크립트의 메서드입니다. 

예시로 JSON 문자열을 자바스크립트 객체로 변환해보겠습니다.

const jasonYunsu = '{"name":"Keum","age":"27","city":"Gyeongsan"}';

const yunsu = JSON.parse(jsonString); 

// {
//   lastName: "Keum",
//   age: 27,
//   city: "Gyeongsan"
// }

마지막으로 JSON에서 꼭 지켜야 하는 기본 규칙이 있습니다.

고차 함수(higher-order function)란?

 고차 함수는 하나 이상의 함수를 인수로 취하는 경우 또는 결과로 함수를 반환하는 함수를 의미합니다.

고차함수의 예로는 함수와 요소의 배열을 입력하여 배열의 각 요소 하나하나에 적용하여 변환된 요소들의 새로운 배열을 반환해주는 map 함수, 또 일정 조건을 만족하는 요소들만 모인 배열들을 반환하는 filter 등이 있습니다.

고차 함수는 복잡한 알고리즘 구현을 크게 단순화 할 수 있기에 굉장히 효율적인 도구입니다. 데이터를 조작하고 계산할 때 고차함수를 사용하면 굉장히 효율적입니다.

ex)함수를 인자로 받고, 함수를 리턴.

function addPlusThree(plusNum){
  return plusNum+3; 
}

function addMinus(added, func){
  const plused = func(added);
  console.log(plused);
  
  return function(minusNum){
    
    return plused - minusNum ;
  
  };
  
}

console.log(addMinus(5,addPlusThree)); // function(minus) { return plused - munusNum}이 리턴됩니다.

const test = addMinus(5,addPlusThree); //

console.log(test(2)); // addplusThree에 들어가 8이된 값에서 addMinus의 return 함수에서 2가 빼진 6을 리턴합니다.

고차함수 map  ->  배열의 각 요소에 함수를 적용한 새로운 배열을 반환해줍니다.

let arr = ["Yunsu" , "JJangoo" , "Jisung"];

let result = arr.map(function(ele){
    
  return "Hi "+ ele;
  
})

console.log(result);   //["Hi Yunsu","Hi JJangoo","Hi Jisung"]

고차함수 filter -> 배열의 각 요소중 함수를 만족하는 요소들이 모인 새로운 배열을 반환해줍니다.

let arr =[203,532,15,24];

let result = arr.filter(function(ele){
  
    return ele>100;
  
})

console.log(result); //[203,532]

고차함수 reduce  -> 초기값을 설정하고 각 요소를 돌며 함수를 적용한 최종 값을 반환해줍니다.

let arr = ['바','보','멍','청','이'];

let result = arr.reduce(function(acc,cur,idx){
  

    
  acc+=cur;
  return acc
  
},'나는 ');

console.log(result); // "나는 바보멍청이"

querySelector / querySelectorAll

querySelector 와 queySelectorAll 은 CSS의 선택 구문을 사용하여 HTML문서에서 element를 선택할 수 있는

두가지 방법입니다. 

querySelector 는 selector와 일치하는 첫 번째 요소만 반환하는 대신 일치하는 모든 요소가 포함된 노드 목록을 반환합니다. 

const first = document.querySelector('p');

querySelectorAll은 querySelector와 비슷한 방식으로 자동하지만 셀렉터와 일치하는 모든 요소가 포함된 노드 목록을 반환합니다.

const all = document.querySelectorAll('p');

Class ex)

const User = function(name,age){
	this.name = name;
   	this.age = age;
    this.showName = function(){
    	console.log(this.name);
    };
};

const mike = new User("Mike",30);

class User2 {
	constructor(name,age){
    	this.name = name;
        this.age = age;
	}
	showName(){
	console.log(this.name)
    }
}

const tom = new User2("Tom",19);

tom.showName();
mike.showName();

Class 상속 ex)

class Car{
	constructor(color){
    	this.color = color;
        this.wheel = 4;
        }
   	drive(){
       	console.log("drive...");
       	}
  	stop(){
    	console.log("STOP!");
        }
}

class Bmw extends Car{
	park(){
    	console.log("PARK");
    }
    stop(){ //동일한 메소드 명으로 정의하면 기존 메소드 내용을 덮어씌운다.
    	//super.stop(); ->부모의 메소드 내용에서 확장하고 싶을 때 사용한다(super).
        console.log("OFF");
        }
}

const z4 = new Bmw("blue");

const Bmw = function(color){
	const c = color;
    this.getColor = function() {
    		console.log(c);
	};
};

ex) 공통된 car의 속성을 상속받음. bmw, benz, audi 는 car의 프로토타입들이 되는 것.

const car = {
	wheels : 4,
	drive() {
		console.log(“drive..”) ;
	},
};

const bmw  = {
	color: “red”,
	navigation: 1,
};

const benz = {
	color: “black”,
};

const audi = {
	color: “blue”,
};

bmw.__proto__ = car;
benz.__proto__ = car;
audi.__proto__ = car;


//아래와 같이 계속 상속 가능. 
const x5 = {
	color: “white”,
	name: “x5”,
};

x5.__proto__ = bmw .

ex2)

const Bmw = function (color) {
	this.color = color;
};


//아래와 같이 Bmw의 프로토타입들에게 속성을 부여하는 것도 가능. 
Bmw.prototype.wheels = 4; 
Bmw.prototype.navigation = 1;
Bmw.prototype.stop = function() {
	console.log(“Stop!”);
};
Bmw.prototype.drive = function() {
	console.log(“drive ..” );
};

const x5 = new Bmw ("red");
const z4 = new Bmw("blue");

* 아래와 같이 코드를 짜면 초기 설정된 색상을 이후에 변경할 수 없음.

const Bmw = function(color) { 
	const c = color;
	this.getColor = function() {
		console.log(c);
	};
};

*push() : 뒤에 삽입

*pop()   : 뒤에 삭제

*unshift(): 앞에 삽입

*shift() : 앞에 삭제

*arr.splice(n.m) : 특정 요소 지움. (n:시작 m: 개수)

*arr.splice(n,m,x) : 특정 요소 지우고 추가

*arr.concat(arr2,arr3...) : 합쳐서 새배열 반환

구조분해 할당

*구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식이다.

ex)

let users = ['Mike','Tom','Jane'];

let[user1, user2, user3] = users;

 ->let user1 = user[0];

     let user2 = user[1];

     let user3 = user[2]; 와 같다.

let a = 1, let b = 2 에서 a와 b의 값을 바꾸려면 원래 c라는 임의변수를 이용하여 바꿔야했지만 [a.b] = [b,a]와 같은 식을 이용하여 간편하게 바꿀 수 있다.

ex)

Const superman = {
  name:'clark',
  age: 33,
 
}

접근

superman.name

superman['age']

추가 

superman.gender = 'male';

superman['hairColor'] = ' blue ';

삭제

delete superman.hairColor;

객체 프로퍼티로 할당 된 함수.

const superman = {
  name:'clark',
  age : 33.
  fly : function(){
    console.log('날아갑니다.')
  }

// =fly(){
//    console.log('날아갑니다.')
// }
  
}