[패스트캠퍼스X야놀자] 프론트엔드 개발 부트캠프_JavScript과제 리펙토링

배포링크: https://thriving-fenglisu-0e5367.netlify.app/

레포지토리: https://github.com/YongYong21/javascript

사용언어

HTML, CSS, JavaScript

리펙토링 한 부분

수정 전

 const userList = `
        <tr data-name="${data.name}">
        <td class='check'><input type="checkbox" ></td>
        <td><img src="" id="${data.key}"></td>
        <td><span>${data.name}</span></td>
        <td><span>${data.email}</span></td>
        <td><span>${data.phone}</span></td>
        <td><span>${data.classification}</span></td>
        <td><button class='profile-btn'>프로필 보기</button></td>
        </tr>`;
        $("tbody").append(userList);

		// ... 

수정 후

function createUserRow(data){
  return `
    <tr data-name="${data.name}">
      <td class='check'><input type="checkbox"></td>
      <td><img src="" id="${data.key}"></td>
      <td><span>${data.name}</span></td>
      <td><span>${data.email}</span></td>
      <td><span>${data.phone}</span></td>
      <td><span>${data.classification}</span></td>
      <td><button class='profile-btn'>View Profile</button></td>
    </tr>`;
};

const userList = createUserRow(data);

가독성을 좋게 하기위해 함수로 빼두었습니다.

수정 전

function getRandomPhoneNumber() {
  var phoneNumber = "010";
  for (var i = 0; i < 8; i++) {
  	// ...
  }
  

수정 후

function getRandomPhoneNumber() {
  var phoneNumber = "010";
  for (let i = 0; i < 8; i++) {
  	// ...
  }

var을 쓰던 버릇이 있어서 몇몇 변수들이 var로 선언이 되어서 let or const로 수정했습니다.

수정 전

Promise.all(promises).then(() => {
    localStorage.setItem("hasExecuted", true);
    window.location.href = "index.html";
  });

수정 후

await Promise.all(promises);
  localStorage.setItem("hasExecuted", true);
  window.location.href = "index.html";

비동기 처리를 하는 부분을 then보다는 await를 이용하여 작성하는 것으로 수정했습니다,

과제 느낀점

과제를 하면서 느꼈던 점은 아무래도 비동기 작업을 구현하는 부분에서 시간을 걸렸던 것 같습니다.

서버와 데이터를 주고 받는 것이 많은 경험이 없다보니, 구현하는데 어려웠던 것 같습니다. 또한, 서버로부터 정보를 가져오는 것이 비동기적으로 이루어지기 때문에 소스가 생각대로 실행이 되지 않았던 것도 주된 이유였던 것 같습니다.

바닐라 자바스크립트로 구현을 할려고 했으나 많이 복잡하고 비효율적인 것 같아서 J Query를 이용해서 구현하는데 많이 편했던 것 같습니다.