주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

더보기 버튼을 생성하여 버튼 클릭 시에 ajax 통신을 해보겠습니다. 더보기 버튼을 생성해줍니다. App.vue 그 다음 더보기 이벤트에 실행될 함수를 만들어주고 ajax 통신을 위해 axios를 install 해줍니다. npm install axios install이 끝나면 가져올 데이터가 담긴 json 파일을 만들어 줍니다. ajax를 통해 방금 만든 json 내용을 가져와보도록 하겠습니다. App.vue axios를 사용해 이벤트를 생성한 후에 버튼에 바인딩 해줍니다. axios에서 get가져온다 moreData.json을 then끝나면 moreData가 들어오고 그것을 this.postData 배열리스트에 push해준다. 아까 unshift는 상단에 리스트를 추가해주고 push는 하단에 리스트를 ..

동기(synchronous : 동시에 일어나는)란? 동기는 말 그대로 동시에 일어난다는 의미이며 요청과 결과가 동시에 일어납니다. 바로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어져야 합니다. -요청과 자리에 결과가 동시에 일어남 = A와 B 사이의 작업 처리를 동시에 맞추겠다. 비동기(Asynchronous : 동시에 일어나지 않는)란? 비동기는 동시에 일어나지 않는다를 의미이며 요청과 결과가 동시에 일어나지 않습니다. -요청한 자리에 결과가 주어지지 않음 = A와 B사이의 작업 처리를 동시에 맞추지 않겠다. [ 예시 ] 출처 : https://blog.hanumoka.net/2018/10/06/javascript-20181006-javascript-callback/ 이해 잘 되게 ..

백엔드와 작업 시 파라미터 값을 보내야 하는 일이 빈번한데, 이번에 처음 겪은 이슈가 있어 작성해둔다. 이건 내가 작성한 ajax 코드가 아니었고, 유지보수 업무였다. (ajax 옵션을 잘 몰랐던 문제가 가장 컸다) 아래와 같이 작성했던 ajax 코드가 있었다. 데이터가 전송이 안되서 문제를 찾아보던 중에 processData를 알게되었다. JS $.ajax({ url : '', processData : false, contentType : "application/json", data : { id : 'abcd' }, type : "GET", success : function(res){ //....... } }); processData 란? 기본값은 true다. ajax 통신을 통해 데이터를 전송할때, ..

jquery form.serialize(); 시 checkbox 값 ajax 전송되지 않는 이슈 왜 때문인지? form.serialize() 해서 파라미터 전송 한 거 보면 checkbox 값이 없음! 따로 작업해서 넣어줘야하는것을 알게되었음.. HTML JS $.ajax({ url: "url입력", dataType: 'json', data: form.serialize(), success: function (data) { if(data.retcode === 100) alert('성공'); } }); 피들러 확인해 보면 checkbox값이 전송되지 않는다는 것을 확인할 수 있다. 예외처리로 form 데이터를 만들어줘서 보내기! JS var $chk = $('#checkboxId'); var formData..