BEYOND SW 캠프 15기 / 14주차 회고

TIL(This week I Learned)

1. JavaScript
2. Vue.js

Facts

자바스크립트 ES6 이후 버전들

자바스크립트의 핵심적인 기능들을 학습한 후에 ES6 이후에 추가된 기능들을 배웠다. arrow function 이라든가 promises와 이의 단점을 보완한 async-await 이라든가 하는 다양한 추가적인 기능들을 배웠는데, Node.js를 얕게나마 사용할 때 공부했던 내용들이라 낯설지는 않았던 것 같다. 다만 자주 사용하거나 다양한 용법으로 활용해보지는 않아서 프로젝트를 하면서 좀 더 깊이 있는 이해가 필요할 것 같다.

Figma를 통한 인터페이스 디자인 협업

백엔드 프로젝트가 마무리됨과 동시에 프론트 프로젝트를 위한 UI 디자인 작업에 들어갔다. 대충 한 3~4년 전에는 카카오에서 목업 UI 작업을 할 수 있는 Oven이라는 툴을 제공해줬었는데, 작년 이후로 서비스를 종료했다는 것 같다. Figma 작업을 하면서 나는 정말 CSS와는 거리감이 있는 사람이라는 것을 깨달았다. 디자인 감각이 부족한 것도 있고 그리고 다른 것보다 어트리뷰트 들의 구도를 잡는 게 쉽지 않다. HTML-CSS 작업을 할 수록 그냥 빨리 자바스크립트랑 백엔드를 하고 싶어졌다. 요새 디자인 협업 툴로 Figma를 많이 사용한다고 하니 써보는 것은 좋긴한데 사실 목업 인터페이스 제작에 큰 품을 들이는게 좀 아리송한 부분도 있다. 근데 또 사람들 이야기를 들어보면 Figma로 작업해두면 HTML-CSS 작업이 좀 수훨해진다는 것 같기도 하고... Figma에 대한 평은 본격적인 프로젝트 기능 구현이 시작돼야 할 수 있을 것 같다.

Findings

자바스크립트 코드의 비동기처리에 대하여 배웠다.

- 동기 : 이전 코드가 완료된 후 다음 코드가 순차적으로 실행된다.

- 비동기 : 백그라운드에서 코드가 처리되는 중에도 다음 코드가 이어서 실행된다.

자바스크립트에서는 비동기 작업이 끝난 후에 수행할 코드를 명시하는데, 이를 콜백함수라고 한다. 이러한 콜백이 중첩되면 가독성 및 성능이 저하되는 콜백 지옥이 발생할 수 있다.

function increase(number, callback) {
        setTimeout(() => {
            const result = number +10;
            if(callback) callback(result);
        }, 1000);
    }

    increase(0, result => {
        console.log(result);
        increase(result, result => {
            console.log(result);
            increase(result, result=> {
                console.log(result);
            });
        });
    });

ES6에서 이러한 콜백 지옥을 해결하기 위해 Promises 객체를 도입했다. 이는 비동기 작업의 성공(resolve), 실패(reject)를 구분하여 다루기 위해 설계 되었다. 이때 Promises 객체 자체의 반환으로는 프로퍼티를 꺼낼 수 없으므로 .then() 메소드의 매개변수로 반환 값을 전달한다.

function increase(number) {
    const promise = new Promise((resolve, reject) => {
      setTimeout(() => {
        const result = number + 10;

        // 실패 시 에러 객체를 반환
        if (result > 30) {
          const e = new Error('NumberTooBig');
          return reject(e);
        }

        // 성공 시 연산된 결과를 반환
        resolve(result);
      }, 1000);

    return promise; // 함수 호출 시 promise 결과 반환

  }
                                
 console.log(increase(0));
 increase(0)
          .then(number => { 
            console.log(number);
            return increase(number);
          })
          .then(number => { 
            console.log(number);
            return increase(number);
          })
          .then(number => {
            console.log(number);
            return increase(number);
          })
          .catch(e => { 
            console.log(e);
          });                            

Promises 객체의 .than() 메소드는 또다시 than 지옥을 발생시켜 이를 좀 더 효율적으로 사용하기 위해 async, await 키워드가 ES8에서 추가되었다.

    function increase(number) {
      const promise = new Promise((resolve, reject) => {
        setTimeout(() => {
          const result = number + 10;

          if (result > 30) {
            const e = new Error('NumberTooBig');
            return reject(e);
          }

          resolve(result);
        }, 1000);
      });
      return promise;
    }

    // 함수 앞에 asnyc 키워드 작성
    async function run () {

      // Promise를 반환하는 함수 호출 시 앞에 await 키워드를 작성한다.
      // await 키워드는 반드시 async 함수 영역 내에서만 작성해야 한다.
      // 비동기 작업이 동기 작업인 것처럼 코드를 작성할 수 있게 된다. --> 실행 순서가 있는 것처럼
      try {
        let result = await increase(0);
        console.log(result);
        result = await increase(result);
        console.log(result);
        result = await increase(result);
        console.log(result);
        result = await increase(result);
        console.log(result);
      } catch {
        console.log(e);
      }
    }

    run();

Promises 객체를 통해 json 이나 text 형식의 데이터를 반환하기 위해서 fetch 메소드를 함께 사용한다. 이를 await과 함께 사용하면 요청 -> 응답 -> 파싱 과정을 순차적으로 작성할 수 있다.

const promise = fetch('https://jsonplaceholder.typicode.com/users');
async function callAPI() {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      console.log(response);

      console.log(`본문 사용 여부 : ${response.bodyUsed}`);

      // response body를 text 형태로 반환하는 메소드 : text();
      // const responseText = await response.text();
      // console.log(responseText);
      // response body를 json 형태로 반환하는 메소드 : json();
      const responseJson = await response.json();
      console.log(responseJson);
      console.log(`본문 사용 여부 : ${response.bodyUsed}`);
}
callAPI();

// fetch - than 문법도 사용 가능하다.
function callAPI() {
      fetch('https://jsonplaceholder.typicode.com/users')
              .then(response => response.json())
              .then(data => console.log(data));
}

보다 간편한 데이터 변환 처리를 위해 axios 문법을 사용할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios</title>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<script>
  /* axios 라이브러리는 데이터 변환 처리를 내부적으로 수행하기 때문에 fetch를 사용하는 것보다 간편하게 사용할 수 있다. */
  axios.get('https://jsonplaceholder.typicode.com/users')
          .then(response => {
            console.log(response);
            console.log(response.data);
          });
</script>
</body>
</html>

Future

1. Vue.js 는 겉핥기 식으로만 배워봤기 때문에 틈틈히 복습하기

2. 매일 코테 문제 1개씩 풀기

3. Figma 피드백 후 HTML-CSS 적용하기

4. 백엔드 프로젝트 회고록 작성하기

For Me🍀