2024-10-07 :: 049 JSP 들어가기

   HTML과 Java를 어느정도 익힌 다음이라면 JSP는 그리 생소하지 않을 것이다. JSP는 웹이 동작하는 방식에 있어 정적으로 움직이는 HTML에 Java의 동적인 움직임을 더한 웹프로그래밍 언어이다. 물론 HTML은 Java를 읽어올 수 없기 때문에 JSP는 Java의 기능을 숫자와 문자로 바꾸어 HTML(View)에 보내 클라이언트 화면에 송출하는 역할을 한다. 여기서 JSP를 사용하기 위해서 필요한 도구로는 아파치/톰캣이 있다.

 

   아파치와 톰캣은 엄연히 다른 도구지만 보통 묶어서 함께 사용한다. 아파치는 클라이언트의 요청을 받으면 HTML이나 오브젝트(JavaScript)를 전송하는 역할을 하는데, 웹 서버 자체만으로 처리하지 못하는 요구사항은 컨테이너처럼 처리할 수 있는 곳으로 넘겨주는 역할도 한다. 여기서 이 컨테이너 역할을 하는것이 바로 톰캣이다. 톰캣에서는 JSP 파일에서 Java항목만 따로 빼내어 컴파일을 진행한 후(.jsp → .java → .class), 그 결과를 웹 서버에 전달하는 역할을 한다. 즉, 정적인 HTML에 Java의 기능을 넣어 동적으로 수행하는 역할을 하는 것은 톰캣이라고 할 수 있다.

 

   그렇다면 지금부터 JSP를 활용한 프로그래밍을 위해 첫 시작을 해보도록 하겠다.

 

   먼저 이클립스를 사용했던 것 처럼 프로젝트를 생성해야 하는데, 여기서부터 살짝 다르다. [File] - [New] - [Dynamic Web Project] 를 눌러 웹 페이지 제작을 위한 프로젝트를 만든다. 만약 해당 탭에서 찾지 못할 경우 New탭 맨 아래에 있는 Other을 통해 Dynamic을 검색하여 생성할 수 있다.

 

 

   프로젝트 이름을 지정하고 사용하고자 하는 아파치톰캣의 버전을 지정한 후, Next를 눌러 넘어가서 마지막에 web.xml파일을 만드는 항목에 체크를 해주면 기본 작업은 끝이다. web.xml파일은 기본적으로 웰컴파일 리스트를 제공해주는데, 프로젝트를 Run시킬 때 가장 먼저 화면에 나타날 파일의 목록을 나타낸 것이다. JSP를 다루는데 능숙해지고 웹사이트를 만들게 되면 굳이 필요하진 않지만 아직은 걸음마 단계이니 꼭 포함시켜주도록 하자.

 

 

   간단하게 알아보기 위한 기본적인 메인화면을 만들어준다. 여기서 html 파일의 이름은 web.xml의 웰컴 파일에 명시되어 있는 파일명으로 해야 프로젝트를 Run했을 시 에러없이 화면에 나타날 수 있다. 파일명을 바꾸고 싶다면 web.xml 파일에서 이름을 수정하면 되니까 꼭 index.html을 사용할 필요는 없다.

 

   여기서 a태그에 first와 second를 주소로 입력해두었다. 이는 상대주소로, 현재 프로젝트(jsp_examle)안에서 webapp폴더에 작성되어 있는 first클래스를 참조하라는 의미가 된다. 프로젝트 내부에도 다양한 폴더가 존재하지만 바로 webapp폴더로 가는 이유는 그 폴더가 사실상 프로그램의 시작점이기 때문이다. 그러니 주소는 jsp_example/webapp/first가 아니라, jsp_example /first가 되는 것이다. 그렇다면 주소는 지정되었으니 실제로 연결까지 해보는 과정을 알아보자.

 

 

   java폴더로 들어와 하나의 패키지를 생성하고 그 안에서 새로운 클래스를 만든다. 먼저 컨트롤러가 될 cont1 클래스에 HttpServlet클래스 상속이 제일 먼저 이루어져야 한다. 그렇게 되면 toGet()과 toPost()함수를 오버라이딩 할 수 있는데, 이는 HTML시간에도 배웠던 데이터 전송을 위한 주요 방법이다. 일단 전송방식이 이번 수업의 큰 비중을 차지하는 것은 아니니 넘어가고, 마지막으로 서블릿매핑을 끝내주면 HTML에서 작성한 주소 하나를 만들게 되었다.

 

   이제 주소의 끝이 first가 되면 해당 클래스로 들어와 toGet() 혹은 toPost()를 실행하여 내부에 작성된 함수가 실행되게 된다. 이 때, 다른 사이트로 넘어갈 수 있도록 다른 파일의 상대경로를 지정해주면 해당 파일이 실행된다.

 

   연결해준 파일을 살펴보도록 하자. HTML의 구조를 지니고 있음에도 살짝 다른 jsp파일이다. jsp에는 HTML코드와 Java코드를 모두 사용할 수 있다는 특징이 있는데, HTML에서 Java언어를 바로 해석할 수 없기 때문에 스크립트 태그가 따로 필요하다.

