Title

아래의 div 를 제거하고 script로 products의 갯수만큼 card 생성 ### 제발 직접 짜보기 🤣 ```javascript products.forEach(function (item,index){ $('.row').append(`

${item.title}

가격 : ${item.price}

`) }); ``` ✨ 실습. 상품더보기 버튼 누르면 Ajax 로 데이터 가져와서 콘솔창에 출력 데이터 가져올 서버는 아래 URL 사용 가져온 데이터를 확인해보면 json 형태가 아닌 string으로 받아온다. 이럴때는 JSON.parse(string) 함수로 string > json 형변환을 할 수 있다. (이전에 parseInt parseFloat 함수 처럼 형변환을 위해 사용하는 것) ```javascript $('#more').on('click',function (){ $.get('https://gist.githubusercontent.com/leeanJP/3ee931feb393f95895bd652344d1bf13/raw/b65cef1db551c3815352418ca885fb0ff38684d5/more1.json') .done(function (result) { console.log(typeof result); console.log(result); var jsonData = JSON.parse(result) console.log(typeof jsonData); console.log(jsonData); }).fail(function (){ console.log("에러 발생"); }) }) ``` ✨ 실습. 위에서 가져온 데이터로 카드 3개 만들기

jsonData.forEach(function (item){
    $('.row').append(`<div class="col-sm-4">
        <img src="https://via.placeholder.com/600" class="w-100">
        <h5>${item.title}</h5>
        <p>가격 : ${item.price}</p>
        </div>`)
})

지금은 서버와 DB가 따로 없어서 이런식으로 구현 했지만 나중에 데이터베이스와 java Spring 까지 배우고 나면 내 PC에 데이터베이스를 만들고 서버 프로그램을 구현해서 데이터를 가져오는 방식으로 프로그램을 짜게 될것임. 그렇게 하면 총 데이터의 갯수를 구하고, 처음에는 0번부터 19번까지 20개만 데이터를 가져오고 상품더보기를 클릭하면 상품더보기 버튼을 클릭한 횟수를 기억 했다가 20번부터 39번까지의 데이터를 가져오고 마지막에 가서는 상품 더보기 버튼을 숨기는 식으로 구현할 수 있다. 이게 우리가 보는 쇼핑몰의 20개씩 상품보는 페이지의 작동방식 20개씩 보기 > 50개씩 보기로 변경하면 가져오는 데이터 갯수만 변경하고 작동하는 방식은 같다. ## 현업에서 사용하는 Ajax 코드 예제1 ```javascript $.ajax({ type : 'post', // 타입 (get, post, put 등등) url : '/test', // 요청할 서버url async : true, // 비동기화 여부 (default : true) headers : { // Http header "Content-Type" : "application/json", "X-HTTP-Method-Override" : "POST" }, dataType : 'text', // 데이터 타입 (html, xml, json, text 등등) data : JSON.stringify({ // 보낼 데이터 (Object , String, Array) "no" : no, "name" : name, "nick" : nick }), success : function(result) { // 결과 성공 콜백함수 console.log(result); }, error : function(request, status, error) { // 결과 에러 콜백함수 console.log(error) } }) ``` ## 현업에서 사용하는 Ajax 코드 예제2 ```javascript var httpFileUpload = { getAddr : function(fileElement, callback){ const file = fileElement[0]; if(!file){ throw new Error("file Element is required"); } else { const uploadFile = file.files[0]; if(!uploadFile || !uploadFile.size || !uploadFile.name || uploadFile.size === 0){ throw new Error("upload file is required"); } else { console.log("file size : " + uploadFile.size+"\nfile name : " + uploadFile.name); var params = { filename : uploadFile.name, filesize : uploadFile.size, provider : "TEST" }; $.ajax({ type : "POST", url : "/sample.do", contentType: "application/json", dataType:"json", data : JSON.stringify(params) }) .done(function (data, textStatus, xhr) { console.log(xhr); if(data.result_cd == "1"){ alert("success!"); } else { alert("에러발생["+data.result_cd+"]"); console.log(data.result_msg); callback(data); } }) .fail(function(data, textStatus, errorThrown){ console.log("fail in get addr"); callback(data); }); } } } } ```

Card title

${item.title}