히앤님의 개발 세상

Tomcat만 주구장창 쓰다보니 Jeus는 잘 모름...

Jeus 를 쓰는 고객사를 방문해서 보다보니 구조가 달라 지원에 어려움을 느꼈다.

정확히 한번 정리할 필요성을 느껴 정리해보는 글...

Tomcat과 Jeus는 둘 다 웹 애플리케이션 서버(WAS, Web Application Server)이지만, 기능과 역할에서 차이가 있다.
Tomcat은 경량 WAS이고, Jeus는 엔터프라이즈급 WAS이다.

📌 1. 기본 개요

📌 2. 기술적인 차이

📌 3. 실행 구조 차이

✔ Tomcat 실행 구조

/home/tomcat/
 ├── bin/           # 실행 파일 (startup.sh, shutdown.sh)
 ├── conf/          # 설정 파일 (server.xml 등)
 ├── logs/          # 로그 파일
 ├── webapps/       # 배포된 웹 애플리케이션 (WAR, JSP, HTML 파일 위치)
 ├── work/          # 실행 중인 애플리케이션 캐시
 ├── temp/          # 임시 파일

📌 웹 애플리케이션 배포 방식

• /webapps/ROOT/에 index.html, index.jsp 등을 배치하면 자동 실행됨
• 브라우저에서 http://localhost:8080/로 접속 가능

✔ Jeus  실행 구조

/home/jeus/
 ├── bin/            # 실행 파일 (startServer.sh, stopServer.sh 등)
 ├── config/         # 설정 파일
 ├── domains/        # 도메인별 설정 및 애플리케이션 배포
 │   ├── mydomain/
 │   │   ├── applications/  # 웹 애플리케이션 배포 폴더 (WAR, JSP, HTML 파일 위치)
 │   │   ├── servers/       # 실행 중인 서버 관리
 │   │   ├── config/        # 도메인별 설정 파일
 ├── lib/            # 라이브러리
 ├── logs/           # 로그 파일
 ├── deploy/         # 자동 배포 폴더 (WAR, EAR 파일 배치 가능)

📌 웹 애플리케이션 배포 방식

• /domains/{도메인}/applications/ROOT/에 index.html, index.jsp 등을 배치
• 브라우저에서 http://localhost:8080/로 접속 가능

📌 4. 주요 차이점 정리

📌 5. 언제 Tomcat을 쓰고, 언제 Jeus를 써야 할까?

✔ Tomcat이 적합한 경우
✅ 빠르게 웹 서비스를 개발하고 배포해야 할 때
✅ JSP, Servlet 정도만 사용하고, 트랜잭션, EJB 등의 기능이 필요 없을 때
✅ 비용 절감이 중요한 프로젝트 (오픈소스, 무료 사용 가능)
✅ 단일 서버에서 운영하는 소규모 웹 서비스

✔ Jeus가 적합한 경우
✅ 엔터프라이즈 환경에서 안정적으로 운영해야 할 때
✅ 대규모 트랜잭션 처리, 복잡한 비즈니스 로직이 필요한 경우
✅ 보안 및 고가용성이 중요한 금융, 공공기관, 대기업 환경
✅ 여러 대의 서버를 클러스터링해서 운영해야 할 때

✅ Tomcat에서 HTML/JS 파일 실행 방식

Tomcat에서는 webapps/ROOT/ 폴더에 HTML/JS 파일을 넣고, startup.sh를 실행하면 브라우저에서 확인할 수 있다.

cd /home/tomcat/bin ./startup.sh

📌 파일 저장 위치

/home/tomcat/webapps/ROOT/index.html /home/tomcat/webapps/ROOT/js/script.js

📌 브라우저에서 실행 확인

http://localhost:8080/index.html

✅ Jeus에서 HTML/JS 파일 실행 방식

Jeus에서는 Tomcat과 폴더 구조와 실행 방식이 다르다.
Jeus는 보통 WAR 파일을 배포하는 방식을 사용하지만, 정적 파일을 직접 배포할 수도 있다.

2️⃣ HTML/JS 파일 저장 위치

📌 Jeus에서 정적 파일을 직접 넣으려면 다음 경로를 사용해야 한다.
(Tomcat의 webapps/ROOT 역할)

/home/jeus/domains/mydomain/applications/ROOT/

📌 예제 파일 위치

/home/jeus/domains/mydomain/applications/ROOT/index.html
/home/jeus/domains/mydomain/applications/ROOT/js/script.js

📌 브라우저에서 실행 확인

http://localhost:8080/index.html

✅ Jeus 서버 실행 방법

Jeus는 Tomcat의 startup.sh처럼 startServer.sh를 사용한다.

