BackEnd/Web Application

4장. 웹 애플리케이션 이해하기

제이드Jade 2022. 2. 12. 00:51

4.1 웹 애플리케이션

  • 시중에 있는 모든 사이트는 웹 브라우저를 기반으로 하는 웹 애플리케이션

 

4.2 웹 애플리케이션의 기본 구조

  • 웹 애플리케이션 : 기존의 정적인 웹 애플리케이션의 기능 + 서블릿(자바로 만든 CGI 프로그램), JSP, 자바 클래스들 추가하여 사용자에게 동적인 서비스를 제공하는 프로그램
  • 정적 웹 애플리케이션 기능인 HTML, 자바스크립트, CSS 등도 웹 애플리케이션에서 그대로 사용 가능

 

  • <컨테이너에서 실행되는 웹 애플리케이션의 디렉터리 기본 구조>

사진 출처 : https://velog.io/@jsj3282/%EC%9B%B9-%EC%96%B4%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98-%ED%8F%B4%EB%8D%94-%EA%B5%AC%EC%84%B1%EA%B3%BC-URL-%EB%A7%A4%ED%95%91

  • 기본 구조 외에 다른 기능이 추가되면 디렉터리를 추가해서 사용
  • 현재는 이클립스 같은 통합 개발 환경에서 웹 애플리케이션 디렉터리를 자동으로 생성해주지만 과거에는 개발자가 디렉터리 구조를 직접 만들어서 사용했음

 

<웹 애플리케이션 구성 요소의 기능>

  • 웹 애플리케이션 루트 디렉터리 : 다른 웹 애플리케이션 이름과 중복을 허용하지 않음.

                                               : 여기에 JSP, HTML 파일을 추가로 저장하기도 함

  • WEB-INF : 웹 애플리케이션에 관한 정보가 저장되는 곳, 외부에서 접근 불가
  • classes : 웹 애플리케이션이 수행하는 서블릿과 다른 일반 클래스들이 존재
  • lib : 웹 애플리케이션에서 사용되는 여러가지 라이브러리 압축 파일(jar 파일)이 저장되는 곳

          : DB 연동 드라이버나 프레임워크 기능 관련 jar 파일이 저장됨(클래스패스가 자동으로 설정 됨)

  • web.xml : 배치 지시자. 일종의 환경 설정 파일. 웹 애플리케이션에 대한 여러 가지 설정을 할 때 사용됨

 

<웹 애플리케이션에 추가된 구성 요소>

  • jsp, html
  • css, image, js
  • bin : 애플리케이션에서 사용되는 각종 실행 파일이 저장된 곳
  • conf : 프레임워크에서 사용하는 각종 설정 파일이 저장된 곳
  • src : 자바 소스 파일이 저장된 곳

 

4.3 컨테이너에서 웹 애플리케이션 실행하기

  • 톰캣 컨테이너에서 직접 웹 애플리케이션 실행하기(추후에 이클립스에서 설정 한번으로 해결 가능)
  • 웹 애플리케이션은 톰캣과 같은 웹 컨테이너에서 실행되는 구조 => 톰캣에 등록을 해야 웹 애플리케이션 실행 가능
  • 톰캣 등록 방법 1) %CATALINA_HOME%webapps에 애플리케이션 저장 / 2)server.xml에 직접 웹 애플리케이션 등록
  • CATALINA_HOME : 톰캣의 루트 디렉터리를 부르는 명칭(cf. JDK의 루트 디렉터리는 JAVA_HOME) 

 

톰캣 등록 방법 1)  %CATALINA_HOME%webapps에 애플리케이션 저장

 

1. 웹 애플리케이션 프로젝트 폴더를 톰캣 루트 디렉터리 하위에 있는 webapps 폴더에 붙여넣기

2. 프로젝트 폴더 안에 실행하고 싶은 html파일 등을 저장하기

3. 톰캣을 설치한 루트 디렉터리(tomcat9)의 bin폴더에 있는 Tocat9.exe 실행

     => 애플리케이션이 자동으로 등록되어 실행됨

4. 브라우저에서 웹 애플리케이션 요청 : http://IP주소:포트번호/컨텍스트이름/요청파일이름

  ex) http://127.0.0.1:8090/webShop/main.html

   => ip주소 : 여기서는 로컬이므로 localhost와 같다. / 포트번호 : 8090 

        컨텍스트 이름 : webShop / 파일이름 : main.html(JSP나 HTML파일 이름을 입력하면 됨

  • 이 방법은 웹 애플리케이션 개발을 모두 완료한 후 사용자에게 서비스할 때 사용하면 편리

 

톰캣 등록 방법 2)server.xml에 직접 웹 애플리케이션 등록

 

컨텍스트란?

  • 실제 개발 과정에서는 수시로 애플리케이션을 실행하고 테스트 해야하므로 방법1처럼 프로젝트 파일을 계속 복붙하는건 번거로움. 
  • 실제로 개발할 때는 개발자가 정한 위치에 웹 애플리케이션을 생성 -> 그 위치를 server.xml에 등록 -> 톰캣 실행 하는 방법2를 써야 함.
  • 컨텍스트 : 이 때 server.xml에 등록하는 웹 애플리케이션

 

<컨텍스트의 주요 특징>

  • 웹 애플리케이션당 하나의 컨텍스트가 등록됨
  • 웹 애플리케이션 이름과 같을 수도 있고 다를 수도 있음
  • 컨텍스트 이름은 중복되면 안됨
  • 컨텍스트 이름은 명사형으로 지정
  • 컨텍스트 이름은 대소문자를 구분
  • server.xml에 등록

 

