Express, Socket.io를 사용하여 채팅구현하기 - (1) 사전작업
들어가기에 앞서... 전체적인 가이드는 근둥이님 블로그를 참고했습니다. https://codevkr.tistory.com/58?category=719250 쪼랩이라 예전에 채팅구현을 도전했다가 허접하게 마무리되었었는데, 근둥이님 블로그보니까 설명이 잘되어있어서 무리없이 진행했습니다. 제 글이 이해가 안된다면 근둥이님 블로그 글을 찾아가는것이 큰 도움이 될 것입니다. (굽신-감사합니다.) 예전에 작업했을때 이해못했던 부분이, 역할 담당의 부분인데, 결론은 이거였습니다. 서버는 express 담당, 통신은 socket.io 담당한다. express와 socket.io에 대해 간단히 설명하겠습니다. (자세한 사항은 정리를 어마무시하게 잘해두신 블로거님들 링크를 달아둘데니, 들어가서보셔도 되고, 검색해봐도 됩니..
vue.js 기초- 인스타그램 만들어보기 08_ajax통신, axios (코딩애플 세미나 후기)
더보기 버튼을 생성하여 버튼 클릭 시에 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 이슈, 파라미터 값이 안 보내져요. (processData)
백엔드와 작업 시 파라미터 값을 보내야 하는 일이 빈번한데, 이번에 처음 겪은 이슈가 있어 작성해둔다. 이건 내가 작성한 ajax 코드가 아니었고, 유지보수 업무였다. (ajax 옵션을 잘 몰랐던 문제가 가장 컸다) 아래와 같이 작성했던 ajax 코드가 있었다. 데이터가 전송이 안되서 문제를 찾아보던 중에 processData를 알게되었다. JS $.ajax({ url : '', processData : false, contentType : "application/json", data : { id : 'abcd' }, type : "GET", success : function(res){ //....... } }); processData 란? 기본값은 true다. ajax 통신을 통해 데이터를 전송할때, ..