배워가는 페이지

 스피커를 새로 장만했다. 하지만 화이트 노이즈는 좀처럼 잡힐 기미가 없었고, 검색해보니 3.5파이 케이블을 사용하는 것이 원인으로 접지 문제가 의심되었다. 몇 가지 해결방안 중 내장 사운드카드를 피해 외장 사운드 출력을 통해 전기 간섭을 피하는 방법을 떠올리고 USB 사운드카드를 찾기 시작했다.

 쇼핑몰 장바구니에 온갖 USB 사운드카드를 담고 고민하던 와중에, 게임이너스 콘솔마켓에서 리뷰 이벤트를 진행한다는 소식을 접했다. 그 즉시 매장을 찾아가 본 글의 리뷰 대상인 '사운드 블라스터 G3'을 수령했다.

 포장을 열면 먼저 설명서와 작은글씨로 정말 빼곡하게 채워진 품질보증서(글로벌/차이나)가 우리를 반긴다. 다른 제조사의 예를 들면 한국어는 번역기를 이용한 경우를 많이 접했는데 Creative는 눈에 띄는 오탈자 없이 안내되어있다. 다만 https://asia.creative.com/ 에는 한국을 선택해도 한글은 나오지 않으므로 국내에서는 제이웍스를 통해 사후지원을 받는 것이 편할 것으로 보인다.

http://www.jayworks.kr/shop/shopdetail.html?branduid=1264294

 가격에 맞게 제품 품질은 상당히 좋고 기본 단자가 USB-C타입이므로 A타입 어댑터가 함께 동봉되어있다. 또한 PS4를 비롯한 광출력 단자에서 사용할 수 있도록 Mini Toslink Optical / Optical Line In 케이블을 제공한다.

 사운드출력포트 하나만 들어있던 하위 제품 G1과 비교하면 G3는 마이크 입력과 광입력 포트가 추가되었고 보이스 채팅을 구성할 수 있는 헤드폰 환경을 지원한다.

 본 제품은 기본적으로 외장사운드카드로써 스위치, PS4에서도 작동한다. 또 PC, USB-C타입 모바일 기기에서 소프트웨어를 지원하고 있으며 3.5파이 단자를 없애는 요즘 스마트폰 추세에도 잘 어울리는 제품으로 보인다.

 좌측면에서는 물리 휠로 마이크 음량을 조절할 수 있으며 토글스위치를 통해 간단히 마이크 입력을 음소거시킬 수 있다.

 우측면에 위치한 휠은 최소, 최대 걸리는 부분 없이 계속 돌아가는 방식으로 MIXING / VOL 모드 스위치를 통해 게임 소리와 보이스 채팅 소리 비율 / 마스터 볼륨을 조절한다.

 중앙에 위치한 LED가 꺼져있는 경우 가장 기본적인 소리가 출력되고 해당 버튼을 눌러 발소리 강화 모드를 켰을 때는 흰색 불빛이 들어온다. 모드 스위치를 MIXING으로 변경하면 LED가 초록색으로 변하는데, 휠을 움직여 오디오 소리를 키울 경우 주황색, 반대로 움직이면 청록색으로 변하며 보이스 채팅 소리가 커지게 된다.

 발소리 강화 모드와 MIXING 스위치를 보아 해당 제품은 단순 사운드카드가 아닌 보이스 채팅을 겸하는 FPS사운드플레이에 특화되어 있는 것으로 보인다.

 게임이너스 콘솔마켓 동물의숲 추첨방송에서 이벤트를 안내받고 본 제품을 사용할 수 있어 매우 좋은 경험이었고 해당 글을 쓰는 시점에서 Creative, 제이웍스의 이벤트도 진행 중으로 제품을 알리기에 좋은 시기로 생각된다.

초기 설계 오류로 화면출력이 안되는 문제,

펀딩 측(스컬&코)에 문의해보니 부숴야지만 재 배송을 해준다고 함

26일

Step1 [개발환경 구성]

- maven 프로젝트 구성 방법

- 프로젝트 생성 방법

- 프로젝트 내용 변경방법

- 인코딩 -> utf-8로 서버.xml 설정 Connector를 찾아 URI

