JQuery의 Ajax는 기본적으로 비동기 방식으로 동작합니다. 순차적으로 요청을 하고 싶을때는 옵션에 값을 하나 추가만 해주시면 됩니다. 옵션에 async 값을 false 로 지정한 후 사용하시면 됩니다. async 에 값을 지정하지 않을 경우 기본값으로 true가 사용됩니다.
언어 & 프레임워크
안녕하세요 이번 시간에는 지난 강좌에 이어 본격적으로 채팅 기능을 구현해보도록 하겠습니다! 이전 강좌의 응용이므로 크게 어렵지않습니다! [목차] 1. 채팅 기능 설계2. 서버 코드 작성3. 클라이언트 코드 작성4. 테스트 채팅 개발을 위해 간단히 정리하고 시작합시다! 우리가 개발할 채팅은 실시간 채팅입니다. 누가 새로 들어왔는지, 누가 나갔는지 알 수 있도록 기능을 구현할 예정이구요 기본적인 채팅 기능을 구현할 예정입니다. 이벤트 명은 미리 정의하고 시작하도록 하겠습니다! message: 클라이언트가 서버로 메시지 전송update: 서버에서 받은 메시지 다른 클라이언트에게 전송(메시지 또는 정보)connectUser: 새로운 유저 접속을 서버에게 알림 접속 종료부분은 update로 통일하여 클라이언트에게..
안녕하세요! 이번 강좌에서는 지난 포스팅에 이어서Socket.io를 이용한 실시간 데이터 송/수신을 구현해보도록 하겠습니다! [목차] 1. 서버 코드 작성2. HTML 수정3. 클라이언트 자바스크립트 생성4. 클라이언트 코드 작성5. 테스트 먼저 코드의 소스코드를 작성해줍니다. server.listen 위에다가 위 처럼 작성해주세요! on()은 소켓에서 해당 이벤트를 받으면 콜백함수가 실행됩니다! io.sockets.on('connection' function(socket)...) 부분은 connection 이라는 이벤트가 발생할 경우 콜백함수가 실행됩니다. io.sockets 는 접속되는 모든 소켓들을 의미하구요 접속과 동시에 콜백함수로 전달되는 소켓은 접속된 해당 소켓 입니다.io.sockets.on..
안녕하세요 이번 강좌에서는 지난시간에 이어서 서버 응답에 관련된 부분을 진행하도록 하겠습니다! [목차] 1. 디렉토리 구조 잡기2. HTML, CSS 예제 파일 생성3. 서버 코드 수정 기존 파일에서 static 폴더를 생성합니다! static 폴더 안에는 index.html 파일을 생성해주시구요 css 폴더와 js 폴더도 생성해주세요! css 폴더 안에는 index.css 파일도 하나 생성해주세요~ 생성한 index.html 파일에는 위와 같이 작성해줍니다(또는 아래에서 다운로드) 그리고 index.css 파일에는 위와 같이 작성해줍니다!(또는 아래에서 다운로드) 간단한 예제 파일을 생성했으니 서버 코드를 수정하여 위의 파일들을 클라이언트(웹)에서 볼 수 있도록 해봅시다! 먼저 fs 모듈을 추가로 re..
안녕하세요 이번 강좌에서는 지난번에 설치한 Express 모듈을 사용하여 서버를 실행해보도록 하겠습니다! [목차] 1. 모듈 불러오기2. Express 객체 생성3. 서버 실행 지난 시간에 express와 socket.io 모듈을 설치하였습니다. 폴더에 app.js 파일을 하나 생성해주세요! 생성 후 폴더 구조는 아래와 같습니다. (지운 파일은 저만 해당되기 때문에 지웠습니다) app.js 파일에 아래 코드를 입력해주세요!(초록색으로 된 부분 /* */ 은 주석이므로 작성하지 않아도 됩니다)주석에 설명이 작성되어있습니다. require를 사용하여 모듈을 불러올 수 있습니다. 마지막 부분의 listen 메소드를 통해 원하는 포트번호로 서버를 시작할 수 있습니다. listen(포트, 리스너) 지정한 포트로 ..
안녕하세요 이번 강좌에서는 Node.js 기반의 실시간 온라인 채팅 서비스를 개발해볼 예정입니다! 사전 지식이 부족하더라도 충분히 따라올 수 있도록 작성할 계획입니다. 서버는 Node.js클라이언트는 웹으로 진행하도록 하겠습니다! [목차] 1. 개발환경 준비2. 필요 모듈 설치 개발환경 준비 http://codevkr.tistory.com/12 위 링크를 통해 Node.js와 VSCode를 설치해주세요!(글에 나와있는 Brackets를 사용해도 되지만 저는 VSCode로 진행할 계획입니다) 원하는 폴더를 생성하고 npm init를 진행하여 package.json 도 생성해주세요!(위 링크에 모두 나와있습니다) 필요 모듈 설치 VSCode로 package.json 파일이 있는 폴더를 열어줍니다. Ctrl ..
안녕하세요 이전 포스팅에서는 콜백함수와 Promise 패턴에 대해 알아보았습니다. 이번 시간에는 비동기함수(Async function)에 대해 알아보도록 합시다! Node.js에서는 7.6버전부터 지원이 된다고 하니 알아두면 좋을것같습니다! 먼저 비동기함수에 대해 알아보기 전에 프라미스 패턴으로 구현한 간단한 예제를 봅시다. 위 예제는 이름이 비어있지 않으면 **님 반갑습니다! 를 출력하고만약 이름이 비어있으면 이름이 비어있다고 알려주는 예제입니다. 프라미스 패턴으로 구현되어있습니다. 프라미스 작동방식에 대해 이해하셨다면 금방 분석이 가능합니다. 아래 사진은 위 예제를 실행한 결과입니다. 이름이 'Lee' 이므로 정상적으로 출력이 됩니다. 만약 10행에서 'Lee' 대신 ''를 전달했다면 프라미스가 re..
안녕하세요 오늘 포스팅 주제는 자바스크립트의 Promise 패턴입니다! 지난 포스팅에서는 비동기 작업을 위해 콜백 함수를 사용한다고 했었습니다.하지만 콜백 함수는 가독성 등의 단점이 있기 때문에 여러 개선 방법이 있다고 설명했죠 그 중 하나가 프라미스(Promise) 패턴입니다! [예제는 Node.js 환경에서 테스트할 예정이구요 Node.js 뿐만 아니라 웹 브라우저에서 사용하셔도 동일합니다!] 먼저 설명 전 이전 시간에 진행했던 콜백 함수의 코드를 프라미스 패턴으로 동일하게 변경해보도록 하겠습니다! (콜백 함수사용 패턴) (프라미스 패턴) (프라미스패턴 코드 실행 결과, 콜백함수와 동일) 코드를 비교해보면 많이 바뀌었습니다. 하지만 기능은 동일하죠 더 어려워지고, 복잡해지고, 불편해보이실지는 몰라도 ..
안녕하세요 이번 포스팅에서는 자바스크립트의 콜백함수(Callback)패턴에 대해 알아보도록 하겠습니다! 콜백함수를 쓰는이유? 중 대표적인것은 "비동기" 처리를 위해서인데요 콜백함수 뿐만 아니라 프라미스(Promise), Async/Await(비동기함수)도 씁니다. 이번 포스팅은 콜백함수에 대해 알아보도록 하겠습니다! [예제는 Node.js 환경에서 테스트할 예정이구요 Node.js 뿐만 아니라 웹 브라우저에서 사용하셔도 동일합니다!] 자바스크립트의 변수에는 숫자, 문자, 객체 등등을 담을 수 있습니다.심지어 함수까지 저장이 가능합니다. 함수는 자바스크립트에서 일급 객체입니다. https://ko.wikipedia.org/wiki/%EC%9D%BC%EA%B8%89_%EA%B0%9D%EC%B2%B4 일급 객..
안녕하세요 이번 포스팅에서는 지난 포스팅에 이어서 출력함수검색함수메모리 해제 함수 를 구현해보도록 하겠습니다! 지난시간의 코드에서 조금 수정, 삭제를 해봅시다. 함수 선언 부분에 위와같이 3개의 함수를 선언해줍니다. 함수 이름은 원하시는걸로 하셔도 됩니다.저는 알기 쉽게하기 위해 관련 단어로 조합하였습니다. 선언해두었으면 맨 아래에 구현 부분을 위와같이 작성해줍니다. 메인함수는 위처럼 간단히 수정해줍니다. 기존의 출력 부분은 복사해서 출력함수에아래와 같이 붙여넣기해주세요 출력함수는 벌써 구현이 끝났습니다! 이전시간에 이미 다 만들어놓은것을 함수로 나누기만 했습니다. 이번 포스팅에서 실제 구현할 부분은 검색과 메모리 영역 해제(free) 부분입니다. 검색기능 구현 전에 아래 그림으로 어떻게 구현할지 생각해..
