띠그랭

프로젝트 이름

ITHRer - (IT + Human Resources + er)

(IT분야 에서 취업하는 사람들)

프로젝트 개요

프로젝트 설명

Spring Framework를 이용한 Server 개발 및 mvc 와 디자인 패턴 적용

아마존의 EC2, RDS를 활용한 클라우드 서비스 공부

Kakao Open i builder를 활용한 간단한 챗봇 구현

Websocket를 활용한 채팅 구현 및 폴링, 롱폴링 등에 대한 이해

프로젝트 기획

특정 분야로 제한된 정보로 사용자에게 양질의 정보를 제공

프로젝트 환경

개발 환경

jdk 1.8 | STS | AWS | Kakao i open builder | Oracle

실행 환경

Mac OS | Window OS | jre 1.8 | Google Chrome

프로그래밍 언어

Java 1.8 | HTML5 | JSP | JavaScript

프로젝트 예시

준비된 예시 종류

Github Repository

깃허브

깃허브 링크

프로젝트 특징

팀프로젝트로 진행하면서 본인이 맡은 부분에 대한 정리를 말씀드리겠습니다.

 

EC2 , RDS

프로젝트를 진행하면서 대부분 서버를 로컬에서 수행했지만, 이번 프로젝트에서는 클라우드 서비스 AWS를 활용

Ubuntu 환경의 EC2를 활용했으며 이에 따라 기본적인 linux에 대한 복습 및 공부

그리고 로컬과 달리 FTP를 사용해야 하는 경우가 있어서 이 때 FileZilla를 활용

또한 디버깅 할 때, STS에서 Logger를 활용하여 Console에서 간단하게 확인을 했다면, EC2에서는 tomcat에서 catalina에서 로그 확인을 통해 디버깅을 해야했는데, 이 때 로그가 축적되어 감당하기 힘든 크기가 되어, 이를 하루 단위로 로그를 나누던가 다른 방법으론 주기적으로 로그를 초기화 해주는 조치가 필요

 

스케줄링

스케줄링의 사용법은 대표적으로 3가지

1. 쿼츠
2. xml에서 설정
3. 어노테이션에서 스케줄러사용

그 중 가장 간단한 사용방법인 3번을 선택했고, 리눅스와 동일한 방법인 cron양식으로 설정하면 됨.

익명게시판의 경우 3일이 지난 게시물들을 자동으로 삭제해야하기 때문에 스케줄러를 사용하여 관리자가 직접 처리하지 않아도 되기 때문에 편리

 

챗봇

이번에 'Kakao i 오픈빌더'를 이용할 수 있는 기회가 있어 카카오 플러스친구를 활용하여

완벽하진 않지만, 챗봇을 만들어 보았다.

준비물 - STS + Kakao i openbuilder + kakao 플러스친구 관리자 계정 + EC2

자세한 내용은 링크를 통해 정리한 내용을 확인

카카오 아이 오픈빌더 + Java Spring 정리한 것!

 

JSP WebSocket (채팅 구현)

WebSocket을 이용해 유저간의 채팅을 구현한 부분인 것이였던 것입니다.

흐름

1. 서버는 Socket 생성 후 Server Socket으로 등록 합니다. 이를 바인딩 이라고 합니다.

   그 다음 클라이언트의 접속 요청을 받기 위한 설정을 하는데 이를 listen 이라 칭합니다.

2. 그 후 서버는 Server Socket은 클라이언트의 접속 요청을 하염없이 기다리는 것이였답니다. 이를 accept 상태라고 합니다

