JeroCaller

쌓여만 가는 빈 캔

4 분 소요

톰캣 서버 설치 및 구축

먼저 JDK와 Eclipse가 설치되어 있어야 한다. JDK 설치 과정은 개발 환경 페이지를, Eclipse 설치 과정은 이클립스 설치 및 간단한 사용법 페이지를 참고. 여기서는 이미 JDK 및 Eclipse가 설치되어 있다고 가정하고 설명을 진행할 것이다.

웹 앱을 만들어보려면 아무래도 웹 서버가 필요할 것이다. 여기에는 여러 제품이 있는데, 그 중 무료로 사용할 수 있는 톰캣(Tomcat)을 설치해보겠다.

톰캣 설치법

  1. 구글에 “톰캣”이라 치면 나오는 “Apache Tomcat” 사이트에 접속한다.

    1.PNG

  2. 다음과 같이 해당 사이트가 나오는데, 왼쪽 사이드 메뉴의 [Download] → [Tomcat 9]를 누른다. (사실 다른 버전은 사용해본 적이 없어서 잘 모르겠다)

    2.PNG

  3. 스크롤을 조금만 내리다보면 [Binary Distributions] 챕터가 나오는데, 여기서 [Core] 부분에서 자신의 운영체제 상황에 맞는 zip 파일을 다운로드 받으면 된다. 필자는 [64-bit Windows zip]를 택했다. (옆에 pgp, sha512를 실수로 클릭하지 않는다. 전혀 다른 페이지가 나오더라)

    3.PNG

  4. 다운로드 받은 zip파일을 원하는 곳에 압축을 풀면 된다. 필자의 경우 그냥 C 드라이브에 풀었다. 이러면 톰캣 설치가 완료된 것이다.

이제 설치된 톰캣을 이클립스에 연동해야 본격적으로 웹 서버를 사용할 수 있다.

톰캣을 이클립스에 연동하는 방법

  1. 이클립스를 킨다. 아래 쪽에 있는 창에서 [Servers] 탭을 누르면 다음 사진과 같이 링크가 하나 뜨는데 이를 클릭한다.

    4.PNG

  2. 그러면 새로운 창이 뜨는데, [Select the server type:] 라벨 아래에 있는 목록 중 [Apache] 폴더 클릭 후 나오는 목록 중 앞서 설치한 [Tomcat v9.0 Server]를 클릭하여 선택한다. 여기서는 웹 앱을 자신의 컴퓨터에서 실행해볼 것이기에 서버 호스트 이름은 [localhost] 그대로 나눴다. 다 되었으면 [Next] 버튼을 누른다.

    5.PNG

    6.PNG

  3. 다음의 창이 나온다면 다른 것은 그대로 놔두고, 톰캣이 설치된 경로를 지정해주면 된다. 다 되었으면 [Finish] 버튼을 누른다.

    7.PNG

  4. 앞서 봤던 [Servers] 창으로 돌아오면 다음의 사진처럼 보일 것이다. [Tomcat v9.0 Server at localhost [Stopped, Republish]를 마우스로 선택한 후, 오른쪽에 있는 재생 버튼과 똑같이 생긴 서버 구동 버튼을 클릭하면 서버가 구동된다. 여기서는 로컬 컴퓨터 내에서 실행될 것이다.

    8.PNG

  5. 만약 다음과 같이 방화벽 관련 창이 뜨면 “액세스 허용” 버튼을 눌러 서버 기능 차단을 해제하도록 하자.

    9.PNG

  6. [Console] 창을 보면 다음과 같이 여러 로그들이 출력되는데, 이는 서버가 정상적으로 작동하고 있다는 뜻이다.

    10.PNG

이로서 이클립스에 톰캣 서버를 연동시키는 데 성공하였다. 이번에는 아주 간단한 웹 앱을 만들어 이를 로컬 서버에서 실행시켜보도록 해보자.

웹 프로젝트 생성

  1. [File] → [New] → [Dynamic Web Project]를 클릭한다. 웹 앱은 동적 웹이므로 이와 같이 선택한 것이다.

    20240818_15371294.png

  2. 그러면 다음과 같은 창이 뜰 것이다. [Project name]에 프로젝트 이름을 원하는대로 입력한다. 필자는 심플하게 “MyFirstWebApp”이라고 하였다. [Target runtime]에는 앞서 설치한 [Apache Tomcat v9.0]으로 설정하면 된다. [Dynamic web module version] 에서는 버전을 3.0 미만으로 설정한다. 여기서는 2.5로 설정하였다. 웹 앱에서 중요한 환경 설정 파일인 web.xml 파일이 3.0 이상의 버전부터는 자동으로 제공하지 않기 때문이다. 다 완료하였으면 [Finish] 버튼을 누른다.

    12.PNG

  3. 그러면 다음과 같은 구조의 [MyFirstWebApp] 프로젝트 폴더가 생성된다. 여기서는 주로 src/main/java와 src/main/webapp 폴더가 자주 쓰일 것이다. src/main/java 폴더에는 서블릿과 같은 자바 클래스 소스 코드 파일(.java)들이 작성되어 보관될 곳이다. 그리고 src/main/webapp 폴더에는 HTML, CSS, JS, 이미지 및 JSP 파일들이 작성되는 곳이다.

    13.PNG

이로서 웹 프로젝트 폴더 생성에 성공하였다. 참고로 방금 만든 폴더 아래에 [Servers] 폴더는 톰캣 서버와 연동 과정에서 자동으로 생성된 프로젝트이며, 여기서 직접 만들어본 웹 프로젝트 폴더(MyFirstWebApp)와는 직접적인 관련은 없다고 한다.

이제 간단한 웹 페이지를 작성하여 로컬 서버에 띄워보자.

웹 페이지 작성 및 로컬 서버에서 구동시켜보기

웹 페이지 작성

  1. 웹 페이지를 구성하는 가장 기본적인 파일인 HTML을 작성해볼 것이다. 앞서 언급했듯 이러한 파일들은 src/main/webapp 폴더에서 작성된다. webapp 폴더 선택 후 마우스 우클릭 → [New] → [HTML File]을 클릭한다.

    14.png

  2. 새 창이 뜰 때, 아래의 [File name]에 새로 생성할 HTML 파일의 이름을 지어준다. 여기선 로그인 기능을 구현해볼 것이므로 login.html이라고 하였다. 그 후 [Next >] 버튼을 누른다.

    15.PNG

  3. 다음 창에서는 원하는 HTML 템플릿을 선택하는 곳인데, 사실 원하는 HTML 버전을 선택하면 된다. 여기서는 그냥 [HTML file (5)]을 선택하여 HTML5 버전으로 작성해보겠다.

    16.PNG

  4. 그러면 다음과 같이 login.html 파일이 webapp 폴더에 추가된다.

    17.PNG

  5. 해당 파일 안에 다음과 같이 작성해보았다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>JeroCaller의 홈페이지 로그인</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="container">
	    <h1>Welcome!</h1>
        <img src="./images/jerocaller.jpg" width="50%">
	    <form action="#" method="post">
	    	<fieldset>
	    		<legend>로그인</legend>
	    		<label for="id">아이디 : </label> 
                <input type="text" id="id" /> 
	    		<label for="password">비밀번호 : </label>
                <input type="password" id="password" />
                <input type="submit" value="로그인" />
	    	</fieldset>
	    </form>
    </div>
</body>
</html>

예제 1-1. login.html

그리고 이와 연결될 css 파일 및 이미지 파일을 다음과 같이 준비하였다. 이미지는 아무거나 준비하자.

18.PNG

style.css 내부에는 다음과 같이 작성하였다.

@charset "UTF-8";
#container {
    width: 40rem;
    margin: 0 auto;
    text-align: center;
}