- 자바 버전 -> 빌드경로, 컴파일러등.

- facets -> org.eclipse.wst.common.project.facet.core.xml

- pom.xml에서 기본설정

- 웹 설정에 맞는 기본적인 라이브러리 구성

- 폴더 구조 설명.

- 톰켓 연결

- UTF-8 설정

- 루트변경

- index.jsp 화면 확인

- maven build

- 빌드 과정과 폴더 구조 설명

Step3 [로그설정과 인터셉터의 이해]

- logback.xml 파일 구성

- 서버 생성

- 로그 안나옴.

- pom.xml에 로그관련 라이브러리 추가

- 서버 재기동

- 로그 출력 확인

- HelloController.java에 로그 관련 코딩 추가

- 내용 확인.

- controllerContext.xml에 인터셉터 관련 내용 추가

- BaseInterceptor.java, WebInterceptor.java 생성

- preHandle, postHandle 차이 설명

- 브라우저에서 기동 및 로그 확인.

- 설명 내용 확인

27일

Step4 [WebExceoptionResolver]

WebExceoptionResolver

지시사항

코드는 작동 순서에 따라 정렬하는 것을 원칙

불필요한 변수 정의보다 받아온 값을 그대로 반환(return)

Step5 [DB연결]

트랜잭션 AOP

Log4j.jdbc 주석기능

28일

Step6-8

Bad리퀘스트익셉션

AOP Aspects

Base 부모상속관계

Mode파라미터에 따른 Create / Update 수행

29일

30일

[Servlet] 1주차 설문지 서블릿

[Servlet/JavaScript] 설문지 20-21일

22일 목요일

데이터 가공 서블릿에 대한 이해를 기반으로 퍼블리싱 작업을 진행합니다.

이후 설문지와 응답이 입력될 데이터베이스를 계획합니다.

목표 - 퍼블리셔를 통해 전달받은 html과 css를 적용하기, DB 세팅하고 table 계획하기

결과물 예시

1. 디자인된 입력전/후 html페이지와 CSS 자료를 전달받아 가능한 원본 양식을 유지합니다.

페이지를 갱신해도 상관없지만 이번에는 jQuery를 이용하여 Ajax통신을 요청했습니다.

1-2. 입력전 html내용을 jsp로 옮기고 결과부분은 동적요소로 갱신했습니다.

<div class="title"><h1>과제 1 : 서블릿을 활용한 웹페이지 구현</h1></div>

<div class="ex01">
	<form class="form">
		<div><span class="f_bold">1. 설문 문항 갯수(surveyCnt) 설정 :</span> 
			<input type="text" class="tc w50"> (1자리 숫자만 입력) <span id="nSpan"></span><br>
		<button type="button" class="b_style gray w_full mgt5" id="btn_form01" rel="listBox2">설문 폼 생성</button></div>

		<div><span class="f_bold">2. 설문 문항 입력 리스트</span>(특수문자를 제외한 입력, 100자 제한) <span id="qSpan"></span>
			<div class="sv_list_wrap" id="listBox2">
				<!-- 
				<dl class="q_list mgt5">
					<dt><span class="s_style01">질문 1</span></dt>
					<dd><input type="text" class="w_full"></dd>
				</dl>
				 -->
				<button type="button" class="btn_po1 b_style gray w_full" id="btn_form02" rel="listBox3">설문 생성</button>
			</div>
		</div>

		<div><span class="f_bold">3. 설문지 리스트 및 답안 작성 리스트</span> (특수문자를 제외한 입력, 100자 제한) <span id="aSpan"></span>
			<div class="sv_list_wrap" id="listBox3">
				<!-- 
				<dl class="q_list mgt5">
					<dt><span class="s_style01">질문 1</span></dt>
					<dd>우리회사의 출근시간은 언제일까요?</dd>
				</dl>
				<dl class="q_list">
					<dt><span class="s_style01 light">답안</span></dt>
					<dd><input type="text" class="w_full"></dd>
				</dl>
				 -->
				<button type="button" class="btn_po1 b_style green w_full" id="btn_form03" rel="listBox4">답안 작성 완료 및 제출</button>
			</div>
		</div>
		
		<div><span class="f_bold">4. 설문지 평가 리스트</span>
			<div class="sv_list_wrap" id="listBox4">
				<!-- 
					<div class="q_list_box">
						<dl class="q_list mgt5">
							<dt><span class="s_style01">질문 1</span></dt>
							<dd><span>우리회사의 출근시간은 언제일까요?</span></dd>
						</dl>
						<dl class="q_list">
							<dt><span class="s_style01 light">답안</span></dt>
							<dd><span>모릅니다.</span></dd>
						</dl>
						<dl class="q_list">
							<dt><span class="s_style01 green">평가(1)</span></dt>
							<dd><span>설문이 답안보다 <14>글자 많습니다.</span></dd>
						</dl>
						<dl class="q_list">
							<dt><span class="s_style01 green">평가(2)</span></dt>
							<dd><span>당신은 지루하셨군요.</span></dd>
						</dl>
					</div>
				-->
			</div>
		</div>
	</form>
