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를 이용해서 구현하는데 많이 편했던 것 같습니다.