자바스크립트로 서버와 클라이언트 구축하기

자바스크립트로 서버와 클라이언트 구축하기
박정태 지음 / 정보문화사 / 2018년 6월

 책은 크게 네단계로 구성되어 있습니다.

첫번째 클라이언트를 구축합니다.

Vue 나 Rect 처럼 단일 페이지 응용프로그램(SPA)을 완벽하게 지원합니다.

핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 

그리고 nuxt.js를 이용하여 클라이언트를 구현합니다. 

nuxt.js는 클라이언트 사이트 랜더링, 서버 사이드 랜더링이 가능하도록 만들어진 프레임워크입니다.(vue.js기반입니다)

클라이언트 사이트 랜더링 - 클라이언트는 빈 페이지를 받아와 J-vaScript를 실행하여 랜더링하는 방식입니다.

서버 사이드 랜더링- 서버에서 JavaScript는가 실행된 결과를 랜더링 하는 방식입니다.

두번째 서버를 구축합니다.

Node.js는 구글 크롬의 자바스크립트 엔진에 기반해 만들어진 확장성 있는 네트워크 애플리케이션개발에 사용되는 소프트웨어 플랫폼입니다.

Node.js를 활용하면 간단하게 췝 서버를 띄울수 있습니다. 웹 서버를 만들기 위해서는 http 모듈을 이용합니다.

const http = require('http');

모듈을 가져와서 사용할 준비를 합니다.

createServer( function (request, response){}

앞에서 모듈을 가지고 와서 createServer 함수를 호출합니다. 첫번째는 요청 객체, 두번쨰는 응답 객체를 활용해서 처리하는 함수입니다.

listen(3000,function(){});

서버 리스닝 하는 부분입니다. 3000번 포트를 열겠다는 의미입니다.

세번째 채팅 프로젝트를 구축합니다.

채팅 프로젝트를 하기 위해서는 소켓 서버 및 클라이언트를 설정해야 합니다.

즉 소켓 서버를 생성하고, 클라이언트에서 서버에 생성된 소켓 서버에 접속을 하면 됩니다.

express에서 소켓을 사용하는 방법은 간단합니다. http통신을 위해 http모듈을 가져오고 createServer를 이용하여 서버를 생성합니다.

클라이언트에서는 socket.io-client모듈이 필요합니다. nuxt.js 에서 소켓을 사용하기 위해 플러그인에서 소켓에 연결만 해주면 됩니다.

연결된 소켓 정보를 사용하여 소켓 서버와 데이터를 주고받을 수 있습니다.

네번째 쇼핑몰을 구축합니다.

앞에서 배웠던 내용들을 이용해서 nuxt.js 와 express를 접목한 관리자 페이지를 구현합니다.

메인페이지, 유저관리, 제품관리, 마이페이지 순으로 개발을 진행하면 됩니다. 단순히 게시판 위주의 쇼핑몰이라고 생각하시면 됩니다.