</div>

jQuery를 통해 코드를 줄이고 개발시의 가독성 또한 좋아졌습니다.

2. Ajax요청으로 HttpServletRequest객체에 전달된 파라미터를 읽어와 (getParameterValues)

이전 데이터를 유지하고 다음 스텝을 위해 데이터를 가공합니다. (JSON)

//2.질문입력
if(uri.equals("/kkk3206/ex1_q")) {
	System.out.println("{}"+request.getParameter("question"));
	
	JsonArray sorted = new JsonArray();					//gson 라이브러리 사용
	for (String str : sort(request.getParameterValues("question"))) {	//선택정렬 함수 호출
		sorted.add(str);						//정렬된 질문목록 jsonArray로
	}
	
	System.out.println("jsontArray sorted"+sorted.toString());
	JsonObject jsonObject = new JsonObject();				//전송할 json오브젝트 생성
	jsonObject.add("QuestionSort", sorted);
	out.print(jsonObject);							//디스패처 대신 json 출력
	out.flush();
}

2-2. html페이지는 그대로 유지되므로 처리데이터만을 반환합니다.

HttpServletResponse객체의 PrintWriter out에 Gson라이브러리를 사용해 JSON 형식의 데이터를 반환합니다.

	if(uri.equals("/kkk3206/ex1_q")) {
		System.out.println("{}"+request.getParameter("question"));
		
		JsonArray sorted = new JsonArray();					//gson 라이브러리 사용
		for (String str : sort(request.getParameterValues("question"))) {	//선택정렬 함수 호출
			sorted.add(str);					//정렬된 질문목록 jsonArray로
		}
		
		//********************************DB연동************************************
        try {
            Class.forName("com.mysql.jdbc.Driver");
            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/testdb?autoReconnect=true&useSSL=false" , "root", "passward");
            stmt = conn.createStatement();
            
            String tb_survey_master = "tb_survey_master";	//마스터테이블명
            String tb_survey_conts = "tb_survey_conts";		//설문테이블명
            
            //마스터테이블 입력
            insertMaster(tb_survey_master, "첫번째설문지");
            for (int i=0;i<request.getParameterValues("question").length;i++) {
            	String survey_que = request.getParameterValues("question")[i];
            	String survey_qno = String.valueOf(i+1);			//1부터 채번
            	String survey_sortno = "0";					//정렬한뒤의 인덱스
            	for(int j=0;j<sorted.size();j++) {
            		if(sorted.get(j).getAsString().equals(survey_que)) {	//정렬된 질문목록과 비교하여 같을때 해당 인덱스 저장
            			survey_sortno = String.valueOf(j+1);
            		}
            	}
            	//설문지테이블 입력
            	insertSurvey(tb_survey_master, tb_survey_conts, survey_qno, survey_sortno, survey_que);
			}
        } catch (SQLException se1) {
            se1.printStackTrace();
        } catch (Exception ex) {
            ex.printStackTrace();
        } finally {
	            try {if (stmt != null)stmt.close();} catch (SQLException se2) {}
	            try {if (conn != null)conn.close();} catch (SQLException se) {se.printStackTrace();}
	        }    
	      //**********************************DB종료***********************************
		
		System.out.println("jsontArray sorted"+sorted.toString());
		JsonObject jsonObject = new JsonObject();		//전송할 json오브젝트 생성
		jsonObject.add("QuestionSort", sorted);
		out.print(jsonObject);					//디스패처 대신 json 출력
		out.flush();
	}

