Tabs

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다.

07 Tabs TIL
1. style.left 어트이뷰트에 값을 추가하기
.glider 요소를 클릭된 .tab 요소로 옮겨주고자 한다.

1-1) left를 사용한 방법
.tab 요소의 width 값과 .tab 요소의 index 값을 곱해, .glider가 이동해야 하는 총 거리를 구한다.

.tab 요소의 width 값을 구하기 위해 css 변수 --tab-width를 불러왔다.

$glider.style.left = index * getComputedStyle($tabs).getPropertyValue('--tab-width') + 'px';

1-2) transform을 사용한 방법
.tab 요소의 index 값에 100을 곱해 .glider가 몇 %를 이동해야 하는지 구한다.

transform: translateX('%값이 들어간다.')를 이용한다.

$glider.style.transform = `translateX(${index * 100}%)`;

2. async await
프로미스를 반환하는 fetchTabsData 함수를 처리를 하기 위해 후속처리 메서드인 then을 사용하였다.

-then:  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

window.addEventListener(
  'DOMContentLoaded',
  fetchTabsData()
    .then(tabsDatas => {
      hideSpinner();
      setTabsLength(tabsDatas.length);
      render(tabsDatas);
    })
    .catch()
);

then으로 쓰는 것보다 async await을 쓰는 것이 흐름을 이해하기 쉽다고 생각했다.

따라서 async await을 핸들링하기 위해 try~catch문을 사용했다.

window.addEventListener('DOMContentLoaded', async () => {
  try {
    const tabsDatas = await fetchTabsData();
    hideSpinner();
    setTabsLength(tabsDatas.length);
    render(tabsDatas);
  } catch (error) {
    console.log(error);
  }
});

try...catch...finally 문

에러 처리 코드를 미리 등록해 두고 에러가 발생하면 에러 처리 코드로 점프하도록 하는 방법이다.

- try: 에러가 발생할 가능성이 있는 코드를 실행하는 코드 블록이다.

- catch: try 코드 블록에서 에러가 발생하면 이 코드 블록의 코드가 실행된다.

 

- finally: 에러 발생과 상관없이 반드시 한 번 실행되는 코드 블록, 생략 가능하다.

async / await

프로미스의 후속 처리 메서드 없이 마치 동기 처리처럼 프로미스가 처리 결과를 반환하도록 구현할 수 있다.

- async 함수: async 키워드를 사용해 정의한 함수, 언제나 프로미스를 반환한다.

 

- await 키워드: 프로미스가 settled 상태가 될 때가지 대기하다가 프로미스가 resolve한 처리 결과를 반환한다. 반드시 프로미스 앞에서 사용해야 한다.

callback hell 에서 then hell으로
callback hell에서 벗어나기 위해서 then/catch 후속 처리 메서드가 등장했지만, 결국 이 후속처리 메서드도 꼬리에 꼬리를 무는 코드가 작성이 되는 단점이 있다.

async/await을 이용해 try ~ cath 문을 이용하면 꼬리에 꼬리를 무는 코드를 방지할 수 있다.

<배운점>
++ 여러가지 비동기 처리 방법을 알게되며 왜 점점 나은 방법이 나오게 되었는지 알게 되었다.