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

AJAX 통신 jQuery는 AJAX 통신 관련해서 다양하고 편리한 메서드들을 제공한다. 실무에서 많이 사용하는 메소드 위주로 요약해서 작성하였으며 모든 메서드나 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트 AJAX를 참조하면 된다. 메소드 $.ajax 비동기식 Ajax를 이용하여 HTTP 요청을 전송 $.get 전달받은 주소로 GET 방식의 HTTP 요청을 전송 (데이터 요청에 많이 사용) $.post 전달받은 주소로 POST 방식의 HTTP 요청을 전송 (데이터 전송에 많이 사용, 데이터를 캐시하지 않는다.) $.getScript 웹 페이지에 스크립트를 추가함 $.getJSON 전달받은 주소로 GET 방식의 HTTP 요청을 전송하여 JSON 파일로 응답 받음 .load() 서버에서 데이터..

채팅 기능 구현 기본 동작은 이해했으니 진도를 쭉 나가겠습니다. 구현해야하는 기본 기능을 먼저 확인해보겠습니다. > 추가할 기능 TODO - 사용자가 들어오고 나가는 부분을 캐치하여 서버가 안내하는 말을 노출한다. - 메세지를 전송하고 받아야한다. - 스타일을 입힌다. > 사용자가 들어오고 나가는 부분을 캐치하여 서버가 안내하는 말을 노출한다. 입장할 때 작성했던 connection이 기억나는가요? 퇴장할 때 이벤트도 같은 곳에 추가합니다. 사용자가 입장 시(소켓연결) 발생하는 이벤트 호출에 대한 바인딩 작업은 app.js의 connect 콜백함수 내부에서 작성되었습니다. // app.js io.sockets.on('connection', function(socket){ socket.on('newUser..

socket.io 모듈을 사용해 통신 기본 설정하기 > 클라이언트 스크립트 파일 생성 후 로드시키기 src 하위에 js 폴더를 생성하고 그 안에 index.js 파일을 생성합니다. 폴더구조는 아래와 같습니다. 통신 스크립트를 추가하기 전에 앞서서 index.html에 관련 js 파일을 로드합니다. // index.html welcome index.js는 생성했는데, socket.io.js도 생성해야하나요? 라고 질문하신다면 아니라고 답하겠습니다. socket.io.js는 서버 실행 시 자동으로 생성되기때문에 welcome 문구를 지우고 동적인 값을 넣기 위해 div 태그에 id값을 넣었습니다. // app.js io.sockets.on('connection', function(socket){ socket..

서버 기본 세팅 > 서버 스크립트 파일 생성 및 스크립트 작성 root에 서버를 세팅할 app.js 파일을 생성합니다. 생성 후 폴더구조는 아래와 같습니다. // app.js const express = require('express'); const http = require('http'); const app = express(); const server = http.createServer(app); server.listen(8080, function(){ console.log('서버 실행중...'); }); 코드 설명 > 세팅에 필요한 모듈들은 require로 가져와 변수에 담습니다. http 모듈은 node.js의 기본내장 모듈이기 때문에 따로 다운로드하지않아도 사용할 수 있습니다. const exp..