3. 클라이언트 쪽에서 채팅을 마구마구 즐기기 위해 Socket을 만들고, WebServetEnd 포인트로 접근 을 요청합니다. 이 때 책 읽는 사람들은 TCP로 연결이 되는데 , TCP연결을 하기 위해선 3 way handshake를 해야합니다. 알맞게 연결이 되면 , 서버는 와 클라이언트는 서로 read/write 할 수 있고, 서로 물고 뜯고 마구마구 엉망진창이 될 수 있던 것입니다.

   이 때 서버는 또한 새로운 클라이언트의 접근을 확인할 수 있는 accept 상태인 것을 알고 계시면 됩니다.

   (여기서 ajax를 통해서도 채팅을 구현할 수 있는데, 웹소켓과 ajax로 채팅을 구현할 때 생기는 차이점을 설명드리자면, ajax로 채팅을 구현할 경우, 클라이언트가 서버쪽에 요청을 보내고 , 막 명령을 시킬 수 있는 것에서 끝나지만, WebSocket으로 구현 할 경우, 클라이언트가 서버쪽에 요청을 할 수 있는건 물론이고 , 서버쪽에서도 클라이언트를 부를 수 있다는것이 차이점입니다.

 

위에 내용에서 면접에 정말 많이 나오는 내용

1. TCP / UDP 통신 차이

2. 3 way handshake & 4 way handshake

3. http / https 차이

이 쪽 소스는 웹소켓 통신할 때 쓰는 기본적인 소스인데 , onOpen 과 onClose 즉 클라이언트의 접속과 연결해제 할 때 onMessage를 호출 하는데 이 때 chat_user_CNT를 같이 보내 , 현재 이용자의 수를 모든 클라이언트들에게 쫙 보냅니다.

header.jsp를 보시면 서버쪽에 접근하기 위해 클라이언트 쪽에서 소켓을 만드는걸 보실 수 있습니다. 바로 요놈

xxxxxxxxxx
var webSocket = new WebSocket('ws://52.78.61.219:8080/brw/broadcasting/login.do');

url에 대한 부분은 스크린샷을 참고하삼

 

onOpen 부분은 클라이언트가 연결에 성공했을 때 실행

onMessage 부분은 서버에서 클라이언트에게 메시지를 보낼 때

send 부분은 클라이언트에서 서버로 메시지를 보내는 메소드 였던 것이였던 것입니다

BroadSocket.java

xxxxxxxxxx
package com.brw.websocket;
​
import java.io.IOException;
import java.util.Collections;
import java.util.HashSet;
import java.util.Set;
​
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
​
/**
 * 작성자 : 김은찬
 * 내용 : WebSocket 채팅 구현
 */
// 클라이언트에 접속할 서버 주소
@ServerEndpoint("/broadcasting/login.do")
public class BroadSocket {
    /*
     * 자료구조 set ==> 순서 신경 X , 중복 허용 X  , set은 HashSet(정렬X) , TreeSet(저장된 데이터값에 따라 정렬 - red-black tree타입 ) , LinkedHashSet (저장된 순서에 따라 값 정렬) 
     */
    private static Set<Session> clients = Collections.synchronizedSet(new HashSet<Session>());
    
    // 클라이언트로부터 메시지가 도착했을 경우 처리
    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        System.out.println(message);
        if(message.equals("chat_user_CNT")) {
            synchronized (clients) {
                for(Session client : clients) {
                    client.getBasicRemote().sendText("접속자 : "+clients.size());
                    System.out.println("클라 아이디"+client.getId());
                    System.out.println(client.hashCode());  
                }
            }
        }
        else { 
            synchronized (clients) {
                for (Session client : clients) {
                if(!client.equals(session)) {
                    client.getBasicRemote().sendText(message);  
                    }
                }
            }
        }
    }
    
    // 클라가 접속할 때 처리
    @OnOpen
    public void onOpen(Session session) throws IOException {
        System.out.println(session);
        System.out.println("클라이언트 접속 완료");
        clients.add(session);
        onMessage("chat_user_CNT" , session);
    }
    
    // 클라가 접속을 끊을 때 처리
    @OnClose
    public void onClose(Session session) throws IOException {
        System.out.println("클라이언트 접속 종료");
        clients.remove(session);
        onMessage("chat_user_CNT" , session);
    }
}
​

 

header.jsp

xxxxxxxxxx
<script>
    function chatting(){
/*      $("#chatting_div").css('display','block'); */
        $("#chatting_div").toggle();
    }
