처음 배워보는 Web(1) - 아파치 & 톰캣 & JSP & MVC & 기본설정

티스토리 뷰

WEB

처음 배워보는 Web(1) - 아파치 & 톰캣 & JSP & MVC & 기본설정

Chokeys 2023. 3. 26. 23:14

1. Web 구현을 위한 기본 프로그램 설치 & 설정

① 먼저 Web 파일들의 인코딩 형식을 UTF-8 방식으로 바꿔준다. (총 4개)

(Window -> Preferences -> Web)

- 설치 IDE는 이클립스를 사용했다.

1-1. 코드와 인코딩

ASCII 코드, 유니코드등의 우리가 여러가지 코드들을 사용하는 이유에 대해서 먼저 말하면, 우리는 언어를 'A', '가' 이렇게 글자로 표현을 하지만 컴퓨터는 오로지 0과1로만 이루어진 숫자로 인식한다. 그래서 컴퓨터가 사람의 언어를 이해할 수 있도록 언어를 bit형식의 숫자로 표현한것이 코드이다.

1. 유니코드(Unicode) : 처음에는 영어와 몇가지 문자로만 구성되어있던 코드들이 네트워크가 발전하고 다양한 국가에서 사용됨에 따라, 국제적으로 전세계 언어를 모두 표시할 수 있는 표준코드가 필요하였다. 그래서 만들어진 것이 유니코드이다.

2. UTF- 8 (8-bit Unicode Transformation Format)

유니코드를 통해 정의되어진 코드를 인코딩(encoding) 하는 방법이다. 가변길이 유니코드 인코딩 방식으로, 가장 일반적인 문자 인코딩 방식이다. UTF- 8이 많이 쓰이는 이유에는 몇가지가 있는데, 아마 ASCII 코드와 호환이 된다는 점이 가장 큰 이유라고 생각한다.

① UTF-8은 문자열 집합과 인코딩 형태를 8비트 단위로 한다는 의미

② UTF- 8은 유니코드 문자를 1~4바이트 형태로 가변적 인코딩한다.

③ 유니코드는 영어를 표현할 땐 1바이트, 한글을 표현할 땐 2바이트, 다른 특수문자를 표현할 땐 3바이트로 코드를 표현함에 있어서 컴퓨터에게 혼란을 줄 수 있기에 각 언어에 맞게 인코딩 작업을 해줄 필요가 있다.

④ ASCII 코드와 호환이 용이하기에 ASCII 코드로 표현 가능한 것들은 1바이트로 표현하고, 그것이 안된다면 2바이트 이상을 사용하는 방식이 UTF-8 방식이다.

② Apache를 접속해 톰캣10을 다운받는다.

(저장 위치는 저 같은 경우 노트북에서 "로컬디스크(c:) -> 사용자 -> 내폴더(이름)" 폴더에 압축을 풀었습니다)

1-2. 아파치(Apache)

아파치는 웹서버(web sever)

아파치 소프트웨어 재단에서 관리하는 HTTP 웹 서버로서 구축이 쉽고 무료라는 점에서 많이 이용되고 있다.

또한 Apache는 오픈 소스이기 때문에 누구든지 수정, 재배포가 가능하다.

웹서버(web sever) : 정적인 데이터를 처리하는 서버.

클라이언트가 GET, POST 등의 메소드를 이용해 전송한 요청을 받아, 단순 이미지나 html파일과 같은 리소스를 HTTP 프로토콜을 이용해 전송하는 프로그램이다. 웹 서버는 웹 페이지, 이미지 등의 정적인 컨텐츠만 제공할 수 있다. 정적컨텐츠는 뜻 그대로 변하지 않는 데이터이다. 웹서버에 저장을 해놓았다가 요청이 들어오면 그대로 전송하여 보여준다. 누가 언제 요청하더라도 html이나 css로 만든 데이터 또는 이미지의 컨텐츠를 보여준다.

예를들면 네이버 사이트에 로고, 카테고리, 배너들처럼 변하지 않는 것들을 정적데이터라고 보면될거같다.

1-3. 톰캣(Tomcat)

톰캣은 와스 WAS(web application server)

똑같이 아파치에서 만든 http서버로, 웹서버인 Apache와 다른 특징을 꼽으라 한다면 WAS는 웹서버 + 서블릿이 합쳐진 형태로 컨테이너 기능을 한다는 것이다. 클라이언트의 요청을 받아 요청을 처리하고 다시 클라이언트에게 응답해주는 역할을 하는것이 서블릿 컨테이너 이다. 웹 서버에서 넘어온 동적인 페이지를 읽어들여 프로그램을 실행하고 그 결과를 다시 html로 재구성하여 아파치에게 되돌려 준다.

WAS(web application server) : 동적인 데이터를 처리하는 서버.

