Tomcat다운로드&환경설정_HTML_국비_DAY40

지난 시간까지 학습했던 JDBC의 핵심은 버튼 혹은 스윙 프로그램이 아닙니다. 

DB모델을 모듈화는 과정이 중요합니다. 작업을 하는 언어만 자바에서 html로 바뀔 뿐입니다. Dao, Dbservice, vo의 역할과 dao가 sql명령을 처리하는 과정을 정리해서 이해하고 공부해야 합니다. 모듈화 된 기능에 대한 이해와 생각이 필요합니다.

 

지금까지는 자바와 DB를 연동하여 개인적으로 사용할 수 있는 데스크롭 프로그램을 해왔다면, 앞으로는 불특정 다수의 사용자가 브라우저의 주소만 알고 있다면 누구나 공용으로 이용할 수 있는 웹서버를 사용하여 웹 응요 프로그램을 학습하겠습니다. 

기본적인 웹서버와 사용자의 상호작용은 다음 그림과 같습니다.

기본적인 웹 애플리케이션을 만들기 위해서 웹 서버를 구성하는 HTTP Server와 WAS의 개념을 가볍게 짚어보겠습니다.  

기본적으로 웹 서버는 평상시에는 연결이 끊어진 상태로 상시 대기 중입니다. 이때 사용자가 HTTP 프로토콜을 사용하여 정보를 요청하면 웹 서버는 사용자와 연결하여 요청하는 정보를 전달하면서 요청에 응답을 하고 다시 연결이 끊어집니다.

[HTTP Server]

• 사용자의 요청을 받는 서버입니다. 
• HTTP프로토콜을 사용한 사용자의 요청에 대하여 대부분 HTML 문서를 반환하면서 응답합니다. 
• HTTP 서버는 이미 만들어진 정적 콘텐츠(HTML, 이미지, 동영상 등)를 제공하기 때문에 사용자의 요구사항을 반영하여 수정하는 연산능력이 없습니다.
• 사용자는 URL에 자신이 얻고자 하는 콘텐츠가 저장된 주소를 도메인 네임과 연결 포트와 함께 보내면서 요청을 하게 되는데, HTTP 서버가 이 콘텐츠를 전달해주면서 요청에 응답합니다. URL의 예를 들면 다음과 같습니다.
• HTTP Server는 사용자가 같은 URL 주소를 반복적으로 보내면서 트래픽을 발생시키면, 사용자의 요청을 필터링해서 받는 필터링 기능이 있습니다.
• 이때 사용자가 제공받고 싶어 하는 콘텐츠에 추가적인 요구사항이 있다면 HTTP Server는 연산능력이 없기 때문에 응답할 수 없으므로, WAS에 연산을 요청합니다.

[Web Application Server]

• 사용자가 정적인 콘텐츠에서 추가적인 정보가 필요하여 연산(수정)이 필요한 요청을 한다면 HTTPServer는 WAS에게 사용자의 요구사항을 만족하는 html문서를 만들어달라고 요청을 합니다.
• HTTP 서버에게 요청을 받으면 서버에서 실행하는 자바 서비스 객체인 servelet(server + let)이 런타임 시간 동안 사용자의 요구사항을 반영하여 동적으로 html을 만들어서 전달합니다. 

[정리]

1. 이미 만들어진 정적인 콘텐츠를 제공만 함 -> HTTP Server
2. 사용자의 요구에 맞춰 동적으로 콘텐츠를 제작해서 제공함 -> WAS

 

위 둘 서버의 공통점은 사용자가 요청하는 정보 제공입니다. 그로 인해 사용자가 보기 좋게 정보를 구성하여 제공해야 하는데 이럴 때 사용하는 언어들로 다음과 같은 언어들이 있습니다. HTTP에서는 연산능력이 없지만 이미 만들어진 html문서를 이해할 줄 알아야 하고, WAS에서는 직접 html을 작성하기 때문에 다음 언어들의 기본 문법을 학습해야 합니다. 

클라이언트에서 동작되는 언어 

• html : 태그를 이용하여 사용하는 마크업 언어
• css : 브라우저의 표시될 html의 데이터의 모양을 꾸며주는 언어. 미리 만들어서 제공하므로 정적인 언어이다.
• javascript : 브라우저를 제어하는 제어용 언어로 브라우저 내의 동작 및 이벤트를 구성하는 언어이다. 프로그램 런타임 시에 동적으로 제어 가능
• jquery : javascript를 더 간결하게 사용하기 위해 사용하는 문법(라이브러리)
• bootstrap : jquery를 더 편하게 사용할 수 있도록 도와주는 라이브러리 + 반응형 웹
• ajax : 자바스크립트 내부에서 서버와 비동기로 통신하는 비동기 통신기술

 

[Apache Tomcat 다운&환경설정&테스트]

apache.org에서 다운로드하기

※ 주의사항 ※