form {
    width: 20rem;
    margin: 0 auto;
}

#container img {
    margin: 2rem;
}

form fieldset {
    border-radius: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
        "lid iid"
        "lpw pw"
        "sbm sbm"
    ;
    gap: 1rem 1rem;
}

label[for="id"] {
    grid-area: lid;
}

label[for="password"] {
    grid-area: lpw;
}

input[id="id"] {
    grid-area: iid;
}

input[id="password"] {
    grid-area: pw;
}

input[type="submit"] {
    grid-area: sbm;
}

예제 1-2. style.css

이로서 웹 페이지 작성은 끝이 났다. 이제 작성한 웹 페이지를 로컬 서버를 구동시켜 띄워보자.

웹 앱 실행

  1. 우선 실행하고자 하는 프로젝트를 이클립스에 연계된 톰캣 서버에 등록해야 한다. [Servers] 창에서 만약 이미 로컬 서버가 구동 중이라면 이를 중지시킨다. 해당 창에서 [Tomcat v9.0 Server at localhost [Stopped]] 글을 클릭한 후, 마우스 우클릭 → [Add and Remove]를 클릭한다.

    19.png

  2. 새로 뜨는 다음 창에서 등록하길 원하는 프로젝트를 오른쪽 목록으로 이동시킨다. 여기서는 “MyFirstWebApp”을 이동시켰다. 그 후 [Finish] 버튼을 누른다.

    20.PNG

  3. 다시 [Servers] 창에 돌아와 서버를 실행시킨다. 그 후 크롬과 같은 웹 브라우저의 url 창에 “http://localhost:8080/MyFirstWebApp/login.html”을 입력한다. 그러면 다음과 같이 웹 브라우저에 로그인 페이지가 뜬다. 이렇게 url을 입력하는 행위 자체가 해당 url의 html 페이지를 달라는 요청을 서버에 전송하는 행위이다. 아래와 같이 떴다면 서버가 그에 맞는 응답을 보내 해당 HTML 파일을 브라우저로 전송한 것이라 보면 된다.

    21.PNG

이렇게 하여 간단하게 만든 웹 페이지를 로컬 서버에 띄우고, 이를 웹 브라우저에서 요청하여 해당 웹 페이지를 브라우저에 나타내는 방법을 살펴보았다. 참고로 앞서 사용한 url을 다시 보면…

http://localhost:8080/MyFirstWebApp/login.html

여기서 호스트 이름과 포트 번호는 [Servers] 콘솔창의 [Tomcat v9.0 Server at localhost …]을 더블 클릭하면 나오는 창에서 확인할 수 있다.

22.PNG

그 뒤에는 차례대로 프로젝트 폴더명과 src/main/webapp 내부의 파일명을 입력하면 된다.

다음에 이어서 작성할 페이지들에서 위에서 작성한 웹 프로젝트가 계속 쓰일 예정이니 참고.

References

[1] 채규태, “채쌤의 Servlet&JSP 프로그래밍 핵심”, (쌤즈, 2023)

This content is licensed under CC BY-NC 4.0

댓글남기기

참고