스크립트 태그	형식	설명
선언문(클래스의 자식)	<%! ... ... %>	(전역)변수나 함수를 정의하는 데 사용된다.
스크립틀릿(특정함수)	<% ... ... %>	Java 로직 코드를 작성하는 데 사용된다.
표현문(out.print)	<%= ... ... %>	변수, 계산식, 함수 호출 결과를 문자열 형태로 출력하는데 사용된다.

 

   스크립트 태그를 활용하면 HTML문서 내에서 Java코드 입력이 가능하지만, 그렇게 잘 쓰이는 방식은 아니라고 한다. 애초 Java파일을 따로 작성하여 연결하면 되는 일이기 때문인데 그래도 아예 쓰이지 않는 것은 아니니 실습을 진행해보았다.

 

   <%> 단일 태그는 특정 함수 안에서 로직 코드를 작성할 수 있다고 했는데, 여기서 그 특정 함수란 _jspService() 메서드를 가리킨다. 해당 함수 내에서 로직을 구성하고 출력할 때는 내부에서 print()함수를 사용하거나 <%=> 단일 태그를 활용하는 방법이 있다. 왼쪽 로직은 for문을 활용해 연속적인 출력 작업을 진행했고, 오른쪽 로직은 선언된 지역변수를 활용해 각 변수를 더한 값을 출력하는 작업을 진행했다. 즉, 지역변수를 활용할 수 있는 <%=> 태그 또한 _jspService()메서드에 포함되어 있다는 뜻이다.

 

   이제 HTML의 a태그와 first.jsp가 제대로 연결되어 동작하는지 프로젝트 Run의 실행을 통해 확인을 해보자.

 

   이렇게 정상작동이 되는 것을 확인할 수 있다. 여기서 중요한건 주소인데, 실제로 주소창에 입력되는 주소는 서블릿매핑의 주소인거지 파일 위치의 경로를 나타내는 것이 아니다. 여기서 하나의 예시를 들어보기 위해, jsp파일의 위치를 webapp이 아니라, webapp내부에 폴더를 생성하여 그 폴더에 jsp파일을 집어넣고 연결을 시켜보도록 하겠다.

 

 

   위에서 진행했던 예제와 똑같은 방식으로 작성하고, 이번에 연결될 파일의 위치가 폴더로 옮겨갔기 때문에 폴더명을 먼저 써준 뒤에 불러오고자 하는 파일을 붙여주었다. 이렇게 실행하게 되면 주소창에 프로젝트명 뒤에 chapter02/exam2-1.jsp가 그대로 출력되는 것이 아니라, a태그로 연결된 값이 주소창에 나타나게 되어 localhost:8080/jspbook/ex2-1 이 되는 것이다.

 

   여기서 localhost는 사용자의 DNS주소를 가리키는 것이고, 콜론 뒤 8080은 인터넷 포트를 의미하는 것이다.

 

---

 

   < Book-Market 사이트 만들어보기 ① >   

 

   이제 HTML과 Java를 이용하여 동적인 웹사이트를 만들어 보기로 했다. 먼저 가장 기본 화면이 될 메인 화면을 제작하는데, 기존에는 HTML과 CSS를 만들어 적용했던 것을 부트스트랩을 사용하여 좀 더 간편하게 CSS효과를 줄 수 있는 방법에 대해 알아보았다. 아직 처음 사용하다 보니 지정할 수 있는 속성에 대한 클래스를 외우지 못해서 사용함에 있어 거부감이 느껴지는 방식이었지만 막상 만들어진 결과물을 보면 익혀두는 것이 좋을 것 같단 생각이 든다.

 

Bootstrap