[Servlet] 1주차 설문지 서블릿

20일 화요일

1주차에는 별다른 세팅을 하지 않고 dynamic web project로만 진행합니다.

라이브러리는 직접 추가해도 되지만 maven으로 등록했습니다.

목표 - Ajax를 사용하지 않고 Servlet만을 통한 서버 통신원리를 이해

결과물 예시

1.각 문항은 Step단위로 페이지가 갱신되며

이전문항의 입력값<ipnut>은 문자<span>로 유지되어야합니다.

1-2. 자바스크립트에서 정규식을 거쳐 입력값을 제한합니다.

1-3. 입력받은 설문수만큼 두번째 문항에 입력폼을 생성하는 자바스크립트를 구성합니다.

<div class="container">

    
<h1>설문지</h1>
1.설문 문항 수를 입력해주세요.(JS)
<form id="nForm" action="/Survey/Survey" method="post">
	<input id="num" type="text" name="num" value="${param.num}">
	<input type="submit" value="설문 폼 생성">
</form>
<span id="nSpan"></span>

  
<br><br>2.설문내용을 입력해주시기 바랍니다.(Servlet/JSP)
	<c:set var="num" value="${param.num == null ? 0 : param.num}" scope="request" />
<form id="qForm" action="/Survey/Question" method="post">
	<input type="hidden" name="num" value="${param.num}">
	<c:choose>
	        <c:when test="${QuestionList ne null}">
			<c:forEach var="item" items="${QuestionList}" varStatus="status">
			   		<br>&nbsp ${status.count}번 질문 : ${item}
			</c:forEach>
               </c:when>
       <c:otherwise>
		<c:forEach var="q" begin="1" end="${num}" step="1">
				<br>&nbsp ${q}번 질문 : <input type="text" name="question">
		</c:forEach>
		<c:if test="${param.num ne null}">
			<input type="submit" value="설문 생성">
		</c:if>
       </c:otherwise>
	</c:choose>
</form>
<span id="qSpan"></span>


<br><br>3.설문에 대한 답을 입력하세요.(Servlet/JSP)
<form id="aForm" action="/Survey/Answer" method="post">
	<c:choose>
		<c:when test="${AnswerList ne null}">
			<c:forEach var="item" items="${QuestionSort}" varStatus="status">
			   	<br>&nbsp ${status.count}번 질문 : ${item}
			   	<br>&nbsp; &nbsp; &nbsp; &nbsp;답변 : ${AnswerList[status.index]}
			</c:forEach>
       </c:when>
       <c:otherwise>
		<input type="hidden" name="num" value="${param.num}">
		<c:forEach var="item" items="${QuestionSort}" varStatus="status">
		   	<br>&nbsp ${status.count}번 질문 : <label>${item}</label>
			<input id="${status.count}" type="hidden" name="question" value="${QuestionList[status.index]}">
			<br>&nbsp<input type="text" name="answer">
		</c:forEach>
		<c:if test="${QuestionList ne null && AnswerList eq null}">
			<br><input type="submit" value="답안 작성 완료 및 제출">
		</c:if>
       </c:otherwise>
	</c:choose>
</form>
<span id="aSpan"></span>


