JSP - 기초

JSP 기초

 

JSP

- 앞서 배운 웹프로그래밍 언어들은 프론트엔드를 구성하고 있다 (HTML, CSS, JavaScript)

- Client side의 경우 해당 언어들로 구현할 수 있지만 이를 뒷받침할 서버를 구축하기 위해서는 백엔드 기술이 필요하다

- JSP는 HTML문서 기반 Server side 기술로 HTML 문서에 Java 코드가 섞여 구성되며 서버에서 구동된다

- HTML 문서에 태그를 활용해 Java 코드를 삽입하여 웹 서버에서 동적인 웹 페이지를 생성한다

- Servlet과 달리 기본적으로 구조는 HTML이기 때문에 태그로 이루어져 있어 접고 펼치기가 되어 코드 관리가 쉽다

 

HTML 코드 속에 <%! 태그를 이용해 Java 코드를 사용

 

Servlet

- HTML문서 기반인 JSP와 달리 Java 클래스의 일종으로 java파일로 저장된다

- JSP와 반대로 Java 코드에 HTML 태그를 문자열로(" ") 처리해 사용할 수 있다

- 하지만 중요한 것은 서블릿을 호출해 서버 관련 기능을 사용할 수 있다는 점이다

- 서버에 사용자의 요청이 들어오면 요청 데이터를 받고 처리하며 필요 시 DB에 접근하는 등의 작업을 수행함

WebServlet과 HttpServlet을 사용하는 모습

JSP와 Servlet의 동작과정

1. Client가 URL에 접속 요청을 서버에 보냄 (HTTP Request)

2. 서버로 들어온 URL 접속 요청을 web.xml이 정해놓은 URL 매핑이나 WebServlet("/URL") 매핑에 따라 서블릿을 호출함

3. 호출된 서블릿에서 HttpServletRequest 객체에 요청 받은 데이터를 (URL,요청방식,파라미터 등)저장한다

4. HttpServlet은 상속 메서드인 doGet(), doPost()로 전처리, 모델이동, 이동 등의 비즈니스 로직을 수행한다

5. 필요시 JSP 페이지로 forward해 클라이언트에게 화면을 보여준다

 

MVC 아키텍처

- 대부분의 웹 어플리케이션은 MVC(Model - View - Controller)아키텍처로 구성된다

- MVC는 프로그램이 어떤 흐름으로 작동되는지를 설계해놓은 구조로 코드의 유지보수에 도움을 준다

- 앞서 설명한 동작과정이 바로 MVC아키텍쳐로 구동되는 웹앱을 묘사하고 있다

 

 

1. Model (모델)

- Model 영역은 주로 데이터 관련한 역할을 담당하고 있다

- 데이터베이스와 연결되어 데이터를 저장하고 불러오는 등 데이터와 상호작용한다

- 만약 Client의 요청이 특정 데이터를 요구한다면 Controller에서 Model 영역으로 연결해 해당 데이터를 불러오게끔 한다

- Client가 입력한 정보를 데이터베이스에 저장하는 역할도 한다

 

 

2. View(뷰)

- View 영역은 주로 사용자에게 보여지는 화면을 담당한다

- Model 영역이나 Controller 영역이 작업을 수행하기 전 Client가 요청을 할 수 있도록 인터페이스를 제공한다

- View 영역에서 URL을 요청 받으면 Controller영역으로 보내며 비즈니스 로직을 마친 Controller는 View를 호출한다

- 호출된 View에서 JSP파일에서 HTML과 Java를 분리하고 해석해 HTML코드를 브라우저로 전송한다*

- View 영역은 JSP나 HTML 페이지로 구성된다

 

 

3. Controller(컨트롤러) 

- Controller 영역은 Client의 요청을 받고 비즈니스로직을 수행하는 역할을 한다

- 즉 Controller영역은 view와 model의 중간에 위치해 필요한 작업을 수행하는 영역이다

- 다시말해 View 영역에서 받은 요청을 받아 Model영역에서 데이터를 받아오고(필요시) 다시 View영역으로 보내주는 역할

- Controller 영역은 Servlet을 포함한 Java코드이루어져 있다

 

*JSP파일을 분리하는 이유는 JSP에 포함된 Java코드를 브라우저는 해석하지 못하기 때문이다.

 

 

JSP 개발 환경구축

 

1. Eclipse IDE 설치하기

- Eclipse는 Java 프로그래밍을 할 때 가장 많이 사용되는 IDE로 JSP 코드를 원할하게 짜기 위해서 필요하다

- 설치파일을 열면 여러가지 Eclipse 버전이 나오는데 그 중 Eclipse IDE for Enterprise Java and Web Developers를 받자 

https://www.eclipse.org/downloads/packages/installer

 

 

2. Apache, Tomcat 설치하기

- Apache와 Tomcat은 Java로 만들어진 웹서버를 구동하는데 필요한 프로그램

- Apache는 HTML,CSS,이미지 등을 Client에 전달하며 동적인 요청이 있을 시 Tomcat으로 전달한다

- Tomcat은 Java Servlet, JSP등을 통해 동적인 웹페이지를 생성하고 비즈니스 로직을 처리한다

- 방금 MVC아키텍쳐의 모든 내용이 Tomcat에서 처리한다고 보면 된다

- Apache 에서 전달한 요청을 처리해 다시 Apache로 전달해 웹페이지를 생성한다

- 앞으로 진행될 내용은 모두 apachetomcat 10.0 버전을 기준으로 한다

 

현재는 10.1 버전이 배포되고 있지만 실습은 10.0 버전으로 사용할 것이다

 

설치 파일은 접근이 쉬운 폴더로 위치해주자

 

https://tomcat.apache.org/download-10.cgi

 

3. 프로젝트 만들기

- 설치가 완료됐다면 eclipse를 실행시켜 Project Explorer에서 Dynamic web project를 생성

- Target runtime을 Apache Tomcat v10.0으로 맞춰주고 아까 받은 apache-tomcat파일을 라이브러리로 연결

- Generate web.xml을 체크해 web.xml을 생성해 프로젝트를 만든다

아파치 톰캣 라이브러리를 연결해주자

web.xml파일도 생성해주자

 

프로젝트가 생성된 모습

 

필요한 파일 및 폴더

 

Java 폴더

 

- 분홍색으로 표시한 java폴더와 노란색으로 표시한 Java Resources폴더는 사실 같은 폴더기에 어느 것을 사용해도 좋다

- 이 폴더 안에는 Java Servlet을 작성할 java 파일들이 들어간다

 

 

 

webapp 폴더

 

- webapp 폴더 안에는 JSP 파일을 작성할 공간이다

- webapp 폴더 안에 별도의 resource 폴더를 만들어 JavaScript, CSS, 이미지 파일/폴더 등을 만들어 사용하기도 한다

 

 

webapp/WEB-INF 폴더

 

- WEB-INF 폴더 안에는 앞으로 쓸 외부 라이브러리, 그리고 web.xml 파일이 들어간다

 

 

test용 프로젝트를 만들어 놓은 모습