톰캣 컨테이너에 컨텍스트 등록하기

1. server.xml은 톰캣 설치 루트 디렉터리\conf디렉터리 안에 있음

2. server.xml 내의 <Context>태그를 이용해서 컨텍스트를 등록(149행 쯤 <Host>태그 안에)

3. 실행하고 싶은 파일(ex. 방법1에서 main.html)을 복사해서 웹 애플리케이션이 위치한 경로에 넣음

4. 톰캣을 재실행 후 웹브라우저에서 주소로 요청

 

<Context 형식>

<Context path="/컨택스트 이름"
               docBase="실제 웹 애플리케이션의 WEB-INF 디렉터리 위치"
               reloadable="true 또는 false" />

예 )          <Context path="/webMal"
               docBase="C:\\webShop"
               reloadable="true" />

 

<Context 태그 구성요소>

톰캣은 모든 설정 정보를 XML로 저장한 후 실행 시 정보를 읽어와 설정대로 실행

  • path : 웹 애플리케이션의 컨텍스트 이름, 웹 브라우저에서 실제 웹 애플리케이션을 요청하는 이름
  • docBase : 실제 웹 애플리케이션이 위치한 경로, WEB-INF 상위 폴더까지의 경로
  • reloadable : 실행 중 소스 코드가 수정될 경우 바로 갱신할지 여부. false면 톰캣을 다시 실행해야 추가한 소스 코드의 기능이 반영

 

톰캣 컨테이너에서의 웹 애플리케이션 동작 과정

=> 브라우저에서 요청할 경우 톰캣이 브라우저에 서비스하는 과정

 

1. 웹 브라우저에서 컨텍스트 이름으로 요청

2. 요청을 받은 톰캣 컨테이너는 요청한 컨텍스트 이름이 server.xml에 있는지 확인

3. 해당 컨텍스트 이름이 있으면 컨텍스트 이름에 대한 실제 웹 애플리케이션이 있는 경로로 가서 요청한 파일을 클라이언트 웹 브라우저로 전송(없으면 404 오류 발생)

4. 웹 브라우저는 정송된 파일을 브라우저에 나타냄

 

 

4.4 이클립스에서 웹 애플리케이션 실습하기

현재는 4.3처럼 직접 만들어 개발하지 않고 이클립스로 간편하게 개발.

 

1. 이클립스에서 웹 프로젝트 생성

(New > Dynamic Web Project, 마지막에 Generate web.xml.. 체크)

 

2. 이클립스에서 HTML 파일 생성

(프로젝트 하위 디렉터리에서 WebContent 우클릭 > New > File > 이름지정

 

3. 이클립스와 톰캣 연동

(이클립스 하단의 Server 탭 우클릭 > New > Server > Apache항목에서 Tomcat v9.0 선택 후 Next > Browse.. 클릭 > 톰캣 홈 디렉터리(나는 C:\tomcat9.0) 선택

 

4. 이클립스와 연동한 톰캣에 프로젝트 등록

=> Server 탭 아래에 등록된 톰캣 서버 Tomcat v9.0 Server at localhost [Stopped] 우클리 > Add and Remove > 추가할 프로젝트(여기선 앞서 생성한 프로젝트인 webShop) 선택후 Add 클릭

=> 자동으로 컨텍스트 이름은 프로젝트 이름과 동일하게 설정됨

 

5. 웹 브라우저에서 요청하기

Server 탭 우측상단에 녹색 실행버튼으로 서버 실행 > 웹 브라우저에서 주소 요청

 

자세한 방법은 p.115~129 참고

 

4.5 웹 애플리케이션 서비스하기

  • 이전까지는 이클립스에 등록된 톰캣에서 실행해서 나만 실행할 수 있었다.
  • 배치 : 실제 사용자에게 서비스를 하기 위해서 개발한 웹 애플리케이션 예제 소스 전체를 실제 리눅스나 유닉스 서버에 설치된 톰캣으로 이동해서 실행하는 과정
  • 톰캣 배치 과정 : 프로젝트를 war 압축 파일로 만듦 > FTP를 이용해 톰캣이 미리 설치된 리눅스/유닉스 운영 서버에 업로드 > 텔넷을 이용해 bin 폴더의 Tomcat.exe를 다시 실행 > war파이링 압축 해제& 톰켓에 자동 등록되어 웹 애플리케이션 실행

 

<이클립스에서 war 압축 파일 만들기>

1. 프로젝트 우클릭 > Export 선택

2. Web 항목의 WAR file을 선택 후 Next

3. Browse.. 클릭 후 war 파일을 저장할 위치로 톰캣 폴더의 webapps 디렉터리를 지정

 

  • 로컬에서는 톰캣 루트 디렉터리 > bin폴더에 Tomcat9.exe 실행하면 톰캣은 webapps의 war 파일 압축을 해제&자동으로 컨텍스트로 등록
  • webapps에서 압축해제된 webShop 폴더를 확인해보면 WEB-INF와 main.html파일이 보임
  • 클라이언트 요청은 동일

 

<이클립스에서 HTML 파일과 JSP 파일 생성 시 자동으로 한글 인코딩 UTF-8로 설정하기>

1. Window > Preference > 왼쪽메뉴에 Web>HTML Files과 JSP Files를 각각 Encoding을 UTF-8로 변경