Node.js 교과서 2장 정리

const 와 let

const: 한 번 대입 시 다른 값을 대입할 수 없음. 다른 값을 대입하려고 하면 에러 발생
또한, 초기화 시 값을 대입하지 않으면 에러 발생. 기본적으로 변수 선언 시 const사용
let: 다른 값을 대입해도 오류가 나지 않음.

템플릿 문자열

백틱(`)으로 감싼다. 문자열 안에 변수를 넣을 수 있다는 것이 특이점

const num1 = 1
const num2 = 2
const result = num1+num2
const string = `${num1} 더하기 ${num2} 는 ${result}`

console.log(string) //1 더하기 2는 3

객체 리터럴

객체의 메서드에 함수를 연결할 떄 더는 콜론(:)과 function을 붙이지 않아도 된다.
속성명과 변수명이 겹치는 경우에는 한 번만 적어야한다.

var sayNode = function() {
	console.log('Node');
}

var oldObject = {
	sayJS: function(){
    	console.log('JS') // sayJS라는 이름의 메서드 정의
    },
  sayNode: sayNode,
};

const newObject() {
	sayJS() { //sayNJS같은 객체 메서드에 함수 연결 시 :function을 안써도 된다!
    	console.log('JS');
    },
	sayNode,} //속성명과 변수명이 겹칠 경우 한 번만 적으면 된다!

즉,

{ name: name, age :age } //ES5
{ name, age } //ES2015

객체의 속성명을 동적으로 생성할 수 있음. 객체 리터럴 안에서도 속성명을 만들 수 있다.

화살표 함수

화살표 함수 (=>) 에서는 function 선언 대신 => 기호로 함수를 선언한다. 또한 변수에 대입 시 재사용 할 수도 있다. return 문을 줄일 수 있다.
매개변수가 한 개면 소괄호로 묶지 않아도 된다!

funtion add(x,y) {
 return x+y;
}

const add 2 = (x,y) => x+y; //소괄호, 괄호 생략 가능

funtion not1(x) {
 return !x;
}

const not2 = x => !x; //변수 한개 시 괄호 생략 가능.

기존의 function 방식과 다른 점은 this 바인드 방식이다.

여기서 this란? javascript 내부 변수 중 하나로, 해당 함수가 속해있는 객체를 가르키는 변수다. (자세한 사항은 먼 훗날 기술할 vanilla js 글에서 보자)

var relationship1 = {
	name:'zero',
    friends:['nero','hero'].
    logFriends: funtion(){
      var that = this; //relationship1을 가리키는 this를 that에 저장
          this.friends.forEach(funtion(friend) {
          console.log(that.name, friend);
		});
	},
};

const relationship2 = {
  name:'zero',
  friends:['nero','hero'],
  logFriends(){
      this.friends.forEach(friends => {
          console.log(this.name, friend);
      });
	},
};

relationship1의 경우에는 relationship1을 가리키는 this를 가리키는 that이라는 변수를 따로 저장해서 forEach문을 돌렸다.

하지만 relationship2의 경우는 화살표 함수를 이용해 메서드를 정의하고, 별도의 과정 없이 바로 this를 사용했다. 따라서 that을 이용해 상위 스코프를 간접접근한 방식이 아닌, 상위 스코프의 this를 직접 그대로 물려받는 것이다.

비구조화 할당
객체 안의 속성을 찾아서 변수와 매칭해줌. 구조화하지 않고도 변수 안의 내용을 할당시켜준다고 생각하면 좋을 것 같다.

var candyMachine = {
	status: {
    	name: 'node',
        count : 5,
    },
    getCandy: function() {
    	this.status.count--;
        return.this.status.count;
    }
};
var getCandy= candyMachine.getCandy; //이 부분을 비구조화 할당 적용 가능
var count = candyMachine.status.count; //이 부분을 비구조화 할당 적용 가능

//위 두 줄을 바꿔보겠습니다
const { getCandy,status : {count}} = candyMachine;

즉, 우리가 보통 변수에 대입을 하는 방식인 변수명 = 저장값 이 아닌, 저장값=변수명 순으로 코드를 작성함으로써 이미 정의된 구조화된 변수들 (배열,객체..) 의 값을 한방에 바꿀 수 있다.

프로미스 (콜백 지옥의 해결책)
내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체
Then을 붙이면 결과를 반환함
실행을 완료하지 않았으면 완료된 후에 Then 내부 함수가 실행됨

Resolve(성공리턴값) -> then 으로 연결
Reject(실패리턴값) -> catch로 연결
Finally 부분은 무조건 실행됨
Promise.all(배열) : 여러 개의 프로미스를 동시에 실행. 하나라도 실패하면 catch로 감. allSettled로 실패한 것만 추려낼 수 있음.
하지만 then을 계속 써야하는 '프로미스 지옥'에 빠질 수 있다.

const condition = true;
const promise = new Promise ((resolve,reject)=> {
	if (condition){
    	resolve('성공');
    } else {
    	reject('실패');
    }
});
//다른 코드가 들어갈 수 있음
promise
	.then((messeage)=>{
	console.log(message);
})
	.catch((error)=> {
	console.error(error)
});

하지만

function findAndSaveUser(Users) {
	Users.findOne({})
  .then((user) => {
    user.name ='zero';
    return user.save();
  })
  .then((user) => {
    return Users.findOne({ gender:'m' });
  })
  .then((user) => {
  // 생략
  })
  .catch(err => {
    console.error(err);
  });
}

이런 식으로 then 지옥이 펼쳐질 수 있다.

Async/await (프로미스 지옥의 해결책)
async : funcion 앞에 씀.
프로미스와 달리 왼쪽 <- 오른쪽 방향으로 코드 진행
await: then의 역할. 앞에서 받음

const findAndSaveUser = async (Users) => {
  try {
  let user = await Users.findOne({});
  user.name ='zero';
  user = await user.save();
  user = await Users.findOne({ gender:'m' });
  // 생략
  } catch (error) {
      console.error(error);
	}
};

AJAX
서버로 요청을 보내는 코드.
라이브러리 없이는 브라우저가 지원하는 XMLHttpRequset 객체 이용
AJAX 요청 시 Axios 라이브러리를 사용하는게 편함

FormData
HTML form 태그에 담긴 데이터를 AJAX 요청으로 보내고 싶은 경우

일단 형태만 알아두자.

encodeURIComponent,decodeURIComponent
가끔 주소창에 한글 입력하면 서버가 처리하지 못하는 경우 발생, 이를 해결하기 위함. encodeURIComponent로 한글 감싸줘서 처리. decodeURI를 이용해 디코딩.

<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() { // 요청에 대한 콜백
if (xhr.readyState === xhr.DONE) { // 요청이 완료되면
  if (xhr.status === 200 || xhr.status === 201) { // 응답 코드가 200이나 201이면
  	console.log(xhr.responseText); // 서버에서 보내주는 값
  } 
  else {
  	console.error(xhr.responseText);
  	}
  }
};
xhr.open('GET','https://www.zerocho.com/api/search/' + encodeURIComponent('노드')
        ); // 한글 주소 인코딩 후 전송
xhr.send(); // 요청 전송
</script>

한글 부분을 encodeURIComponent로 감싸주는 것이 중요하다.

data attribute와 dataset
HTML 태그에 데이터를 저장하는 법,

자바스크립트에서 태그.dataset.속성명으로 접근 가능

• data-user-job -> datasset.userJob (두번째 띄어쓰기부터 앞글자대문자!)
• data-id -> dataset.id

반대로 자바스크립트 dataset에 값을 넣으면 data-속성이 생김

• dataset.monthSalary = 10000 -> data-month-salary="10000"

<ul>
  <li data-id="1" data-user-job="programmer">Zero</li>
  <li data-id="2" data-user-job="designer">Nero</li>
  <li data-id="3" data-user-job="programmer">Hero</li>
  <li data-id="4" data-user-job="ceo">Kero</li>
</ul><script>
console.log(document.querySelector('li').dataset);
// { id:'1', userJob:'programmer' }
</script>