/*     var textarea = document.getElementById("messageWindow"); */
    var textarea = $("#messageWindow");
    <%if(user != null) {%>
        var webSocket = new WebSocket('ws://52.78.61.219:8080/brw/broadcasting/login.do');
    <%}%>
    var inputMessage = $("#inputMessage");
    
    webSocket.onerror = function(event) {
      onError(event)
    };
    webSocket.onopen = function(event) {
      onOpen(event)
    };
    webSocket.onmessage = function(event) {
      onMessage(event)
    };
    function onMessage(event) {
        if(event.data.indexOf('접속자 : ') == 0){
            $("#chat_cnt").text("채팅 ("+event.data+")");
            return;
        }
        textarea.val(textarea.val() + event.data + "\n");
        const top = textarea.prop('scrollHeight');
        textarea.scrollTop(top);
    }
    function onOpen(event) {
        textarea.val("채팅방에 입장 하셨습니다❤\n");
        console.log(event);
    }
    function onError(event) {
      alert(event.data);
    }
    function send() {
        if(inputMessage.val().length != 0){
        <%if(user != null){%>
        textarea.val(textarea.val() + '<%=user.getUserName()%>띠 : ' + inputMessage.val() + "\n");
        webSocket.send('<%=user.getUserName()%>띠 : ' + inputMessage.val());
        inputMessage.val("");
        /* 채팅창 스크롤 자동 내리기 */
        const top = textarea.prop('scrollHeight');
        textarea.scrollTop(top);
        <%}%>
        }
    }
</script>

 

그외 내용 (링크)

JSP 중복 로그인 (세션바인딩리스너) 정리

JSP 중복 로그인 (세션 바인딩 리스너)

중복 로그인을 회피하기 위해 HttpSessionBindingListener 인터페이스를 구현했습니다

Session Listener에서 두 가지를 비교해서 설명 해 드리면

HttpSessionListener는 세션의 생성과 세션이 해제 되는 이벤트에 맞게 리스너를 호출 할 수 있습니다.

HttpSessionBindingListener는 세션바인딩리스너 인터페이스를 구현한 세션에 바인딩 시키거나 언바인딩 되는 이벤트에 맞게 리스너를 호출 할 수 있습니다.

(세션의 속성을 추가 , 제거 를 뜻함)

1. 흐름

1.1

header.jsp 에서 로그인 시도 - ajax를 통해 서블릿으로 아이디와 비밀번호 및 아이디 저장 체크 유무 전송

1.2

FrontController.java 에서 url-pattern 및 분기를 통해 해당 Command로 이동

1.3

LoginCommand.java 에서 아이디와 비밀번호가 알맞을 경우, setSession을 통해 HashTable에 저장합니다.

세션바인딩 리스너는 setSession 메소드가 호출 했을 경우 valueBound가 실행 되며 ,

session.invalidate(); 와 같이 세션의 속성을 제거 했을 때 valueUnBound가 실행됩니다.

그리고 세션바인딩 리스너 인터페이스를 구현한 클래스는 싱글톤 패턴을 통해 효율적으로 관리됩니다.

이때 유저의 정보를 담고 있는 HashTable은 static으로 지정을 해 스태틱 메모리 영역에 저장을 합니다.

이는 공유하기 위해 요기다가 저장 하는 겁니당

1.4

이후 header.jsp에서 로그아웃을 하면 서블릿을 통해 해당 Command(Logout)로 이동하여 session.invalidate(); 를

실행합니다. 이 때 세션바인딩 리스너에서 valueUnBound가 실행되며 HashTable에서 해당하는 아이디가 제거됩니다.

1.5

중복아이디를 판단하는 메소드는 간단합니다. 세션 바인딩 리스너에서 isUsing 메소드를 통해서 현재 아이디가 HashTable

에 담겨 있다면 true를 반환하고, 없다면 false를 반환합니다.

LoginCommand에서 SessionListener.getInstance().isUsing(userId) 를 조건문으로 두어 중복로그인 인지 판별합

니다.

header.jsp