정적데이터와는 반대로 변화가 있는 데이터, 누가 언제 또 어떤 방식으로 서버에 요청했는지에 따라 각각 다른 내용을 보여주는 컨텐츠를 말한다. 사용자의 정보를 (나이, 성별, 소비패턴) 받아서 보여지는 추천상품이나 광고, 은행 계좌의 정보를 조회하여 사용자마다 다르게 보여지는 화면 또는 유투브에 보여주진 맞춤채널들 이렇게 실시간으로 바뀌어지는 콘텐츠들을 말한다.

내 유투브 계정의 추천영상이다. 매번 클릭할 때마다 맞춤광고와 추천영상을 보여주는 동적데이터!!

주로 web sever는 정적 컨텐츠, was는 동적 컨텐츠를 당담한다고 보면된다.

1-4. web sever 와 WSA (그림)

출저 : https://cheershennah.tistory.com/54

1-5. Servlet Container 로직 (그림)

서블릿은 요청-응답 프로그래밍 모델의 서버를 구현하기 위해 사용되는 Jakarta 프레임워크의 구성요소이다.
서블릿은 그 독립적으로 동작하지 않고, 서블릿 컨테이너라는 다른 자바 응용프로그램의 제어를 받는다. 가장 대표적인 서블릿 컨테이너는 톰캣이다. 서버가 요청을 받으면 서버는 요청을 서블릿 컨테이너로 전달하고 서블릿 컨테이너는 이를 서블릿으로 전달한다.

출저 : https://hudi.blog/servlet-and-servlet-container/

출저:  https://steady-coding.tistory.com/462

위 설명과 그림은 @Hudi 님과 제이온님이 쓰신 글에서 가져왔다. 가장 이해하기 쉽게 그려놓은 그림들이라고 생각하여 가지고 왔다. 혹시 지우기를 요청하신다면 바로 지우겠다.

검색을 하고 이해하려고 해도 클라이언트 -> 웹서버-> 서블릿 컨테이너 -> 개별 서블릿 -> 웹서버 -> .... 이러한 로직으로 구성되어 있는데 사실 아직까지는 이해가 잘 안간다. 어느정도는 머리속에 그려지지만 서블릿이 많아지고 처리해야할 작업들이 많아지면 머리가 많이 아플거같다... 그래서 그림으로 남겨 놓고 천천히 공부해봐야겠다.

③ Runtime Enviroment에서 톰캣10 서버를 add한다.

Next를 눌러 Browse를 클릭후 톰캣10을 다운받은 폴더를 클릭해준다.(폴더 안에 들어있는 bin보다 상위폴더 선택)

톰캣10 서버가 정상적으로 등록되어진걸 볼 수 있다.

④ 자바개발 환경을 java EE로 변경 후 Dynamic Web Project 폴더를 생성한다.

이클립스를 쓰다보면 맨 오른쪽에 Java 와 java EE 두가지 버전이 있는것을 볼 수 있다. 보통은 Java를 눌러놓고 개발을 진행하지만 웹을 개발하기 위해서는 Java EE 개발환경을 이용해야한다.

Java EE (Java Enterprise Edition)는 Java를 통해 웹 어플리케이션을 만드는 등 추가적인 기능을 제공하는 버전으로 웹프로그래밍에 필요한 기능을 다수포함 하고 있어(JSP, Servlet, JDBC등..) web개발에 용이하다.

⑤ New 서버를 등록하고 활성화(작동) 시켜준다.

Add를 눌러 아까 만들었던 Dynamic Web Project 폴더를 이동시켜준다. (오른쪽이 활성화!)

Start를 눌러주면 정상적으로 서버가 활성화된다. 이제는 jsp파일을 생성하여 서버가 제대로 작동하는지 확일 해볼것이다. 그러기 위해서는 jsp가 무엇인지 조금은 알고 넘어가야 할 것 같다.

[추가 사항]

내가 하나 빼먹은 내용이 있다. web1에 POM 파일을 하나 생성해서 메이븐 라이브러리들을 추가 해줘야한다. mybaties, oracle, lombok 총 3개인데 마이베티스 기능과 데이터베이스, 룸북의 편리한 기능을 사용하기 위해 추가해주는 것이다.

오라클과 나중에 쓰게될 h2임베디드 까지 총 4개를 추가했다. 나중에도 필요한 라이브러리가 있으면 POM파일에 추가해서 써야한다.

2. JSP는 무엇인가?

JSP(Java Server Page)

정적인 HTML 코드에 JAVA 코드를 넣어 동적 웹페이지를 생성하는 웹어플리케이션 도구이다. JSP가 실행되면 자바 서블릿(Servlet)으로 변환되며 웹 어플리케이션 서버에서 동작되면서 필요한 기능을 수행하고 그렇게 생성된 데이터를 웹페이지와 함께 클라이언트로 응답한다. Java EE 스펙 중 하나로 웹 애플리케이션 서버에서 동작하며, 하나의 java클래스이기 때문에 모든 java라이브러리를 끌어다 쓸 수 있다.

써 놓고 보니 말이 참어렵다. 특히 이 부분이 이해가 잘 안간다. " JSP가 실행되면 자바 서블릿(Servlet)으로 변환 " .....