jdk버전에 맞도록 tomcat을 다운로드하여야 합니다. 그렇지 않으면 jdk와 tomcat의 버전이 호환되지 않는 몇몇 부분으로 인해 곳곳에서 에러가 발생할 수 있습니다. 필자가 사용하는 버전은 jdk1.8이므로 안정적으로 호환할 수 있도록  tomcat 8.5.78 버전을 다운로드하도록 하겠습니다.  다운로드 파일 중 zip버전을 다운로드하도록 하겠습니다.  

[과정]

1. 프로그램을 다운로드하여서 압축을 해제한다.
2. 파일을 C:\에 위치시킵니다. 설치경로를 쉽게 설정해주기 위함입니다. 
3. CATALINA_HOME=C:\apache-tomcat-8.5.78
4. 시스템 환경 변수 편집 -> 환경변수 (이때, JDK의 설치경로가 명시되어 있지 않다면 이 또한 반드시 해줍니다.)
5. 사용자 변수에 3의 경로를 저장하고 추가합니다.
6. 톰캣 프로그램 환경설정(톰캣 설치경로\conf) - 해당 설정은 이클립스에만 적용되는 설정으로 다른 프로그램에는 영향을 끼치지 않습니다.
   1. 인코딩/port 설정(server.xml)
      1. 오라클 웹 서비스가 8080 포트를 사용하고 있으므로 포트번호를 바꾸어서 설정해주어야 합니다. 
      2. server.xml 파일을 열어서 필자는 editplus를 사용해서 편집하였습니다. <Connector port="8080" protocol="HTTP/1.1" ~~ /> 이 부분을 찾아서 수정할 포트번호를 9090으로 수정해줍니다. 
      3. port설정 앞부분에 URIEncoding="utf-8"과 같은 명령을 추가하여 인코딩을 맞춰줍니다. 인코딩을 맞춰주지 않으면 서버상에서 호환되는 문서들이 제대로 출력되지 않을 수 있습니다.
   2. context 권한 설정(context.xml)
      1. <Context>를 <Context privileged="true" reloadable="true">이렇게 수정 작업을 해줍니다.
7. 제대로 실행되는지 테스트해보기(startup.bat/shutdown.bat)
   1. alt키를 누른 상태로 바탕화면에 끌고 와서 바로가기 아이콘을 만들어 줍니다. 
   2. startup.bat파일을 실행합니다. 새로운 포트를 개설하는 것이므로 방화벽 설정 메시지가 나오는데 액세스 허용을 해줍니다.
   3. 테스트에 성공하면 tomcat 쉘 프로그래밍에 "catalina.startup.Catalina.start Server startup in 2709 ms" 명령이 나타납니다. 
   4. 혹여나 액세스 허용 확인 메시지가 나오지 않았다면 환경설정이 잘못된 것이므로 다음을 확인해봅니다.
      1. 톰캣 설치 파일 -> logs -> catalina 로그파일을 열어보면 에러 내용을 확인할 수 있습니다. 
      2. cmd에서 "echo % CATALINA_HOME%을 확인하여 경로 설정이 정확한지 확인합니다.

연결이 성공적으로 수행되었다면 html 파일을 만들어보고 C:\apache-tomcat-8.5.78\webapps\ROOT위치에 파일을 저장한 다음, htttp://localhost:9090/myhome.html을 입력해서 직접 만든 html파일을 확인할 수 있습니다. 

[형식]

• URL : 요청 자원 저장 위치
• http://ip(or DNS):port/~~. html
• htttp://localhost:9090/myhome.html

[연결 성공]

[파일 실행]

 

지금부터 이클립스로 서버를 구동시키기 위한 기본 작업을 설정해주겠습니다.

1. 인코딩 설정을 합니다. window -> preference ->  web -> html, css, jsp files의 인코딩을 utf-8로 세팅

2. servers에서 new 서버를 해줘야 합니다 설치한 톰캣의 버전을 설정하고, 톰캣이 저장된 경로를 지정해줍니다

서버를 생성하면 파일이 하나 생기는데 여기에 위에서 환경 설정한 xml파일이 존재합니다. 이는 원본을 복사한 사본으로 이클립스에서 수정해도 원본은 변경되지 않습니다. 원본 파일의 경로는  C:\apache-tomcat-8.5.78\conf입니다.

3. javaEE에서 다이나믹 프로젝트를 생성합니다.

설정은 기본값으로 합니다. 다이나믹 웹 프로젝트에 파일을 추가할 때, 파일을 저장하는 특정 위치가 정해져 있기 때문에 주의해서 파일을 저장해야 합니다. 파일에 대한 정보는 다음과 같습니다.

혹여 위에서 실행한 startup.bat파일을 실행한 상태로 이클립스에서 실행을 하면, 이미 사용 중인 서버 포트를 또 사용한 것이기 때문에 중복 사용 에러가 난다.  즉, 이클립스에서 실행할 때는 startup.bat파일을 정지시키거나 반대로 웹에서 사용 중일 때는 이클립스를 실행하면 안 됩니다.