function loginCheck(){
        var userId = $("#userId").val().trim();
        var userPassword = $("#userPassword").val().trim();
        var saveId = $("#saveId").is(":checked")
        console.log("$saveId는 바로 ! = " , saveId)
        if(userId == 0 || userPassword == 0){
            $("#login-help").text("아이디 혹은 비밀번호를 입력해 주시길 바랍니다.");
            $("#login-help").addClass("text-danger");
            return;
        }
        
        $.ajax({
            url : "<%=request.getContextPath()%>/login.do",
            type : "POST",
            data : {userId : userId , userPassword : userPassword, saveId : saveId},
            success : function(data){
                if(data == "true"){
                    location.reload();
                    console.log("여긴 오지");
                }   
                else if(data == "false"){
                    $("#login-help").text("아이디 혹은 비밀번호가 알맞지 않습니다.");
                    $("#login-help").addClass("text-danger");
                }
                else if(data == "already"){
                    $("#login-help").text("이미 아이디가 접속중입니다!");
                    $("#login-help").addClass("text-danger");
                }
                else if(data == "oldPwdChangeOrLater"){
                       location.href ="<%=request.getContextPath()%>/sign/OldPwdChangeOrLater.do?userId="+userId;
                       alert("비밀번호 변경한지 90일이 지났습니다. 변경페이지로 이동합니다.");
                    }
            }
        });
    }

LoginCommand.java

​x
package com.brw.command.user;
​
import java.io.IOException;
import java.io.PrintWriter;
​
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
​
import com.brw.command.Command;
import com.brw.dao.DAO;
import com.brw.dto.UserDTO;
import com.brw.listener.SessionListener;
​
/**
 * 작성자 : 김은찬 
 * 내용 : 로그인 시 아이디 저장 및 세션에 유저 정보 저장
 */
