[ETC] 코드 리뷰 피드백

💗 빈곳 채우기

💡 수업시간 연습문제 어쩌다 코드리뷰 받게돼서 기억해두기

문제)
1. 추가 then을 사용하여 7개의 항목 productName만 출력해보세요.(console.log)
2. 추가 then을 사용하여 7개의 항목 중 price가 10000원 이상 되는 product를 출력하는 코드를 작성해주세요.(console.log)
3. 추가 then을 사용하여 7개의 항목의 productName과 price를 각각 h2와 p태그로 생성하여(DOM) 화면에 출력해주세요.
4. error 처리를 해주세요.

fetch('api주소')
.then(data => data.json())
.then(data => {
    console.log(data);
    return data
})
.then(data => {
    console.log(data.map(x => x.productName));
    return data;
})
.then(data => {
    console.log(data.map(x => x.price).filter(x => x >= 10000))
    return data;
})
.then(data => {
    const productArr = data.map(x => {
        return [x.productName, x.price]
    })

    const h2 = document.createElement('h2');
    const p = document.createElement('p');

    h2.textContent = productArr[0]
    p.textContent = productArr[1]

    document.body.appendChild(h2);
    document.body.appendChild(p)
})
.catch(error => {
    alert('에러!!!!!!')
    console.log(error);
})

👉🏻 짧은 피드백
변수 명을 받아올 때에는 되도록이면 구체적으로 작성해 가독성을 신경쓰자 코드가 길어지더라도!! (data, x등의 변수명 되도록 사용하지 않기)
에러 처리 부분 error page로 리다이렉트하는 생각 해봤어야 함

fetch('api 주소')
    .then(productData=>productData.json())
    .then(productData=>productData)
    .then(productData => {
        console.log(productData.map(item => item.productName));
        return productData;
    })
    .then(productData => {
        console.log(
                productData
                    .map(item => item.price)
                    .filter(item => item >= 10000)
            )
        return productData;
    })
    .then(productData => {
        const main = document.createElement("main");
        productData.forEach(item => {
            const ProductCard = document.createElement("article");
            const productName = document.createElement("h2");
            const productPrice = document.createElement("p");

            productName.textContent = `상품명 : ${item.productName}`;
            productPrice.textContent = `가격 : ${item.price}`;

            ProductCard.appendChild(productName);
            ProductCard.appendChild(productPrice);

            main.appendChild(ProductCard);
        })
        document.body.appendChild(main);
    })
    .catch(error => {
        alert('에러!')
        // error page로 리다이렉트
        console.log(error);
    })

🚀 깨달은 점

수업 도중 과제 내줄 때 시간 안에 해결하는 것이 사실 쉽지는 않지만 가독성에 대한 부분도 잊지말고 생각해야겠음 그냥 연습문제라서 코드만 돌아가면 되지 ㅋㅋ 하는 안일한 생각을 가지고 있었다