nodemon 전역 설치

기능: 서버 자동 재적용
설치: npm install nodemon -g
실행: nodemon 파일이름

• 주의 : powershell에서는 실행 불가능

채팅방 구색 갖추기

자바스크립트의 태그 추가, 속성 추가 구문을 이용하여
각 이벤트 발생시 태그를 추가하는 방식으로 채팅이 쌓이는 기능을 구현할 것임

클래스명 추가 팁

class 속성에는 뛰어쓰기로 구분하여 여러 클래스이름을 삽입할 수 있다.
그럴 경우 setAttribute로는 어렵다.
태그.classList.add("추가할 클래스명") 을 이용하면 추가가 가능하다.

구현 완료

var socket = io();
var name;
socket.on("connect", function(){
    // name을 전역에 선언했는데 편집기에서 경고로 줄을 긋는 이유
    // window.name과 혼동이 가능한 변수명이라서 그렇다.
    // 따라서 이런 애매하고 간단한 변수명을 특히 전역에서 사용하는 것은 지양해야한다.
    // 이렇게 하면 코드의 가독성을 높이고, 실수로 전역 변수나 중요한 내장 프로퍼티를 덮어쓰는 일을 방지할 수 있다.
    name = prompt("반값습니다. 이름을 입력하세요", "");
    if(!name)
        name = "익명";
    // console.log(name);
    socket.emit("newUser", name);
})

socket.on("update", function(data){
    // console.log(`${name}: ${message}`);
    var chat = document.getElementById("chat");
    var message = document.createElement("div");
    var node = document.createTextNode(`${data.name}: ${data.message}`);
    var className="";
    switch (data.type) {
        case "connect":
            className="connect";
            break;
        case "connect":
            className="disconnect";
            break;
        case "message":
            className="other"
            break;
        default:
            break;
    }

    message.classList.add(className);
    message.appendChild(node);
    chat.appendChild(message);

})

// socket.on("disconnect", function(data){
//     const {type, name, message} = data;
//     console.log(`${name}: ${message}`);
// })

function send(){
    // text 파싱 및 이벤트 전송
    var message = document.getElementById("test").value;
    document.getElementById("test").value = "";
    socket.emit("message", {type: "message", message: message});


    // 자신 페이지에 메세지 출력 태그 추가
    var chat = document.getElementById("chat"); //

    var messageTag = document.createElement("div"); // 메세지 담을 태그
    var node = document.createTextNode(`${name}: ${message}`); // 텍스트 노드
    var className = "me"; // 클래스 이름

    console.log(messageTag.classList);
    messageTag.classList.add(className); // 클래스 추가
    // console.log(messageTag.classList);
    // messageTag.classList.add("className"); // 클래스 추가
    // console.log(messageTag.classList);
    messageTag.appendChild(node); // 텍스트 추가
    chat.appendChild(messageTag); // 태그 추가
    
}

배포

servlet/jsp 배포

1. tomcat/webapp이 배포파일 위치
2. tomcat/conf에 server.xml이 서버설정파일
3. tomcat/bin에 startup이 실행파일

서버 실행/중지

cmd에서 파일경로로 이동후 startup/shutdown 명령어로 서버 실행/중지

앞으로는 eclipse로 돌리는 것이 아니라 tomcat을 단독으로 사용할 것이다. 고로 server.xml을 직접 수정할 수 있어야한다.

주의사항: 톰켓서버 deploy path가 제대로 설정되어있지 않으면 cmd에서 실행시 프로젝트가 제대로 실행되지 않는다. 이 경우 eclipse내에서 톰켓서버 삭제후 재생성-deploy path를 설정해줘야한다.

배포 : 별도로 톰켓 설치 -> 배포파일을 넣어서 -> 단독으로 실행하는 형식

war/jar

Spring 배포

spring mvc 프로젝트는 무조건 war로 묶어서 배포한다.
배포하기 전에 pom.xml, build path 점검이 필요

war : jsp 포함 파일 => 별도의 tomcat 서버 필요, 단독실행 안됨
jar : jsp 파일 없음, 타임리프 구현 => 별도 tomcat 필요 없음, jar 파일 단독 실행됨

오류 나는 큰 이유 2가지

1. 포트 충돌
2. xml 잘못 설정

webapp/host-manager, manager
context.xml 접근권한 주석처리 할 예정이라

배포하기

eclipse 프로젝트 -> 우클릭 ->export -destiny를 배포할 톰켓 파일의 webapp으로 잡아주면 됨

프로젝트 시작 주소 변경법

톰켓/webapp 의 war파일 실행 전에 파일 프로젝트명을 변경하고 서버 실행

배포 실습

1. 프로젝트 import
2. 프로젝트 test
3. tomcat 설치 startup 테스트
4. 프로젝트 war export
5. tomcat 실행 프로젝트 테스트

aws에 서버 구축하는 경우

3,4,5를 aws서버에서 진행

ftp를 이용하여 로컬pc에서 <=> aws 서버에 war 파일을 옮길 수 있음.
ftp : 파일만 주고받을 수 있는 프로토콜

aws ip주소로 접근

Spring 배포

spring mvc 프로젝트는 무조건 war로 묶어서 배포한다.
배포하기 전에 pom.xml, build path 점검이 필요
Spring mvc는 프로젝트 주소가 pom.xml에서 볼 수 있으며
server.xml에 path로 등록해야 war 파일이 실행된다.

주소등록이 따로 없으면 폴더명이 프로젝트 주소가 된다.

path 등록

server.xml에서 설정
아래와 같이 반드시 Host name 아래 부분에 path가 등록되어야한다.

<Host name="localhost"  appBase="webapps" unpackWARs="true" autoDeploy="true">
<Context path="/myTest" docBase="Spring_MVC_myBatis" reloadable="true" />

실습