이 말이 헷갈리는게 JSP파일을 나타내는 방법에는 모델1과 모델2가 있는데 설명이 있어야 이해할 수 있을것 같다.

2-1. 모델 1

출저 : https://velog.io/@ovan/MVC-Model1%EA%B3%BC-MVC-Model2

모델1은 JSP가 혼자서 View와 Controller를 JSP에서 모두 구현하는 구조이다.

즉, 사용자의 요청처리와 요청에 대한 응답처리를 JSP에서 모두 구현하는 구조

- JSP와 JavaBeans만 사용하여 웹을 개발하는 구조

- 90년대 말부터 2000년대 초까지 자바 기반의 웹 애플리케이션 개발에 사용됐던 아키텍처

- 웹 브라우저의 요청을 받은 JSP는 자바빈이나 서비스 클래스를 사용해서 작업을 처리하고, 결과를 클라이언트에 출력

- 모델(Model)(JavaBeans)은 데이터베이스 연동 로직을 제공하면서, DB에 검색한 데이터가 저장되는 자바 객체를 말함

<장단점>

흐름이 단순하기 때문에 개발이 쉽다.
규모가 커질수록 유지보수가 어려워진다.
소스보기로 소스가 공개되어 중요정보에 부적합하다.
View와 Controller가 하나의 JSP에 합쳐져 있기때문에 디자이너와 개발자의 협업에 어려움이 생길 수 있다.

저 구조를 이해하기 위해서는 몇가지 추가적인 설명이 필요하다. MVC패턴이라던지 Java Bean이라던지 정확하게는 알 수 없더라도 간략하게나마 정리를 하여 이해를 할 수있도록 해야겠다.

1. JavaBeans

JavaBeans의 Bean은 자바에서 객체를 의미하는 용어이고, JavaBeans는 데이터베이스 연동에 사용되는 자바 객체를 의미한다. Java Bean은 쉽게 말해 MVC 패턴에서 데이터를 표현해주기 위해 사용하는 객체 형태. 공통된 정보를 관리하기 위해 규칙성 있는 형태로 데이터의 집합을 만든 것이라고 생각한다.(고객의 정보에 포함되는 이름,나이,메일등... 책의 정보에 들어가는 제목, 작가, 가격 출판사등... 규칙성이 있는 객체를 말한다 )

2. DTO(Data Transfer Object)

JSP에서 객체를 가져오기 위한 기법으로 데이터 전달 오브젝트 파일라고도 한다.

자바로 작성된 컴포넌트들 즉, 클래스(Class)를 일반적으로 말한다.
JSP 프로그래밍에는 DTO(Data Transfer Object)나 DAO(Data Access Object)클래스의 객체를 JSP페이지에서 사용하기 위해 사용한다. 실습에서 항상 만들던 이름, 나이 ,주소 , 등록날짜 같은 정보들로 만들어진 고객이라는 객체를 왜 dto 폴더에 저장을 하나 싶었는데 이제 알 것 같다.

내 생각에는 JavaBeans 랑 DTO는 분명 다른 용어지만 그냥 하나로 묶어, jsp파일이 데이터를 불러오는 방법 이라고 생각하면 될거같다.

2-2. 모델 2

모델2는 기존에 JSP 혼자서 처리했던 View와 Controller의 기능을 나눠 JSP는 View의 역할만을 수행하고 Controller 기능을 서블릿이라는 새로운 Controller가 담당하는 구조이다. 서블릿은 웹 브라우저의 요청과 웹 어플리케이션의 전체적인 흐름을 제어한다.

- Model 1 구조와 달리 웹 브라우저의 모든 요청을 단일 진입점 즉, 하나의 서블릿(Servlet)에서 처리한다.

- 서블릿으로 요청이 들어오게 되면(Controller) 요청에 알맞은 모델을 찾아 요청을 처리한 후 (Model) 그 처리결과를 JSP가 출력하는 구조이다.(View) -> MVC 패턴과 똑같은 구조이다.

- 웹 브라우저의 결과를 보여줄 JSP 페이지는 컨트롤러 서블릿이 선택하며, 요청 처리 결과는 request 또는 session에 저장해서 뷰 역할을 하는 JSP 페이지에 전달하게 된다.

<장단점>

출력을 위한 view 코드와 로직 코드를 위한 자바코드를 분리하기 때문에 모델 1에 비해 코드가 복잡하지 않다.
개발자와 퍼블리셔의 작업이 분리되어 분업이 편리하고, 유지보수 및 확장이 용이하다.
하지만 자바에 대한 이해가 필요하고 구조가 복잡하여 습득이 어렵다.

2-3. MVC 패턴

MVC( Model-View-Controller), 애플리케이션을 세 가지 역할로 구분한 개발 방법론이다. 아래의 그림처럼 사용자가 Controller를 조작하면 Controller는 Model을 통해 데이터를 가져오고 그 데이터를 바탕으로 View를 통해 시각적 표현을 제어하여 사용자에게 전달하게 된다.

이러한 패턴을 성공적으로 사용하면, 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시작적 요소나 그 이면에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있게된다.