* 사내 강의용으로 사용한 자료를 Blog에 공유합니다. Spring을 이용한 Web 개발에 대한 전반적인 내용에 대해서 다루고 있습니다.
크게 View는 Html을 표시시키는 View와 Application을 이용할 때 사용되는 View. 두개로 나눌수 있습니다. 이번 장에서는 Html을 표시하는 View를 알아보도록 하겠습니다.
1. JSP & JSTL
jsp와 jstl을 사용하기 위해서는 특별한 View 설정은 필요없지만, 기본적으로 Spring에서 요구되는 View는 WEB-INF 폴더 안에 view file들을 위치시키고, client에서 직접 접근할 수 없도록 하는 것이 일반적입니다. 이때는 기본적으로 InternalResourceViewResolver를 사용해서 View 파일의 위치를 설정하도록 합니다.
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="viewClass" value="org.springframework.web.servlet.view.JstlView" /> <property name="prefix" value="/WEB-INF/views/" /> <property name="suffix" value=".jsp" /> <property name="contentType" value="text/html; charset=UTF-8" /> <property name="order" value="1" /> </bean>
code base로는 다음과 같이 설정하면 됩니다.
@Bean public UrlBasedViewResolver viewResolver() { UrlBasedViewResolver jspViewResolver = new UrlBasedViewResolver(); jspViewResolver.setOrder(4); jspViewResolver.setPrefix("/WEB-INF/view/"); jspViewResolver.setSuffix(".jsp"); jspViewResolver.setContentType("text/html; charset=UTF-8"); jspViewResolver.setViewClass(JstlView.class); return jspViewResolver; }
jsp만으로는 제어문을 구성할 수 없기 때문에 jstl을 이용해서 jsp를 확장해야지 됩니다. jstl을 사용하기 위해서는 pom.xml에 다음 항목을 추가해주세요.
<dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency>
JSTL은 다양한 tag를 지원하고 있습니다. 이는 기존 jsp에서 <%= %>에서 빈번하게 만들어지는 code들을 단순화하고 읽기 편한 간단한 언어로 만들기 위해서 제공되고 있습니다. jsp는 다음과 같은 tag를 선언함으로서 사용할 수 있습니다.
<%@taglib prefix="c"uri="http://java.sun.com/jsp/jstl/core"%>
1) c:out - 객체를 출력한다.
<!--기본 문법--><c:out value="${name}"/><!-- default 속성 : 값이 없을때 기본출력값을 정의-->
<c:out value="${age}" default="Null or empty"/> <!-- escapeXml 속성 : 기본적으로 XML 문자를 escape하는데 Escape 하지 않으려면 false로 설정-->
<c:out value="${name}" escapeXml="false"/>2) c:set - 객체를 저장(셋팅)한다.
<!--기본문법--><c:set var="name" value="홍길동" /><!--Scope 속성 : page | request | session | application 중 1개의 값 page가 기본값-->
<c:set scope="request" target="book" property="isbn" value="300"/><!--target,property속성: 홍길동의 값을 UserModel 객체의 UserName 프로퍼티값을 설정 -->
<c:set value="홍길동" target="UserModel" property="UserName"/>3) c:remove - 객체를 삭제한다.
4) c:if - 조건문
5) c:choose, c:when, c:otherwise - switch 문이라 생각하면된다.
6) c:foreach - 반복문
7) c:forTokens - 구분자로 반복문
8) c:url, c:param - URL을 처리
9) c:import - JSP파일을 인클루드한다.
10) c:redirect - 리다이렉션
<!--기본문법--> <c:remove var="name" scope="request" />
<!--기본문법--> <c:if test="${조건}"> 조건 만족시 이 영역을 수행 </c:if>
jstl에서 if문은 조금 문제가 있습니다. 그건 else가 존재하지 않는 문제인데요. 우리가 주로 사용하는 if~else 문을 갖추기 위해서는 아래의 choose문을 사용해야지 됩니다.
5) c:choose, c:when, c:otherwise - switch 문이라 생각하면된다.
<!--기본문법--> <c:choose> <c:when test="${value == 1}"> value가 1이면 이 영역을 수행 </c:when> <c:when test="${value == 2}"> value가 2이면 이 영역을 수행 </c:when> <c:otherwise> value가 1,2가 아니면 이 영역을 수행(기본값) </c:otherwise> </c:choose>
6) c:foreach - 반복문
<!--기본문법(0~9까지 출력)--> <c:forEach begin="0" end="9" var="i"> <c:out value="${i}"/> </c:forEach> <!-- step 속성 : 정의된 수만큼 증가를 시킨다.(1,3,5,7,9출력)--> <c:forEach var="test" begin="1" end="10" step="2" > <b>${test }</b> </c:forEach>
7) c:forTokens - 구분자로 반복문
<!--기본문법(변수를 ','로 구분하여 출력한다. )--> <c:forTokens var="alphabet" items="a,b,c,d,e,f,g,h,i,j,k" delims="," varStatus="idx" > <b>${alphabet }</b> </c:forTokens>
8) c:url, c:param - URL을 처리
<!--기본문법--> <c:url value="index.jsp"/> <!-- value의 속성값이 /로 시작하면 컨텍스트를 포함한다--> <!--Context가 Root이라면 /Root/index.jsp로 출력--> <c:url value="/index.jsp"/> <!--context 속성 : 다른 컨텍스트로 출력하고자할때 사용--> <!-- /newRoot/index.jsp로 출력--> <c:url value="/index.jsp" context="/newRoot"/>
9) c:import - JSP파일을 인클루드한다.
<!-- 기본 문법 --> <!-- partialView.jsp의 내용을 출력 --> <c:import url="partialView.jsp"/> <!-- charEncoding 속성: 인코딩에 문제가 있을 시 사용 --> <c:import url="UserForm.jsp" charEncoding="UTF-8"/>
10) c:redirect - 리다이렉션
<!-- 기본 문법 --> <c:redirect url="http://kkams.net"/>
11) c:catch - 예외 발생시 처리
<!-- 기본 문법 --> <c:catch var="err"> <%=10 / 0%> <!--0으로 나누면 에러 발생--> </c:catch> <!--에러 출력--> <c:out value="${err }" />
다양해보이지만, 상당히 빈약한 문법과 코드를 가지고 있는 것이 JSTL입니다. 자주 사용되기도 하고, 일단 표준이기 때문에 몰라서는 안되는 View 표현 방법입니다. 앞서 Controller에서 보내지는 Model의 값을 JSTL을 이용해서 표현하게 되는 것이 일반적입니다.
지금까지 본 jstl을 이용한 book list의 표현과 book add의 표현방법입니다.
@RequestMapping("book/list") public String listup(Model model) { List<Book> books = bookService.listup(); model.addAttribute("books", books); return "book/list"; }
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title>
<link href="/res/css/bootstrap.min.css" rel="stylesheet" /><link href="/res/css/sample.css" rel="stylesheet" /><script src="/res/js/bootstrap.min.js"></script></head><h2>jstl test code 입니다.</h2><div class="example-form"> <h3>c:forEach example code</h3> <spring:message code="code.message"></spring:message> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>Title</th> <th>status</th> <th>Description</th> </tr> </thead> <tbody> <c:forEach var="book" items="${books}"> <tr> <td>${book.title}</td> <c:set var="status" value="일반" /> <c:choose> <c:when test="${book.status eq 'NORMAL'}"> <c:set var="status" value="일반" /> </c:when> <c:when test="${book.status eq 'RENTNOW'}"> <c:set var="status" value="대여중" /> </c:when> <c:otherwise> <c:set var="status" value="분실중" /> </c:otherwise> </c:choose> <td>${status }</td> <td>${book.comment}</td> </tr> </c:forEach> </tbody>
</table>
</div></body></html>2. JSTL fmt를 이용한 데이터의 가공
java의 원 데이터를 html로 표시할 때, 우리는 자주 데이터의 모양을 바꿔야지 되는 일들이 발생됩니다. 특히 통화량과 날짜, 소숫점의 표시에서 가장 일반적이라고 할 수 있습니다. 자리수 단락에서 ","를 추가한다던지, 소숫점 이하의 자리수를 어떻게 표시를 하는지에 대한 문제는 Controller와 같은 기술적인 issue와는 별개로 사용자들에게는 '모든 것'이 될 수 있는 문제입니다. 이런 일은 수치데이터를 직접 바꾸는 것이 아니라 수치의 표시를 어떻게 해줄 것인지에 대한 내용입니다. View에서 이런 일들을 해주는 것이 가장 좋습니다.
이 부분에 대해서는 issue가 있습니다. View에서 특정 데이터를 빨간색으로 보여야지 되는 action에 대한 처리를 무엇으로 보느냐에 대한 논쟁입니다. 이것은 보는 방법을 바꾸는 일이기 때문에 View에서 봐야지 된다는 의견과 보는 방법이 아닌 이것 역시 Business Logic으로 보는 견해도 있습니다. BL이기 때문에 Server Code에서 구동이 되고 테스트가 가능한 방법으로 만들어야지 된다는 것이지요. 가장 좋은 위치는 Controller 영역으로 이야기하고 있습니다. 보여지는 Model을 변경하는 것이기 때문에 가장 좋은 Layer이니까요. 개인적인 의견으로는 View에 대한 영역은 모두 View에 넘기는 것이 좋지 않나. 라는 생각입니다. 저는 개인적으로는 전자의 의견에 좀더 한표를 주고 있는 편입니다. 이 부분에 대해서는 개발자들의 취향과 그 프로젝트의 PM에 따라서 많이 바뀌게 될 내용이라고 생각됩니다.
지금 소개하는 JSTL fmt의 경우에는 View Layer, 즉 JSP에서 보이는 방법을 바꿔주는 방법입니다.
선언 방법은 다음과 같습니다.
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
선언된 데이터는 다음과 같이 사용이 가능합니다.
<div class="example-form"> <fieldset> <legend>FMT examples - Date</legend> <ul> <li><fmt:formatDate value="${date}" type="DATE" pattern="yyyy/MM/dd" /></li> <li><fmt:formatDate value="${date}" type="DATE" pattern="yyyy년 M월 dd일" /></li> </ul> </fieldset> <br /> <fieldset> <legend>FMT example - Number</legend> <ul> <li>orginal : ${number}</li> <li><fmt:formatNumber value="${number}" groupingUsed="true" currencySymbol=","/></li> <li><fmt:formatNumber value="${number}" minFractionDigits="5"/></li> <li><fmt:formatNumber value="${number}" type="CURRENCY"/></li> <li><fmt:formatNumber value="234.3" pattern="△#,##0.00; ▼#,##0.00" /></li> <li><fmt:formatNumber value="-1234.56" pattern="△#,##0.00; ▼#,##0.00" /></li> <li><fmt:formatNumber value="0.99" type="percent"/></li> </ul> </fieldset>
</div>위 HTML은 다음과 같이 표시가 됩니다.
3. tiles
Tiles는 기본적으로 JSTL을 이용하지만, JSTL에서 중복되는 html code를 최소화하기 위해서 만들어진 Template Engine입니다. Tile는 기본적인 Html View 가 Composite View Pattern으로 동작할 때, 중복되는 코드들을 공통 요소로 뽑아서 이용가능합니다. 다음은 Tile에 대한 기본 개념의 정의입니다.
일반적인 Html Page의 기본 구조입니다. 이 구조에서 페이지가 바뀌게 된다면 Body부분의 Content는 계속해서 바뀌게 되지만, Menu, Header, Footer들은 크게 바뀌지 않는 것이 일반적입니다.
.png)
따라서, 각 부분을 재사용할 수 있다면 코드의 양은 매우 줄어들고, 유지보수에 용의함을 알 수 있습니다.
tiles를 추가하기 위해서는 pom.xml에 다음 항목을 추가해주세요.
<dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-jsp</artifactId> <version>3.0.1</version> </dependency>
tiles는 tag를 제공하고 있으며, tag를 이용해서 tiles page를 작성할 수 있습니다. 먼저 layout page를 알아보도록 하겠습니다.
| <%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title><tiles:insertAttribute name="title"/></title> <link href="/res/css/bootstrap.min.css" rel="stylesheet" /> <link href="/res/css/sample.css" rel="stylesheet" /> <script src="/res/js/bootstrap.min.js"></script> </head> <body> <tiles:insertAttribute name="content"/> </body> </html> |
기본적인 content의 attribute를 지정하고, 그 attribute에 원하는 값을 넣어주는 것이 가능합니다. attribute는 String 문자열 또는 jsp 파일이 될 수 있습니다. 이러한 attribute와 view name을 설정하기 위해서 tiles는 설정 xml을 가지게 되는데, 이 xml은 다음과 같이 구성될 수 있습니다.
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
"http://tiles.apache.org/dtds/tiles-config_3_0.dtd"><tiles-definitions> <definition name="main-layout" template="/WEB-INF/tiles/layouts/main-layout.jsp"> <put-attribute name="title" value=""/> <put-attribute name="content" value=""/> </definition> <definition name="book/list" extends="main-layout"> <put-attribute name="title" value="BOOK LIST"/> <put-attribute name="content" value="/WEB-INF/tiles/book/list.jsp"/> </definition> <definition name="book/add" extends="main-layout"> <put-attribute name="title" value="Add BOOK"/> <put-attribute name="content" value="/WEB-INF/tiles/book/add.jsp"/> </definition> </tiles-definitions>
여기서 각각의 definition name은 ModelAndView의 view name으로 이용됩니다. extends로 선언된 View를 Template로 이용하고, 각각의 View의 조각(tile)을 붙이는 형식으로 사용할 수 있습니다.
tiles를 사용하기 위해서는 TilesViewResolver를 applicationContext에 선언해줘야지 됩니다. 일반적으로 controller-servlet.xml에서 구성합니다. code base configuration은 다음과 같이 설정해줍니다.
@Bean public TilesConfigurer tilesConfigurer() { TilesConfigurer tilesConfigurer = new TilesConfigurer(); tilesConfigurer.setDefinitions(new String[] { "/WEB-INF/tiles-configs.xml" }); return tilesConfigurer; } @Bean public TilesViewResolver tilesViewResolver() { TilesViewResolver tilesViewResolver = new TilesViewResolver(); tilesViewResolver.setOrder(1); return tilesViewResolver; }
2개의 @Bean을 설정해주는 것을 알 수 있습니다.
보시면 <tiles:insertAttribute> tag로 구성된 부분에 tiles.xml 파일에서 지정한 tile이 들어가서 전체 웹페이지를 구성하게 되는 것을 알 수 있습니다. 매우 자주 쓰이고 있는 View Teamplate입니다. 전체 코드의 양을 줄일 수 있고, 전체 Framework 등의 문제를 쉽게 해결할 수 있는 방법이기도 합니다.
tiles를 사용하시면 이제 book/list.jsp는 다음과 같이 변경이 될 수 있습니다.
<h2>jstl test code 입니다.</h2><div class="example-form"> <h3>c:forEach example code</h3> <spring:message code="code.message"></spring:message> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>Title</th> <th>status</th> <th>Description</th> </tr> </thead> <tbody> <c:forEach var="book" items="${books}"> <tr> <td>${book.title}</td> <c:set var="status" value="일반" /> <c:choose> <c:when test="${book.status eq 'NORMAL'}"> <c:set var="status" value="일반" /> </c:when> <c:when test="${book.status eq 'RENTNOW'}"> <c:set var="status" value="대여중" /> </c:when> <c:otherwise> <c:set var="status" value="분실중" /> </c:otherwise> </c:choose> <td>${status }</td> <td>${book.comment}</td> </tr> </c:forEach> </tbody> </table></div>
layout에서 body 부분만을 제외하고 나머지 부분들을 모두 처리하고 있기 때문에 중복 코드를 없앨수 있는 것을 볼 수 있습니다. 조금 더 응용할 경우, 보다더 복잡한 UI를 좀 더 깔끔한 코드로 만들어주는 것이 가능합니다. Tiles의 경우에는 현장에서 주로 사용하고 있는 View Template 입니다. 꼭 사용법을 익혀주시길 바랍니다.
4. velocity
Velocity는 JSTL의 문법의 복잡함을 해결하기 위해서 구성된 View Template 입니다. 기본적으로 제어문의 간편함과 간결한 html을 가능하게 하는 장점을 가지고 있습니다.
기본적인 velocity로 구성된 html 파일을 한번 알아보도록 하겠습니다. (* velocity로 구성된 html파일은 대체적으로 .vm 확장자를 갖습니다.) velocity를 주로 이용하는 경우에는 eclipse에 velocity plugin을 설치하는 것이 좋습니다. Install New Software를 선택해서 http://veloeclipse.googlecode.com/svn/trunk/update/ 주소에서 veloctiy plugin을 설치해주면 .vm 파일의 syntax highlight가 가능합니다.
기본적인 velocity 문법은 #으로 시작되는 제어문과 $로 시작되는 변수로 함축할 수 있습니다. 만들어진 book list에 대한 velocity code는 다음과 같습니다.
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Velocity View Example</title><link href="/res/css/bootstrap.min.css" rel="stylesheet" /><link href="/res/css/sample.css" rel="stylesheet" /><script src="/res/js/bootstrap.min.js"></script></head><body> <h2>freemarker list view</h2> <div class="example-form"> <h3>Book list</h3> <spring:message code="code.message"></spring:message> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>Title</th> <th>status</th> <th>Description</th> </tr> </thead> <tbody> #foreach($book in $books) <tr> <td>$book.title</td> #if($book.status == "NORMAL") <td>일반</td> #elseif($book.status == "RENTNOW") <td>대여중</td> #else <td>분실</td> #end <td>$book.comment</td> </tr> #end </tbody> </table> </div></body></html>
주의해서 보실 것이 #foreach와 #if문입니다. jstl보다는 문법이 매우 쉬워지는 것을 알 수 있습니다. 좀더 보기도 편한것도 사실이고요.
ViewResolver를 등록하기 위해서 Spring은 2개의 Bean을 정의하도록 되어 있습니다. 위에 Tiles에서와 완전히 동일합니다. 먼저 ViewConfigurer를 등록하고, ViewResolver를 등록하는 형식입니다. ViewConfigurer의 경우에는 View에 대한 Configuration을 주로 등록을 하고, ViewResolver의 경우에는 Resolver의 세부 설정을 넣는 형식입니다. Velocity의 code base configuration은 다음과 같이 구성됩니다.
@Bean public VelocityConfigurer velocityConfigurer() throws VelocityException, IOException { VelocityConfigurer configurer = new VelocityConfigurer(); configurer.setResourceLoaderPath("/WEB-INF/vm"); Properties properties = new Properties(); properties.put("input.encoding", "UTF-8"); properties.put("output.encoding", "UTF-8"); configurer.setVelocityProperties(properties); return configurer; } @Bean public VelocityViewResolver velocityViewResolver() { VelocityViewResolver viewResolver = new VelocityViewResolver(); viewResolver.setContentType("text/html; charset=UTF-8"); viewResolver.setSuffix(".vm"); viewResolver.setOrder(3); return viewResolver; }
Configurer에서 encoding을 설정하는 것을 잊지 말아주세요. 한글 데이터가 있는한, 그리고 영문만을 사용하지 않는한 모든 ViewResolver는 어떻게든 UTF-8 설정이 필요합니다.
5. Freemarker
Freemarker는 기본적으로 velocity와 동일한 컨셉의 View Template Engine입니다. Velocity보다 빠르고, 가독성의 향상을 목적으로 하고 있습니다. 다음은 Freemarker로 만든 Html code입니다.
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title><tiles:insertAttribute name="title"/></title><link href="/res/css/bootstrap.min.css" rel="stylesheet" /><link href="/res/css/sample.css" rel="stylesheet" /><script src="/res/js/bootstrap.min.js"></script></head><body> <h2>freemarker list view</h2> <div class="example-form"> <h3>Book list</h3> <spring:message code="code.message"></spring:message> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>Title</th> <th>status</th> <th>Description</th> </tr> </thead> <tbody> <#list books as book> <tr> <td>${book.title}</td> <#if book.status.name() == "NORMAL"> <td>일반</td> <#elseif book.status.name() == "RENTNOW"> <td>대여중</td> <#else> <td>분실</td> </#if> <td>${book.comment}</td> </tr> </#list> </tbody> </table> </div></body></html>
#을 이용한 간편한 foreach문이 보이시나요? #if 등 문법상으로는 개인적으로는 좀더 편해보이는 것이 freemarker이긴합니다. freemarker를 사용하기 위해서는 velocity와 동일하게 ViewConfiguration과 ViewResolver를 구성해야지 됩니다. 다음은 code base configuration입니다.
@Bean public FreeMarkerConfigurer freemarkerConfigurer() { FreeMarkerConfigurer freemarkerConfigurer = new FreeMarkerConfigurer(); freemarkerConfigurer.setTemplateLoaderPath("/WEB-INF/fmt"); Properties properties = new Properties(); properties.put("default_encoding", "UTF-8"); freemarkerConfigurer.setFreemarkerSettings(properties); return freemarkerConfigurer; } @Bean public FreeMarkerViewResolver freemarkerViewResolver() { FreeMarkerViewResolver viewResolver = new FreeMarkerViewResolver(); viewResolver.setContentType("text/html; charset=UTF-8"); viewResolver.setSuffix(".ftl"); viewResolver.setOrder(2); return viewResolver; }
Summary
지금까지 다양한 Html View Engine을 살펴봤습니다. View Engine은 매우 다양한 형태로 제공되고 있습니다. 지금 소개한 Veloctiy, Freemarker, tiles의 경우에는 Spring에서 공식적으로 제공하고 있는 View Template Engine입니다. 타 View Template Engine의 경우, Library에 Spring의 ViewResolver를 구현하고 있는 것이 일반적입니다. 다양한 View Engine은 Project에서 개발자의 맘 또는 전체 개발팀의 의향으로 정해지는 것이 일반적입니다. 그런데, 여기에서 조금 문제가 되는 것이 여러개의 View Engine을 섞어서 쓰지는 거의 못한다는 겁니다. 물론 섞어서 사용하는 경우도 왕왕 있습니다. 예를 들어, tiles에 freemarker를 섞어서 사용한다던지요. 이 부분에 대해서는 각자 개인의 학습이 좀 더 필요한 것 같습니다. 저도 몇 부분은 좀 더 해봐야지 될 것 같고요.
가장 대중적인 것은 jstl을 사용하는 것입니다. 모든 View Template의 기본이 되고 있고, 많은 Reference를 가지고 있습니다. Tiles + JSTL의 경우가 호환성이나 code의 편의성이 가장 좋은 것 같습니다.
숙제입니다. BookList를 jsp, tiles, velocity, freemarker를 이용해서 표시해주세요. 4개의 html page와 4개의 Template engine의 설정이 필요합니다. 반드시 한글 데이터가 나오도록 설정되어야지 됩니다. 또한 각 ViewEngine이 한 web server에서 동작하도록 구성을 해주시길 바랍니다.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
websocket-tutorial01.zip