1️⃣ Jeus 실행

cd /home/jeus/bin
./startServer.sh mydomain server1

🔹 mydomain → 실행할 도메인 이름
🔹 server1 → 실행할 서버 인스턴스

2️⃣ Jeus 중지

cd /home/jeus/bin 
./stopServer.sh mydomain server1

✅ 최종 정리

스프레드 연산자(...)는 배열, 객체, 문자열 등의 요소를 개별적으로 펼쳐서 사용할 수 있도록 해주는 JavaScript 연산자.

FullCalendar 사용할 때 아래처럼 eventSources에 일정을 배열로 넣어야하는데,

eventSources: [
    {
        id: "대한민국 공휴일",
        googleCalendarId: "ko.south_korea#holiday@group.v.calendar.google.com",
        color: "#FF0000",
        editable: false
    },
    {
        id: "일정2",
        color: "#FF0000",
        editable: false
    },
    ...
]

특정 eventList를 Map형태로 뽑아 전체를 넣기 위해 아래같이 사용함.

eventSources: [
    eventList.map(event => ({
        id: event.id,
        groupId: event.id,
        events: [],
        backgroundColor: event.bgColor,
    })), // ❌ 이렇게 하면 안됨
    {
        id: "대한민국 공휴일",
        googleCalendarId: "ko.south_korea#holiday@group.v.calendar.google.com",
        color: "#FF0000",
        editable: false
    }
]

문제는 eventList.map(...)이 이미 배열을 반환하기 때문에 이중배열([ [...mappedEvents], {...} ]) 형태가 되어 추가되지 않음.

이럴 때 사용하는게 스프레드 연산자!

   //이렇게 사용해야 한다.  
   eventSources: [
        ...eventList.map(event => ({ // 기본 이벤트 항목 추가
            id: event.id,
            groupId: event.id,
            events: [],
            backgroundColor: event.bgColor,
        })),
        {
            id: "대한민국 공휴일", // 대한민국 공휴일 추가
            googleCalendarId: "ko.south_korea#holiday@group.v.calendar.google.com",
            color: "#FF0000",
            editable: false
        }
    ],

📌 1. 배열에서의 스프레드 연산자 활용

배열을 복사하거나, 합칠 때 사용됩니다.

✅ 예제 1: 배열 복사 (얕은 복사)

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // arr1을 복사

console.log(arr2); // [1, 2, 3]

arr2 = [...arr1]를 사용하면 arr1의 개별 요소가 펼쳐져서 새로운 배열이 생성됩니다.

✅ 예제 2: 배열 합치기

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const merged = [...arr1, ...arr2]; // 두 배열을 합침

console.log(merged); // [1, 2, 3, 4, 5, 6]

arr1과 arr2의 요소들이 개별적으로 풀려서 하나의 배열로 합쳐짐.

✅  예제 3: 배열의 중첩 구조 해결

const arr1 = [1, 2, 3];
const arr2 = [arr1, 4, 5];

console.log(arr2);
// [[1, 2, 3], 4, 5] <-- 배열이 중첩됨

const arr3 = [...arr1, 4, 5]; // 스프레드 연산자로 펼침

console.log(arr3);
// [1, 2, 3, 4, 5] <-- 중첩되지 않고 개별 요소가 추가됨

스프레드 연산자를 사용하면 배열의 중첩 없이 개별 요소로 추가할 수 있음.

📌 2. 객체에서의 스프레드 연산자 활용

객체를 복사하거나, 속성을 병합할 때 유용합니다.

✅ 예제 4: 객체 복사

const obj1 = { name: "Alice", age: 25 };
const obj2 = { ...obj1 }; // obj1을 복사

console.log(obj2); // { name: "Alice", age: 25 }

기존 객체를 새로운 객체로 복사하는 방법.

✅ 예제 5: 객체 속성 병합

const obj1 = { name: "Alice", age: 25 };
const obj2 = { job: "Developer", city: "Seoul" };

const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj);
// { name: "Alice", age: 25, job: "Developer", city: "Seoul" }

부트스트랩으로 만들어진 템플릿에서 modal을 띄우기 위해 아래처럼 style.display = "block"을  사용했다.

document.getElementById('event-modal').style.display = "block";

근데 안나오는거...;; 왜지...

확인해보니 부트스트랩의 modal은 기존 HTML/CSS 모달과는 다르게 Javascript로 동작하기 때문에 사용 방법이 다르다.

HTML의 display: block; 속성만으로는 제대로 표시되지 않는 이유도 부트스트랩 modal이 내부적으로 추가적인 조작을 하기 때문.

var eventModal = new bootstrap.Modal(document.getElementById("event-modal"));
eventModal.show();

