프론트엔드 직무과제 복기...ㅠ

바닐라 자바스크립트를 이용한 프론트엔드 직무과제를 보았는데 많이 아쉬움이 남아 다음에는 더 잘 풀수 있도록 막혔던 부분을 적어 놓으려 합니다.

1. fetch() 사용

• fetch 사용하는 것은 크게 어려움이 없을 것이라 생각했는데 form에서 데이터를 가져오고 보내는것에서 오랜 시간을 쏟았다. fetch option을 통해 전달하는 방법이 있을줄 알았는데 생각보다 수동적으로 나누어 주어야 했다.

// 이 객체는 append함수를 통해 query문으로 쉽게 변환이 가능하다
const data = new URLSearchParams();

const url="https://localhost:3000/"

// form 태그 전체르 가져오고 formdata로 감싸게 되면 안에 데이터만 추출된다
const form = document.getElementById('form')
for (const pair of new FormData(form)) {
    data.append(pair[0], pair[1]);
}

fetch(url+data)

2. 로딩창만들기

• 분명 몇일전에 잘 사용했었는데 css적용이 갑자기 어색해지며 제대로 적용하지 못했다.
  css 를 직접적으로 적용하게 되면 렌더트리를 다시 그려야 하기 때문에 성능 문제가 일어날 거라 생각했어서 class를 만들고 classlist.toggle()을 통해서 제어하려했는데 안보이는것까진 쉬웠지만 로딩중이라는 문구를 삽입하는것이 까다로웠다.
  ( 하지만 css로 위치 크기 등 기하학적인 부분을 건들이지 않으면 리플로우가 일어나지 않는다ㅠ )