노드와 자바스크립트 2

구조 분해 할당

구조 분해 할당을 사용하면 객체와 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있습니다.

그리고 웬만하면 this를 사용하게 되는 경우 구조 분해 할당을 안 하는 것이 좋다고 합니다.

this의 경우 함수를 호출할 때 어떻게 호출되었냐에 따라 결정되기 때문이라고 합니다.

 

아래는 쉬운 예시입니다.

arr = [1, 2, 3, 4, 5]
const x = arr[0]
const y = arr[1]
const z = arr[4]

//위와 같이 하나 하나 입력하는것을 아래와 같이 바꿀 수 있습니다.

arr = [1, 2, 3, 4, 5]
const [a, b, c, d, e] = arr;

 

 

async/await

ES2017에 추가되었으며  노드 7.6버전부터 지원되는 기능입니다.

위 기능은 프로미스가 콜백지옥을 해결했지만 코드가 아직 장황한데 

이를 깔끔하게 더 줄여 코드의 가독성을 높이기 위해 사용한다고 합니다.

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



// async/await을 사용후

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

 

 

Map/Set

Map은 객체와 유사하고 Set은 배열과 유사하다고 생각하시면 됩니다.

const m = new Map();

m.set('a','b');

 

 

AJAX

백엔드 개발자분들이나 프론트엔드 개발자들에게 중요한 기법입니다.

비동기적 웹 서비스를 개발할 때 사용하는 기법인데요.

이름에 XML 이라는 용어가 들어가 있지만 요즘은 JSON을 많이 사용합니다.

보통 AJAX 요청은 jQuery나 axios 같은 라이브러리를 이용해서 보냅니다.

 

axios 같은 경우 axios.get 함수의 인수로 요청을 보낼 주소를 넣으면 됩니다.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  axios.get('https://www.zerocho.com/api/get')
    .then((result) => {
      console.log(result);
      console.log(result.data);
    })
    .catch((error) => {
      console.error(error);
    });
</script>

 

물론 위 코드도 async/await 방식으로 변경이 가능합니다.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  (async () => {
    try {
      const result = await axios.get('https://www.zerocho.com/api/get');
      console.log(result);
      console.log(result.data); // {}
    } catch (error) {
      console.error(error);
    }
  })();
</script>

 

 

FormData

HTML form 태그의 데이터를 동적으로 제어할 수 있는 기능입니다.

Formdata 생성자로 formData 객체를 만들고 사용이 가능합니다.

<script>
  const formData = new FormData();
  formData.append('name', 'zerocho');
  formData.append('item', 'orange');
  formData.append('item', 'melon');
  formData.has('item'); // true
  formData.has('money'); // false;
  formData.get('item');// orange
  formData.getAll('item'); // ['orange', 'melon'];
  formData.append('test', ['hi', 'zero']);
  formData.get('test'); // hi, zero
  formData.delete('test');
  formData.get('test'); // null
  formData.set('item', 'apple');
  formData.getAll('item'); // ['apple'];
</script>

 

 

 

encodeURIComponent, decodeURIComponent

AJAX 요청을 보낼때 주소에 한글이 들어가는 경우가 있는데

서버 종류에 따라 한글 주소를 이해하지 못하는 경우가 있어 위 메서드들을 사용한다고 합니다.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  (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);
    }
  })();
</script>

//받는쪽에서는 decodeURIComponent를 사용하면 됩니다.

 

 

 

 

 

---

지금까지 자바스크립트에 대한 내용들을 알아보았습니다.

다음에는 본격적으로 노드 기능에 대해 알아보도록 하겠습니다.

(대부분 전에 배웠던 내용들이라 빠르게 넘어갔습니다^^)

https://loui3.tistory.com/74

01. AJAX란(+API)