이렇게 사용해야함!

✅ 부트스트랩 모달의 주요 차이점

부트스트랩 modal 부분을 보면 아래와 같이 class 가 설정되어있다.

<div class="modal fade" id="event-modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
        ...

1) 애니메이션 효과 (fade 클래스) 

부트스트랩 모달은 기본적으로 fade 클래스를 사용하여 부드러운 애니메이션 효과가 적용됨. 

2) 배경 비활성화 (.modal-backdrop)

모달이 열릴 때 자동으로 <div class="modal-backdrop"> 요소가 생성됨.

이를 통해 배경 클릭 시 닫히는 기능을 제공함.

3) 키보드 ESC 키 닫기 기능

esc 키를 누르면 모달이 닫히도록 기본 설정되어 있음.

keyboard: false 옵션을 사용하면 ESC 키로 닫히는 기능을 비활성화할 수 있음.

4) ARIA 접근성 지원
role="dialog"와 aria-labelledby="modal-title" 등의 속성이 자동으로 추가되어 접근성이 향상됨.

5) JavaScript API 제공
.show(), .hide(), .toggle() 등의 메서드를 제공하여 동적으로 모달을 조작할 수 있음.

<button class="btn btn-primary w-100" id="btn-new-event">Create New Event</button>

근데 사실 JavaScript 방식 (onclick 사용) 을 안해도 된다.

부트스트랩에서는 data-bs-toggle="modal"과 data-bs-target="#모달ID"를 버튼에 추가하면 자동으로 모달을 띄울 수 있음!

<button class="btn btn-primary w-100" id="btn-new-event" data-bs-toggle="modal" data-bs-target="#event-modal">Create New Event</button>

비슷하게 모달 안에 있는 닫힘버튼도 data-bs-dismiss="modal" 설정해서 사용 가능.

 aria-hidden="true"  는 접근성 API 차단 (가상 커서로 탐색 x)

<button type="button" class="btn-close" data-bs-dismiss="modal"aria-hidden="true"></button>

✅ 부트스트랩 모달에 항목 저장해서 리스트에 추가하기

열고 닫는건 했으니 저장처리 해주고 모달을 닫아주면 된다.

저장버튼이 기존에 <button type="submit"> 이었는데 submit은 폼을 제출하면서 페이지를 새로고침하니까 type:"button"으로 변경해줌.

pc 변경한 뒤 gitlab에서 새로 프로젝트를 clone 하는데 아래 오류메시지 발생.

계정이 틀린건 아니다.

생각해보니 PC를 변경하면서 gitlab에 등록된 SSH키가 기존과 맞지 않을 거라는게 생각남.

확인 방법은 아래와 같다.

1. 로컬 SSH 키 확인

git bash에서 확인한다.

ls ~/.ssh/id_rsa.pub

파일 있으면 SSH키가 있는 것.

나는 

ls: cannot access '/c/Users/사용자이름/.ssh/id_rsa.pub': No such file or directory

이렇게 떴다. 없다는 소리임.ㅋㅋㅋ

2. SSH 키 생성 (없다면 새로 생성)

ssh-keygen -t rsa -b 4096 -C "email@example.com"

이렇게 해서 생성하면 몇가지 문구가 뜨는데

Enter file in which to save the key (/c/Users/사용자 이름/.ssh/id_rsa):

질문이 나오면 그냥 Enter하면 된다. 암호 설정하는건데 암호(passphrase)는 비워도 되고 설정해도 됨.

난 그냥 Enter로 비우겠다.

Enter passphrase (empty for no passphrase):
Enter same passphrase again:

전부 Enter 치면 비워짐.

이제 다시 1번 하면 파일이 있다고 나올꺼임.

3. GitLab에 SSH 키 등록

파일경로 들어가면 그 파일 있어서 메모장으로 열어서 등록해도 되지만 그냥 git bash로 마무리하자.

clip < ~/.ssh/id_rsa.pub

이렇게하면 클립보드에 SSH 키가 복사됨.

이제 Gitlab으로 가서

Settings → SSH Keys

새 키 추가 (+Add SSH Key) 클릭

복사한 키를 붙여넣고 등록 (Add key)

4. 잘 연결됐는지 확인

gitlab 주소는 git@gitlab.주소.com 이렇게 생김.

git bash에 아래와 같이 입력

ssh -T git@gitlab.이름.com

Welcome to GitLab, @gitlab 이름!

이렇게 나오면 정상연결 된 것.

gitlab에 있는 프로젝트 clone이 안되면 참고할 것.

▼ 처음 로컬 SSH 키 등록했을 때의 포스팅