기본적인 html 및 css문법은 https://www.w3schools.com/웹 사이트를 참고하여 공부하겠습니다.

4. 컴파일 버전 설정

프로젝트 우클릭 - prferences - java compiler & projects facets에서 jdk버전을 1.8로 바꾸어 줍니다. (선택사항)

5. 같은 서버 내에 두 개 이상의 프로젝트가 존재하는 경우 서버를 실행할 때, 사용하지 않는 프로그램은 왼쪽으로 옮겨줍니다.

6. 기본 태그 문법

기본 태그는 소스코드에 주석으로 정리되어 있기 때문에 소스 코드를 참고하시길 바랍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    h1 {
        border : 1px solid red; -> 테두리 표시하기(영역확인을 위함)
        width: 50%;
    }
    span {
        display : inline-block; /*요소 속성을 변경. 본래의 속성을 잃지 않고 출력만 바꾸는 것*/
        border : 1px solid blue;
        width: 50%;
    }
</style>
</head>
<body>
 
<!--주석문 : Ctrl + Shift + / -->
 
<!--hr:수평선 긋기-->
<hr> 
    <h2>HeadLine Tag(h1~h6)</h2>
<hr>
    <!--Element == Html Tag
        [Block요소]
        1. 1칸(행)을 모두 차지한다.(폭 : 부모의 크기를 물려받는다.)
        2. 크기조절이 가능하다.
        
    -->
    <h1>h1 Tag</h1>
    <h2>h2 Tag</h2>
    <h3>h3 Tag</h3>
    <h4>h4 Tag</h4>
    <h5>h5 Tag</h5>
    <h6>h6 Tag</h6>
 
 
<hr>
    <h2>font Tag(size=1~7)</h2>
    <font color="red">font tag를 이용한 글꼴의 크기를 설정하는것은 지양<br>웹 표준을 준수하지 않는다.</font>
    <br>
    <font color="blue">웹 표준이란? : 브라우저마다 상이하게 나올 수 있으니까 모든 브라우저에서 동일하게 표현되도록 코딩해야 한다.</font>
    <br>
    <font color="green">(해결방안) : CSS를 이용해서 크기를 지정</font>
<hr>
    <!--span : inline
    [Inline요소]
    1. 줄바꿈이 안 된다.(수평으로 배치)
    2. 크기 조절이 안 된다.(콘텐츠 크기만큼 기본 크기를 가짐)
    -->
    <!--태그명:font 속성명:size-->
    <font size="1"><span>font size=1</span></font><br>
    <font size="2"><span>font size=2</span></font><br>
    <font size="3"><span>font size=3</span></font><br>
    <font size="4"><span>font size=4</span></font><br>
    <font size="5"><span>font size=5</span></font><br>
    <font size="6"><span>font size=6</span></font><br>
    <font size="7"><span>font size=7</span></font><br>
 
</body>
</html>

 

[정리]

태그	설명
<hr>	수평선을 출력합니다.
<h1~6>	Headline Tag로 한 행을 모두 영역으로 삼으며 글씨의 크기를 결정합니다.  자동으로 줄바꿈이 됩니다. (Block 요소)
<font>	글꼴의 크기를 지정합니다.  자동으로 줄바꿈이 되지 않습니다.
<br>	줄 바꿈 기능을 합니다.

• HTML에서 사용하는 모든 태그를 ELEMENT라고 합니다. 
• 상위 태그에 감싸지는 태그들을 자식 태그라고 하고, 자식 태그를 감싸는 태그를 부모 태그라고 합니다. 부모 테이블에게 감싸지는 서로 다른 태그들은 서로 형제관계입니다.
• 웹 표준성 : 태그의 결과가 모든 브라우저에서 동일하게 출력되어야 합니다. 
  • font태그로 글꼴의 크기를 지정하는 경우 브라우저마다 지정한 font태그의 사이즈가 다르기 때문에 표준성에 위배됩니다. 
  • 해결방안 : CSS를 통해서 글꼴의 크기를 지정하면 표준성이 보장됩니다. 
• 웹 접근성 : 모든 사용자가 동일한 기능을 사용할 수 있도록 만들어야 합니다. (EX. 비장애인과 장애인)
  • 해결방안 : 각 태그에 alt속성을 삽입하여 대체 기능을 설정합니다.
• BLOCK요소
  • 1행을 영역을 모두 차지합니다. 자동으로 줄 바꿈이 됩니다.(부모 태그의 폭을 그대로 물려받습니다.)
  • 크기 조절이 가능합니다. CSS에서 WIDTH 속성으로 설정
• INLINE요소 
  • 콘텐츠의 크기만큼 영역을 차지합니다. 자동으로 줄 바꿈이 되지 않습니다. 
  • 크기 조절이 불가능합니다. 단, CSS에서 DISPLAY를 INLINE-BLOCK으로 설정하여 웹 페이지에 표현하는 크기는 조절할 수 있습니다.