2. 알아두어야 할 자바스크립트

ES2015(ES6) 등장

최신 문법 몇가지

1. const, let

2. 템플릿 문자열

3. 객체 리터럴

4. 화살표 함수

5. 구조분해 할당

6. 클래스

7. 프로미스

1 프로미스 예제1

const condition = true; // true면 resolve, false면 reject
const promise = new Promise((resolve, reject) => {
  if (condition) {
    resolve('성공');
  } else {
    reject('실패');
  }
});
// 다른 코드가 들어갈 수 있음
promise
  .then((message) => {
    console.log(message); // 성공(resolve)한 경우 실행
  })
  .catch((error) => {
    console.error(error); // 실패(reject)한 경우 실행
  })
  .finally(() => { // 끝나고 무조건 실행
    console.log('무조건');
  });

 

2 프로미스 예제2

promise
  .then((message) => {
    return new Promise((resolve, reject) => {
      resolve(message);
    });
  })
  .then((message2) => {
    console.log(message2);
    return new Promise((resolve, reject) => {
      resolve(message2);
    });
  })
  .then((message3) => {
    console.log(message3);
  })

  .catch((error) => {
    console.error(error);
  });

 

3 원래 식(db에서 가져오는거

function findAndSaveUser(Users) {
  Users.findOne({}, (err, user) => { // 첫 번째 콜백
    if (err) {
      return console.error(err);
    }
    user.name = 'zero';
    user.save((err) => { // 두 번째 콜백
      if (err) {
        return console.error(err);
      }
      Users.findOne({ gender: 'm' }, (err, user) => { // 세 번째 콜백
        // 생략
      });
    });
  });
}

 

4 위에 식 promise로

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);
    });
}

 

5 Promise.all

const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');
Promise.all([promise1, promise2])
  .then((result) => {
    console.log(result); // ['성공1', '성공2'];
  })
  .catch((error) => {
    console.error(error);
  });

 

8. async/await

1 promise도 복잡해

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);
    });
}

 

2 await 사용 + try catch

async function findAndSaveUser(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);
  }
}

 

3 화살표 함수도 async await

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);
  }
};

 

4 for wait of문으로 프로미스 배열 순회

const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');
(async () => {
  for await (promise of [promise1, promise2]) {
    console.log(promise);
  }
})();

 

사용

async function findAndSaveUser(Users) {
  // 생략
}

findAndSaveUser().then(() => { /* 생략 */ });
// 또는
async function other() {
  const result = await findAndSaveUser();
}

 

 

프런트엔드 자바스크립트

1. AJAX

2. formData(HTML form 태그의 데이터를 동적으로 제어할 수 있는 기능)

3. encodeURIComponent, decodeURIComponent

AJAX 요청을 보낼 때 주소에 한글이 들어가는 경우가 있다. 서버에 따라 한글 주소를 일해하지 못하는 경우가 있는데, 이 때는 window 객체의 메서드인 encodeURIComponent 메서드를 사용한다. 받는 쪽에서는 decodeURIComponent를 사용하면 된다.

  (async () => {
    try {
      const result = await axios.get(`https://www.zerocho.com/api/search/${encodeURIComponent('노드')}`);
      console.log(result);
      console.log(result.data); // {}
    } catch (error) {
      console.error(error);
    }
  })();
  
  decodeURIComponent('%wes2123~~~');

4. 데이터 속성과 dataset

프런트엔드에 데이터를 내려보낼 때 첫번째로 고려해야 할 점은 보안이기 때문에 민감한 데이터를 내려보내면 안된다. 보안과 무관한 데이터들은 자유롭게 프런트엔드로 보내도 된다. 자스 변수에 저장해도 되지만 데이터 속성을 이용하는 것이 좋다. 

<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>

 

데이터 속성의 장점 : 자스로 쉽게 접근할 수 있다.

불러올 때 data-접두어가 사라지고 -뒤에 위치한 글자는 대문자가 된다.

역으로 dataset.monthSalary=1000; 을 넣으면

data-month-salary="1000"이라는 속성이 생긴다.