public class LoginCommand implements Command {
​
    @Override
    public void execute(HttpServletRequest request, HttpServletResponse response) {
        // TODO Auto-generated method stub
        String userId = request.getParameter("userId");
        String userPassword = request.getParameter("userPassword");
        
        DAO dao = DAO.getInstance();
        int result = dao.loginCheck(userId , userPassword);
                
        try {
            PrintWriter out = response.getWriter();
            
            // 로그인 성공 !
            if(result == 1) {
                // 로그인 성공 했을 경우 쿠키 저장
                String saveId = request.getParameter("saveId");
                
                // (아이디 저장 체크시)쿠키 생성  , 쿠키의 생성은 server  , 보관은 클라
                if(saveId.equals("true")) {
                    Cookie c = new Cookie("saveId", userId);
                    // 쿠키 유효시간 1일 , 
                    c.setMaxAge(24*60*60);
                    c.setPath("/brw");
                    response.addCookie(c);
                }
                // (아이디 저장 체크 X) , 저장된 쿠키 삭제
                else {
                    Cookie c = new Cookie("saveId", userId);
                    c.setMaxAge(0);
                    c.setPath("/brw");
                    response.addCookie(c);
                }
                
                HttpSession session = request.getSession(true);
                
                // 이미 접속한 아이디인지 체크
                // 현재 접속자들 보여주기
                SessionListener.getInstance().printloginUsers();
                
                if(SessionListener.getInstance().isUsing(userId)) {
                    System.out.println("이미 아이디가 접속중 입니다.");
                    out.append("already");
                    return;
                }
                
                // 접속 하고자 하는 아이디의 세션을 담는다
                UserDTO userDTO = new UserDTO();
                userDTO = dao.selectOneUser(userId);
                
                session.setMaxInactiveInterval(60*10);
                session.setAttribute("user", userDTO);
                                
                SessionListener.getInstance().setSession(session, userId);
                
                int changeDate = dao.checkDate(userId);
                System.out.println("$loginCommand() changeDate = "+changeDate);
                if(changeDate > 90)
                    out.append("oldPwdChangeOrLater");
                else
                    out.append("true"); 
            }
            // 로그인 실패 !
            else
                out.append("false");
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
}

SessionListener.java

xxxxxxxxxx
package com.brw.listener;
​
import java.util.Collection;
import java.util.Enumeration;
import java.util.Hashtable;
​
import javax.servlet.http.HttpSession;
import javax.servlet.http.HttpSessionBindingEvent;
import javax.servlet.http.HttpSessionBindingListener;
​
import com.brw.dto.UserDTO;
​
/**
 * 작성자 : 김은찬
 * 내용 : 중복 로그인을 방지하기 위한 세션 리스너
 */
public class SessionListener implements HttpSessionBindingListener{
    
    // 싱글톤 객체를 담을 변수
    private static SessionListener sessionListener = null;
    
    // 로그인한 접속자를 저장한 HashTable (데이터를 해시하여 테이블 내의 주소를 계산하고 데이터를 담는 것 , 해시함수 알고리즘은 나눗셈 법. 자릿수 접기 등등)
    private static Hashtable loginUsers = new Hashtable();
    
    // 싱글톤 처리
    public static synchronized SessionListener getInstance() {
        if(sessionListener == null) {
            sessionListener = new SessionListener();
        }
        return sessionListener;
    }
    
​
    // 세션이 연결시 호출 (해시테이블에 접속자 저장)
    @Override
    public void valueBound(HttpSessionBindingEvent event) {
        // TODO Auto-generated method stub
        loginUsers.put(event.getSession(), event.getName());
        System.out.println(event.getName() + " 로그인 완료");
        System.out.println("현재 접속자 수 : " +  getUserCount());
    }
​
    // 세션이 끊겼을시 호출
    @Override
    public void valueUnbound(HttpSessionBindingEvent event) {
        // TODO Auto-generated method stub
        loginUsers.remove(event.getSession());
        System.out.println(event.getName() + " 로그아웃 완료");
        System.out.println("현재 접속자 수 : " +  getUserCount());
    }
    
    // 입력받은 아이디를 해시테이블에서 삭제
    public void removeSession(String userId) {
        Enumeration e = loginUsers.keys();
        HttpSession session = null;
        while(e.hasMoreElements()){
            session = (HttpSession)e.nextElement();
            if(loginUsers.get(session).equals(userId)){
                //세션이 invalidate될때 HttpSessionBindingListener를 
                //구현하는 클레스의 valueUnbound()함수가 호출된다.
                session.invalidate();
            }
       }
    }
​
   /*
    * 해당 아이디의 동시 사용을 막기위해서 
    * 이미 사용중인 아이디인지를 확인한다.
    */
   public boolean isUsing(String userId){
       return loginUsers.containsValue(userId);
   }
    
   
   /*
    * 로그인을 완료한 사용자의 아이디를 세션에 저장하는 메소드
    */
   public void setSession(HttpSession session, String userId){
       //이순간에 Session Binding이벤트가 일어나는 시점
       //name값으로 userId, value값으로 자기자신(HttpSessionBindingListener를 구현하는 Object)
       session.setAttribute(userId, this);//login에 자기자신을 집어넣는다.
   }
    
    
   /*
     * 입력받은 세션Object로 아이디를 리턴한다.
     * @param session : 접속한 사용자의 session Object
     * @return String : 접속자 아이디
    */
   public String getUserID(HttpSession session){
       return (String)loginUsers.get(session);
   }
    
    
   /*
    * 현재 접속한 총 사용자 수
    * @return int  현재 접속자 수
    */
   public int getUserCount(){
       return loginUsers.size();
   }
    
    
   /*
    * 현재 접속중인 모든 사용자 아이디를 출력
    * @return void
    */
   public void printloginUsers(){
       Enumeration e = loginUsers.keys();
       HttpSession session = null;
       System.out.println("===========================================");
       int i = 0;
       while(e.hasMoreElements()){
           session = (HttpSession)e.nextElement();
           System.out.println((++i) + ". 접속자 : " +  loginUsers.get(session));
       }
       System.out.println("===========================================");
    }
    
   /*
    * 현재 접속중인 모든 사용자리스트를 리턴
    * @return list
    */
   public Collection getUsers(){
       Collection collection = loginUsers.values();
       return collection;
   }
}
​