<br><br>4.평가
	<c:if test="${AnswerList ne null}">
		<c:forEach var="item" items="${AnswerList}" varStatus="status">
		   	<br>&nbsp ${status.count}번 질문 : <label id="q${status.index}">${QuestionSort[status.index]}</label>
		   	<br>&nbsp; &nbsp; &nbsp; &nbsp;답변 : <label id="a${status.index}">${item}</label>
		   	<br>&nbsp; &nbsp; &nbsp; &nbsp;평가1 : 
		   	
		   	<c:choose>
		   		<c:when test="${fn:length(QuestionSort[status.index]) > fn:length(item)}">
			  		설문이 답변보다 <${fn:length(QuestionSort[status.index]) - fn:length(item)}>글자 많습니다 
			   		<br>&nbsp; &nbsp; &nbsp; &nbsp;평가2 : 당신은 지루하셨군요
		   		</c:when>
		   		
		   		<c:when test="${fn:length(QuestionSort[status.index]) < fn:length(item)}">
		   			답안이 설문보다 <${fn:length(item) - fn:length(QuestionSort[status.index])}>글자 많습니다
			   		<br>&nbsp; &nbsp; &nbsp; &nbsp;평가2 : 당신은 현명하십니다
		   		</c:when>
		   			
       			        <c:otherwise>
		   			답안과 설문의 글자수가 일치합니다.
		   			<br>&nbsp; &nbsp; &nbsp; &nbsp;평가2 : 당신은 귀찮거나, 통하셨습니다
       			        </c:otherwise>
		   	</c:choose>
		</c:forEach>
	</c:if>
</div>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

jstl라이브러리의

for문을 사용하여 페이지가 요청될때 전달받은 데이터에 따라 설문 입력폼이 생성되었고

length()로 설문과 응답간의 글자수를 비교하여 평가를 다르게 표현

2.form태그의 sumit 버튼을 누르면 서블릿에서 입력데이터를 처리하도록 url를 매핑해줍니다.

서블릿을 매핑하기 위해서는 

2-2. 프로젝트를 우클릭 한 뒤 Java EE Tools > generate deployment descriptor stub를 클릭하면

WebContent / WEB-INF 에 web.xml이 생성됨 

<servlet>
	<servlet-name>Survey</servlet-name>
	<servlet-class>test.suHwan.SurveyServlet</servlet-class>
</servlet>    <!-- 서블릿을 정의하고 찾아갈 클래스를 등록한다 -->

<servlet-mapping>
	<servlet-name>Survey</servlet-name>
	<url-pattern>/Survey</url-pattern>
</servlet-mapping>
<!-- 서블릿을 요청할 URL을 등록한다. 필요에 따라 여러 주소를 매핑(urlPatterns) -->
<!-- 위 설정을 간소화 하기위해 서블릿 클래스의 선언부에 @WebServlet(urlPatterns={"/ex1","/ex1_q","/ex1_a"})를 사용합니다. -->

이클립스에서 새파일 > Servlet을 선택하면

doGet과 doPost가 정의된 기본적인 서블릿 클래스가 생성됩니다.

String uri에 request.getRequestURI()를 담아 요청된 uri를 분류하여 요청을 수행합니다.

3.HttpServletRequest객체에 전달된 파라미터를 읽어와 (getParameterValues)

이전 데이터를 유지하고 다음 스텝을 위해 데이터를 가공합니다. (setArribute)

private String[] sort(String[] sorted) {	//선택정렬 함수
		
		System.out.println("\nsort기능");		//글자수가 아닌 가나다순으로 정렬됨
		java.util.Arrays.sort(sorted);
		System.out.println(sorted.toString());

		System.out.println("\n선택정렬");	//글자수로 정렬하기 위한 선택정렬
        String temp;//데이터 Swap용 임시 변수
        
        for( int i=0; i < sorted.length-1; i++){
        	System.out.println(i+1+"번째값 "+sorted[i]);
            for (int j=i+1; j<sorted.length; j++){               
            	System.out.println("	비교대상 "+sorted[j]);
                if(sorted[i].length() > sorted[j].length()){
			//오름차순 ; 큰수를 뒤로, data[i] > data[j]

                    //데이터 값 체인지
                    temp = sorted[i];
                    sorted[i] = sorted[j];
                    sorted[j] = temp;
                }
            }
        }
		System.out.println(sorted.toString());
		
		return sorted;
	}

3-3. View를 반환하는 방법으로는

HttpServletResponse객체의 PrintWriter out으로 처리데이터만을 반환할 수도 있지만

html페이지를 출력해야 하므로 RequestDispatcher를 사용합니다.

Attribute에 담은 데이터를 유지하기위해 redirect 대신 requestDispatcher.forward

[Servlet/jQuery] 설문지 22-23일 (작성중)