Sample 코드 분석 - Githubissues

멘토링 데이 때 받은 코드를 분석합니다.

우리 시나리오부터 짜야하긴 하는데, 기본 환경 세팅은 해야돼서 받은 것 만이라도 해봅시다.

일단 받은거 그대로 임. 나 프런트 잘 모르니까 좀 도와주셈...😭

고쳐보긴 할건데 주석도 그렇고 코드가 너무 정신없어서 내가 놓칠수도 있으니 검토부탁 스타일 코드(css)도 한 파일안에 들어있는데 이거 static 폴더로 빼서 관리해야되는거 아닌지?

index.jsp

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<%@ page language="java" contentType="text/html; charset=euc-kr" pageEncoding="euc-kr"%>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>My Chatbot</title>

        <!-- 디자인을 위한 스타일쉬트 영역 시작 //-->
        <style type="text/css">
            .bgcolor1{background-color:#3b5998}
            .bgcolor2{background-color:#eceff5} 
            .bgcolor3{background-color:#dd3c10}
            .inputPic{padding-right:5px}.fcb{color:#000}
            .composerInput{height:30px;width:300px;margin-bottom:7px}
            .mfsxs{font-size:x-small}
            .mfsxs:hover{background-color:#3b5998;color:#fff}
        </style>
        <!-- 디자인을 위한 스타일쉬트 영역 종료 //-->

        <!-- html페이지 내 이벤트 처리를 위한 자바스크립트 영역 시작 //-->
        <!-- ajax 함수를 사용하기 위해 httpRequest.js 링크 //-->
        <script type="text/javascript" src="js/httpRequest.js"></script> 
        <script type="text/javascript">

            //신규 글을 등록하기 위해 호출하는 함수(컨텐츠 내용 및 작성자, 이미지 경로를 파라미터로 받음)
            function chat(){  
    //          var hidden1 = document.form1.hidden1.value;
    //          if (hidden1 == "first") {
    //              var message = document.form1.message.value;
    //              sendRequest("control.jsp","message="+message, reply , "POST");
    //              document.form1.hidden1.value = "executed";
    //          } else {
                    var message = document.form1.message.value;
                    var messageHistory = document.form1.messageResult.value;
                    var user = document.form1.user.value;
                    sendRequest("control.jsp","message="+message+"&messageHistory="+messageHistory+"&user="+user, reply , "POST");
                    document.form1.message.value = "";
                    //var temp = document.form1.messageResult.value;
                    //document.form1.messageResult.value = '';document.form1.messageResult.value=temp;

    //          }
            }

            //ajax함수 호출 후(sendRequest) 처리 후 글 목록을 reply 영역에 출력하기 위해 처리하는 함수
            //control.jsp 로직을 보면 리스트를 출력하기 위해 while()구문이 작성되어 있음. 이때 작성된 html이 innerHTML속성을 통해 reply영역에 표시됨
            //이러한 처리로직의 장점은 화면을 reload 하지 않고, 처리가 가능하여 불필요한 request 및 화면 drawing을 줄여준다.(ajax장점)
            function reply(){
                var reply = document.getElementById("messageResult");
                if(httpRequest.readyState==4){
                    if(httpRequest.status == 200){    
                        //innerHTML에서 responseText로 변경함
                        //초기 Load 시 Textarea를 찾는 javascript 오류를 방지하기 위해 text로 변경함
                        var responseText = httpRequest.responseText;
                        reply.value = responseText.trim();
                    }
                }
                //Textarea의 Focus를 맨 하단으로 이동시킨 후 Message로 Focus 이동처리
                document.form1.messageResult.focus();
                document.form1.message.focus();
            }
            //초기 호출 시 Chat 이력처리를 위한 hidden 값
            //function init() {
            //  document.form1.hidden1.value = "first";
            //  var message = "Hello";
            //  sendRequest("control.jsp","message="+message, reply , "POST");
            //  document.form1.hidden1.value = "executed";
            //}
        </script>
        <!-- html페이지 내 이벤트 처리를 위한 자바스크립트 영역 종료 //-->

    </head>

    <body tabindex="0">
        <div class="bgcolor1">
            <table cellspacing="0" cellpadding="0" width="100%">
                <tr>
                    <!-- 본인이 만들고 싶은 사이트의 제목을 작성하는 영역, 이미지로 대체해도 좋음 //-->
                    <td valign="top"><font color="#FFFFFF">Chatbot</font><p></td>
                </tr>
            </table>
        </div>
        <form name="form1" method="post" action="javascript:chat()" enctype="mutipart/form-data">
        <input type="hidden" name="hidden1"></input>
        <div class="bgcolor2">
            <!-- 신규글을 등록하기 위해 만들어둔 form 영역 시작 //-->
            <!-- form 구문을 통해 server-side script(ex:asp,jsp,php 등)와 데이터 처리가 가능해짐 //-->
            <!-- 원래 action 구문에는 전송할 페이지가 작성되지만, ajax처리를 위해 action의 경로는 sendRequest() 함수 호출 시 정의됨 //-->

            <table cellspacing="0" cellpadding="0" class="comboInput">
                <tr> 
                    <td class="inputPic">User : </td>
                    <td class="inputPic">
                        <input type="text" class="inputPic composerInput" id="composerInput2" name="user" data-sigil="textarea"><br>
                    </td>
                </tr>
                <tr> 
                    <td class="inputPic">Message : </td>
                    <td class="inputPic">
                        <input type="text" class="inputPic composerInput" id="composerInput1" name="message" data-sigil="textarea"><br>
                    </td>
                </tr>
                <tr>
                    <td class="inputPic">&nbsp;</td>
                    <td class="inputPic">
                        <input value="Send Message" type="submit" name="Send">
                    </td>
                </tr>
                <tr>
                    <td class="inputPic">Chat :</td>
                    <td>    

                        <!-- DB에서 가져온 글을 화면에 표시하기 위해 html로 작성 //-->
                        <span></span><br>
                        <textarea id="messageResult" name="messageResult" height="2000" rows="20" cols="45" data-sigil="textarea">
                        </textarea>
                    </td>
                </tr>
            </table>
    <hr>

            <!-- 신규글을 등록하기 위해 만들어둔 form 영역 종료 //-->
        </div>      

        </form>
    </body>
</html>

음 이부분은 순수 자바 코드만 있는데... 컨트롤러와 서비스로직에 넣어야 할듯 control.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="euc-kr"%>
<%@ page import="java.util.ArrayList" %>
<%@ page import="myChatbot.Client" %>
<% 
    //한글 깨짐 처리를 위해 인코딩 구문
    request.setCharacterEncoding("UTF-8");

    //글 삭제(del), 글 등록(insert) 이벤트를 한 jsp파일에서 처리하기 위해 type 파라미터를 받음
    String message = (String)request.getParameter("message");
    String messageHistory = (String)request.getParameter("messageHistory");
    String userName = (String)request.getParameter("user");

    if(messageHistory == null) {
        messageHistory = "";
    }

    char nullChar = (char) 0;
    String botName = "SUZY"; // or take as input

    //Client client = new Client();
    //Client.init(null);
    String rMessage = Client.doMessage(userName+nullChar+nullChar+message+nullChar);
    //String rMessage = Client.doMessage(nullChar+"1"+nullChar+nullChar);
    //String rMessage = Client.doMessage(userName+"1"+nullChar+message+nullChar);

    message = "\n[" + userName + "]" + message;
    rMessage = "\n[" + botName + "]" + rMessage;

%>
<%=messageHistory+""+message+""+rMessage%>

이건 심지어 주석이 깨져있어서 보기힘듦.. 아마 ajax 구현에서 브라우저를 체크하는 것 같은데 이렇게 까지 해야되는 건지는 모르겠음 게다가 무슨 상황인지는 모르겠지만 해당 포맷이 아니거나 예외상황에서 null을 반환한다... 이거는 쓰면 안될 것 같은데 의견좀 GET도 아니고 POST도 아니면 GET으로..? 그리고 밑에 조건문에서 GET을 또 체크함...

httpRequest.js


var params;
function getXMLHttpRequest() {        //  XMLHttpRequest ��ü�� ������ �ִ� getXMLHttpRequest() �Լ�
      if (window.ActiveXObject) {
               try {
                      return new ActiveXObject("Xsxml2.XMLHTTP");
               } catch(e) {
                      try {
                             return new ActiveXObject("Microsoft.XMLHTTP");
                       } catch(e1) { return null; }
                  }
              } else if (window.XMLHttpRequest) {
                     return new XMLHttpRequest();
              } else {
                     return null;
              }
       }
var httpRequest = null; // ������ XMLHttpRequest ��ü�� ������ ��������
// XMLHttpRequest ��ü�� ����ؼ� ������ ���(GET, POST), ������ URL, ÷���� �Ķ���� ���� ����Ͽ� �� ������ ��û�� ����
function sendRequest(url, params, callback, method) {
    httpRequest = getXMLHttpRequest();
    var httpMethod = method ? method : 'GET';
    if (httpMethod != 'GET' && httpMethod != 'POST') {
          httpMethod = 'GET';
    }
    var httpParams = (params == null || params == '') ? null : params;
    var httpUrl = url;
    if (httpMethod == 'GET' && httpParams != null) { // HTTP ��û����� 'GET'�̸�
          httpUrl = httpUrl + "?" + httpParams;                      // URL �ڿ� �Ķ���͸� ����
    }
 httpRequest.open(httpMethod, httpUrl, true); // �����Ŀ��� ������ �� ���̰� �߻��ϹǷ�, ũ�ν� �������� ���� �׻� �񵿱������ XMLHttpRequest ��ü ���

 // �� ������ ������ ����Ʈ Ÿ�� ����
 httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');     
 httpRequest.onreadystatechange = callback; // readyState ���� �ٲ� �� ȣ��� �ݹ��Լ� ����

 // HTTP ��û����� 'POST'�̸� send() �Լ��� ���� �Ķ���� ����
     httpRequest.send(httpMethod == 'POST' ? httpParams : null);
}

mentorchatbot / mentor-chat-bot

Sample 코드 분석 #6