IT 배움터

   웹사이트를 살펴보면 기본적으로 제공되는 언어 외의 다른 언어를 지원하는 것을 볼 수 있다. 그런 설정은 과연 어떻게 하는건지 의문을 가진 적이 있었는데, HTML을 처음 배웠던 시기에는 아예 HTML을 국가별로 따로 작성하여 만드는 것이라고 생각했다. 하지만 이는 기능적인 부분의 도움을 받아 클래스를 사용하면 쉽게 처리가 가능하다.

   Locale 클래스   

   java클래스로 request 객체를 사용하여 불러오거나, 아니면 new 방식으로 생성하는 등 클래스를 사용하는 것 처럼 호출하면 사용자의 지역 환경에 따라 결정되는 지역적 문화등에 관한 정보를 알려준다. 언어나 날짜 시간, 여기서 날짜 또한 각 나라마다 표기법이 다르기 때문에 맞춰서 반영된다. JSP페이지에서 사용할 경우 스크립트 태그를 이용해 import(java.util.Locale)를 하고 request객체로 불러와 Locale객체에 담을 수 있다.

   Locale 객체에 담긴 정보를 확인하기 위해 getDisplayCountry 함수를 사용하여 현재 국가의 이름을 가져오는 것을 확인할 수 있다. 형식을 지정하여 오늘의 날짜와 요일까지 알아내기 위해 getDateInstance함수를 사용하여 형식을 모두(FULL) 보여주는 것으로 지정하고 변수로 locale을 지정하자 오늘의 날짜가 나온 것을 확인했다. 다음으로 숫자 표기에 관한 내용인데, 국가마다 화폐가 다른 점을 반영하기 위해서 알아두면 좋을 것 같다. 일단 숫자의 형식을 쉼표(,)로 구분하기 위해 getNumberInstance 함수를 사용하여 제 위치에 찍힌 쉼표를 확인했다.

   fmt 태그   

   기본적인 작업을 끝냈다면 JSP에서 다양한 포멧을 지원하는 fmt 태그에 대해 알아보자. fmt 태그는 다국어 문서 처리를 위한 국제화 및 지역화 태그이다. 즉, 앞서 말했듯이 각 국가별로 웹 페이지를 따로 제작하는 것이 아니라, 기존의 소스코드는 그대로 두되 지역에 따라 언어팩만 교체하여 다국어 문서 작성이 가능하다는 것이다.

   fmt태그를 사용하기 위해서는 먼저 lib파일에 해당 jar파일을 가지고 있어야 한다. (실습은 jstl-1.2.jar 파일을 사용함)

   그리고 taglib 디렉티브 태그를 사용하여 해당 페이지에 포함시켜주면 사용 준비는 끝난다.

<%@ taglip prefix = "fmt" uri = "http://java.sun.com/jsp/jstl/fmt" %>

   메세지 처리 태그에서 말하는 리소스 번들이란 쉽게 말해 해당 태그들이 사용하는 파일을 일컫는다. 리소스 번들로 사용되는 파일들은 대부분 WEB-INF/classes/ 폴더에 속해야 하는데, 해당 폴더는 사용자가 임의로 저장을 할 수 있는 공간이 아니다. 해당 폴더는 웹 페이지를 서버에 Run시킬 때, .java파일을 컴파일하여 .class(기계어)로 바뀐 파일이 보관되는 장소이므로 해당 폴더에 존재하려면 java폴더에 properties 파일을 사용하여 저장되어 있어야 한다.

   properties 파일은 일종의 텍스트 문서로 기본 파일은 디폴트값이 되며, 언더바(_)와 함께 뒤에 작성되는 지역 소문자 코드가 언어팩의 지역을 나타낸다(ko-한국어/en-영어/ja-일본어 등…).

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

   이제 리소스 번들을 이용하여 언어를 바꾸는 법을 배웠으니 응용하여 Book Market 페이지의 언어를 다양하게 만들어 보도록 하겠다. 먼저 리소스 번들이 들어갈 패키지를 java폴더 아래에 만들고 [New] → [File] 탭에 들어가 properties파일을 작성한다. 기본 값이 될 파일은 파일명 뒤에 지역 코드를 붙이지 않아도 되며, 여기서는 한국어/영어/일본어 총 세 개의 파일을 만들어 도서등록 페이지에 연결할 것이다.

   영어를 제외한 한국어나 한자는 모두 작성 즉시 유니코드로 변환되어 기록되는데, 오타를 확인하고 싶을 경우 해당 유니코드 위에 마우스 오버를 시키면 작성한 글이 무엇인지 나오니 참고하도록 하자.

   이제 setLocale태그를 사용하여 제일 먼저 현재 지역 언어를 설정해줄건데, 이는 a태그를 통해 받은 파라미터로 지정하게 했다. 아무런 값을 할당받지 못한 상태라면 아무 지역코드를 쓰지않은 원본이 기본값이 되기 때문에 따로 지정하지 않아도 자연스레 한국어 원판이 나오게 될 것이다. 다만 여기서 주의할 점은 value부분에 큰 따옴표(" ")를 사용하여 작성해야 했는데, 표현식의 충돌이 일어난건지 큰 따옴표로 작성하면 에러가 뜬다. 따라서 EL문을 사용하거나 아니면 그냥 따옴표(' ')를 사용하여 작성하니 큰 문제가 생기진 않았다.

   언어 설정이 끝나면 bundle태그를 통해 로컬라이징이 필요한 부분에 미리 작성해둔 key값을 넣어주기만 하면 끝난다. 이렇게 되면 사용자가 a태그에 요청을 할 때마다 파라미터의 값이 바뀌며 적용되는 setLocale값에 따라 해당하는 메세지를 반영하게 된다. 참고로 a태그의 경로에 물음표(?)로 시작하는 것은 해당 페이지에 파라미터를 보내는 것과 같다. leng(key값) = ko(value값) 식으로 전송되니까 알아두도록 하자.

   여기서 유심히 봐야 될 부분은 bundle메서드의 끝나는 지점이다.

   언어가 바뀌어야 하는 부분마다 fmt:message 처리를 진행하고 이후 더는 필요없는 부분에서 bundle 태그를 닫아야 하는 점을 유의하자.

   유효성 검사란 HTML에 작성된 데이터가 전송되기 전, 사용자가  과연 지정된 형식에 맞게  작성 하였는지 검사하는 것을 말한다. 실수로 다른 데이터를 입력하게 되면 처리 과정에서 에러가 날 뿐 아니라, 사용자의 입장에서는 이미 작성한 폼을 다시 새로 작성해야하는 번거로움을 줄여줄 수 있기 때문이라도 필요한데 이는 컨트롤러에서 실행할 지, HTML 자체에서 실행할 지 개발자가 어느 방향으로 제작했는지가 중요하다.

   HTML도 발전을 거듭하여 java코드로만 행해졌던 유효성 검사 대부분은 form에서도 지정할 수 있는데, 주로 서버를 거치지 않은 간단한 항목에 대해서는 HTML 자체에서 걸러낼 수 있다. 입력 데이터가 없을 경우, 날짜 혹은 이메일의 형식을 지키지 않은 경우, 나이를 입력할 때 숫자로 쓰지 않은 경우, 입력 폼의 제한 길이를 초과했을 경우 등 input이나 textarea 등 직접 사용자의 텍스트를 값으로 받는 태그는 대부분 해당 검사가 가능하니 오늘은 유효성 검사가 어떻게 흘러가는지 과정을 살펴보도록 하겠다.

   먼저, 유효성 검사를 거치기 위해서는 입력된 값이 무엇인지 확인하는 절차가 필요할 것이다.

   오랜만에 JS(자바스크립트)를 사용하게 되었다. HTML을 읽어내는 크롬이나 사파리 같은 번역기들은 기본적으로 HTML / CSS 파일을 해석할 수 있는데, 여기서 Java Script 또한 해석이 가능하기 때문에 유효성 검사에 많이 활용된다고 한다...

   JS는 기존에 배운 것과 동일하다, 다만 jsp에서 script태그를 이용하여 작성할 경우 자동완성 기능은 제공하지 않기 때문에 되도록 js파일을 만들어 작성하는 것을 권장하는 편이다. querySelector를 이용하여 가져온 값을 알림창으로 출력하는 기능을 통해 제대로 값을 가져온 것을 확인하자.

   여기서 한번 고생을 한 부분이 있는데(놀랍게 js로 돌아오자마자 트러블을 일으켰다, 여러모로 대단한 언어다) 앞 예시에서 input태그의 id값을 submit으로 준 것 때문에 그대로 쓰다가 유효성 검사를 위한 함수를 작성하는데서 자꾸 오류가 터져 막막했었다. 정확한 이유는 모르겠지만 submit()이 함수가 아니라는 에러가 돌아왔는데, 그 이유가 바로 input태그의 아이디 값을 submit으로 주었고, querySelector를 통해 가져온 것이 화근이 되었던 것 같다.

   정말 이유는 모르겠지만 결국 input 태그의 id값을 수정하였고 그 결과 정상적으로 작동되는 것을 확인했다... ...

   어쨌든 이런 식으로 함수를 활용하여 사용자가 입력한 데이터가 전송되기 전 검출하는 함수를 작성할 수 있었다. 하지만 HTML5 부터는 해당 기능을 form에 추가할 수 있기 때문에 복잡한 것이 아니라면 그 기능을 활용하는게 더 편할 것이다.

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

   이제 유효성 검사의 원리와 방법을 배웠으니 책을 등록하는 페이지에서 작성 방법을 제한하는 함수를 작성하여 적용하자.

   if문을 활용해서 모든 input태그를 검사하고 하나라도 참이 나올 경우 return false 를 통해 즉시 해당 문구에서 기능을 멈추고 form을 전송하지 않는다. 모두 옳게 작성됐을 경우엔 if문에서 빠져나와 맨 아래의 submit() 함수를 통해 해당 form의 내용을 지정된 경로로 이동시켜, 결과적으로는 도서 추가가 완료된다.

   액션 태그를 활용하여 jsp파일 사이의 데이터 교환이나, java파일에서 jsp로 데이터를 보내는 것을 배웠다. 이를 통해서 클라이언트가 웹 페이지에 요청을 보내면 컨트롤러에서 모델을 통해 데이터를 주고받아 다시 그 데이터를 필요한 웹에 보내는 작업을 거치며 클라이언트가 요청에 맞는 화면이 나타나는 기능을 MVC라고 부른다. 그래서 오늘은 이러한 구조 방식을 이해하고 활용한 코드를 확인하고 풀어보겠다.

   < 만들어 볼 페이지의 완성본 >   

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

   먼저 도서 목록을 누르면 제품의 정보들을 출력할 수 있도록 제품을 위한 양식을 작성해야 한다. 객체 생성을 위한 클래스에 Serializable 인터페이스를 상속 받았는데, 이 기능은 데이터가 직렬로 전송될 수 있도록 해주는 것이라고 한다. 필요한 정보들을 모두 변수로 만든 뒤, 객체 생성에 필요한 생성자를 작성해주는데 매개변수가 필요한 생성자가 있을 경우 [Source]탭을 통해 필요한 항목만 체크하면 알아서 생성자를 만들어 준다. 같은 방식으로 다른 변수들의 get/set 함수를 만들어 주면 책 한 권당 여러 데이터를 담을 수 있는 묶음 하나가 완성된다.

   이렇게 복잡한 메서드나 로직 하나 없이  단순 변수와 생성자 메서드로 이루어져 있는 양식 클래스를 DTO 라고 부른다.

   Book 클래스를 통해 만들어질 객체를 담을 저장소가 필요하다. 그리고 이 저장소는 MVC에서 모델을 담당하여 컨트롤러에게 데이터를 전해 줄 공간이 되기도 한다. 따라서 데이터가 담기기 위한 이 장소는 무조건 존재해야만 하기 때문에 static을 붙여 별도의 객체 생성과정을 없애주기로 했다. 기본 생성자 안에는 Book 클래스를 이용하여 총 3개의 도서목록을 만들어 add를 추가해 ArrayList 객체에 담기게 해두었다. 저장소는 미리 static으로 생성자를 만들어 저장소 안에 제품이 있는 상태로 만들어 두었는데, priveate 접근 제어자 때문에 외부에서 해당 변수에 접근할 방법이 없으니 get() 함수를 만들어 사용자가 호출하면 하나의 주소값을 반환하는 싱글턴 패턴을 사용하게 된다. 이로써 유일무이한 저장소가 완성되었다. 이제 이 저장소에 담긴 데이터를 사용자가 호출(전체 상품 보기)하면 사용자 화면에 데이터를 보내는 것을 해보도록 하자.

   HTML에서 사용자가 a태그, 혹은 form태그를 작성하여 submit을 하게 되는 것을 우리는 요청이 발생했다고 부른다. 사용자와 HTML 사이에서 일어난 요청은 곧바로 컨트롤러로 들어와 필요한 데이터를 모두 저장한 후, 저장소인 모델로 들어가 데이터를 가공하여 다시 요청이 발생한 곳으로 데이터를 돌려보내야 한다. 따라서 지정된 주소로 들어오게 되면(webServlet이 주소가 된다) 먼저 저장소를 만들어 request객체에 해당 저장소를 담아 forward를 통해 이동한 장소로 보내게 하였다.

   여기서 주의할 점은 setAttribute로 객체를 담게 되면 다양한 종류를 담아내기 위해 최상위 부모, 즉 조상 요소인 Object타입으로 저장되는데, 옮겨담은 객체를 사용하기 위해서는 아래와 같이 강제 형변환을 통하여 사용해야 한다.

   컨트롤러를 통해 이동된 페이지에서 request에 담긴  객체를 사용하기 위해 형변환을 통하여 새로운 변수에 저장하였다. 이제 Book 클래스를 담아둔 List에서 하나씩 꺼내어 진열하기 위해 반복문을 사용하여 작성하게 되는데, 여기서 함수의 종결어미를 HTML 뒤에 작성하게 되면 그 안에 담긴 HTML내용도 같이 반복되게 된다. 따라서 for문 시작할 때 Book 객체를 하나 꺼내고 필요한 데이터는 get()함수를 통해 해당 객체의 내용을 가져와 반영한다.

   이렇게 for문이 List의 크기만큼 돌며 알아서 내용물을 가져와 반복하게 되니 상단의 이미지처럼 세 개의 책 설명이 나타나는 것을 확인할 수 있다. 이 부분이 V(사용자의 요청, View) → C(컨트롤러) → M(모델, 저장소) → C(컨트롤러를 통해 페이지 이동) → V(사용자의 요청에 따른 View를 반영) 의 순서를 따른 MVC의 기초라고 볼 수 있겠다. 다만 모델은 서버를 통해 다른 데이터 베이스에 접근하는 것을 말하는데, 아직 연결을 배우지 않았기 때문에 임의로 만든 저장소를 모델이라고 가칭했을 뿐임을 참고하자.

   디렉티브 태그와 함께 JSP 페이지를 구성하는 태그 중 하나인 액션태그는 JSP에서 페이지와 페이지 사이를 제어하는데 쓰이거나 자바빈즈(객체 생성)와 같은 다양한 기능을 제공하고 있다. 오늘은 JSP기능을 좀 더 확장 할 수 있는 액션태그를 사용하여 페이지를 제어하거나 변수값을 이용하여 좀 더 동적인 JSP를 작성하는 법을 알아보겠다.

   디렉티브 태그는 <%>로 작성되었지만 액션태그는 사용자 정의 태그처럼 작성하여 사용하게 된다. 이 외에도 다양한 태그가 존재하나 지금은 가장 많이 쓰이는 것 위주로 정리해보았다. 디렉티브는 해당 페이지 내에서 속성이나 환경을 설정하는 데 사용한다면, 액션 태그는 문자 그대로 좀 더 동적인 것에 초점이 맞춰져 있다.

   forward 액션 태그   

   forward 액션 태그는 해당 페이지에서 태그가 실행되면 page에 입력된 다른 파일의 화면을 출력한다. 여기서 주의해야 할 점은 출력버퍼에 송출할 내용을 담는 중 해당 액션이 실행되면 버퍼에 쌓인 내용물을 모두 버리게 되는데, 만약 출력 버퍼를 모두 채울만큼의 내용물이 있다면 클라이언트 화면에 송출하는 상황이 발생하여 예기치 못한 화면이 사용자에게 노출 될 수도 있으니 용량이 큰 웹을 다룰땐 forward 사용에 주의해야 한다.

   그래서 출력된 화면을 살펴보면 forward를 실행한 페이지의 내용물은 하나도 출력되지 않고, 바로 다음 페이지로 넘어가며 해당 jsp 파일에 있는 내용이 출려된 것을 확인할 수 있다.

   include 액션 태그   

   디렉티브 태그에서도 사용되었던 include는 액션 태그에 오면서 그 용도가 살짝 다르다. 먼저 해당 페이지에 다른 페이지의 내용을 삽입하는 것 까진 동일하나, 디렉티브 태그에서는 그저 코드 소스를 복사하여 붙여넣는 방식이었다면 액션 태그는 해당 페이지의 내용을 번역하여 나온 값을 들고와 해당 페이지에 출력하여 붙여넣는다. 즉, forward처럼 아예 이동을 하기 때문에 데이터 처리를 다른 페이지에서 처리할 수 있다. 즉, 이후 작성할 param 액션 태그를 활용하여 파라미터를 다른 페이지에 넘길 수 있는 것이 가능한데, 이렇게 되면 좀 더 동적인 웹페이지를 제작할 수 있게 된다.

   앞서 디렉티브 태그의 include는 어떤 문서의 구조적인 부분이 계속 반복되거나 똑같은 부분을 작성하여 붙여넣는데 용이하다면 액션 태그의 include는 다양한 변수의 값을 규칙에 맞게 처리하는 기능적인 부분을 반영하는데 사용된다.

   param 액션 태그   

   param 태그는 현재 페이지에서 발생된 값들을 다른 페이지에 전송하고자 할 때 사용되는 액션태그다. 앞서 forward와 include 태그는 지정된 파일경로로 이동한다고 했는데, 그들의 종결어미 사이에 param 태그를 사용하게 되면 이동할 때 지정된 값을 가지고 해당 페이지로 넘어갈 수 있다. 즉, 파라미터 전송이 가능한 형태가 된다. 실습에서 forward를 사용하여 넘어갈 페이지에 param 태그를 사용하여 값을 지정해보았다. name은 쉽게 말해서 변수, value는 값인데 키 : 밸류로 저장되는 맵과 유사한 방식으로 저장된다. 여기서 id는 admin, name은 함수를 사용하여 관리자라는 값을 할당했는데 여기서 바로 문자열을 쓰지 않고 URLEncoder를 쓴 이유는 JSP간에 값을 가지고 이동하다 보면 문자 같은 경우는 원 데이터가 손실 날 가능성이 크기 때문이다. 따라서 인코딩과 디코딩을 통해 해당 값을 보호처리 하는 것이 안전하다.

   이렇게 param으로 지정된 값들은 모두 request라는 객체에 담기게 되는데 다른 페이지에서 꺼내어 사용할 경우에는 request가 가지고 있는 get() 함수를 사용하여 꺼낼 수 있다. 값을 꺼낼 때는 맵을 이용한 것 처럼 name(key)명을 입력하면 이어진 값이 출력되게 된다. 여기서 인코딩으로 한번 감쌌던 name의 값을 다시 불러오기 위해서는 디코드 과정을 거치면 문제없이 출력되는것을 확인할 수 있다.

   useBean 액션 태그   

   자바빈즈란, 쉽게 말해서 생성된 객체를 의미한다. jsp 페이지에서 객체를 생성하는 방법은 디렉티브 태그를 통해 패키지를 import시키고 함수 부분에서 객체를 선언하듯 만들면 되지만 이는 함수 내에서 작성하기 때문에 언제든 해당 페이지를 벗어나면 사용할 수 없게 된다. 이를 보완하기 위해 생성된 객체가 언제까지 유지될 지 정하고 조금 더 쉽게 객체를 생성하기 위해 useBean액션 태그를 사용하는 것이다.

<jsp:useBean id="자바빈즈 식별 이름(참조변수)" class="자바빈즈 원본(패키지)" scope="유지 될 범위" />

   여기서 주의할 점은, 생성할 때 파라미터를 받지않는 기본 생성자가 있어야 useBean으로 객체 생성이 가능하다. scope는 해당 객체가 언제까지 사용될 지 예상하여 유통기한을 부여하는 것과 같은데, 사용되는 속성으로는 page(해당 페이지 내에서만 사용), request(1회 이동까지 사용), session(세션이 만료될 때까지 사용), application(서버가 닫힐 때까지 사용) 가 있다.

   jsp에서 객체 생성을 한 뒤 변수의 값을 불러오기 위해 미리 person이라는 클래스를 만들고, useBean을 통해 person이라는 변수에 해당 클래스의 주소를 저장하였다. 사용 범위를 request로 지정하여 한 번의 이동 후에도 사용할 수 있게 하였고, 당장은 이동 없이 해당 페이지에서 person.get()함수를 통해 private로 접근이 제어된 상태인 변수의 값을 호출하는 것을 확인할 수 있었다.

   위와 같이 생성된 객체를 이용하여 내용을 출력하는데, 처음은 원래 저장되어 있던 내용을. 두번째는 set()함수를 이용해 내용을 바꾸고, 다른 페이지의 결과 값을 붙여 넣었더니 set() 함수로 바뀐 값이 출력되어 나온 것을 확인할 수 있었다. 여기서 중요한 것은 scope인데, request(1회 이동)를 사용했기 때문에 해당 페이지에서 바꾼 값이 다른 페이지에도 적용되어 출력되었다. 여기서 범위를 page(해당 페이지)로 바꾸게 되면 exam4-7.jsp에서 생성한 자바빈즈와는 다른 객체가 되기 때문에 아무런 영향을 주지 않는 것을 알아볼 수 있다.

   즉, 자바빈즈를 socpe까지 동일하게 만들어야만 같은 객체로 생성이 된다는 의미이다.

   스크립트 태그로 Java의 기능을 HTML 내에서 구현할 수 있었다면 이번에는 Java의 기능에 대한 속성을 설정할 수 있는 태그를 알아보겠다. 디렉티브 태그는 JSP 페이지에서 어떤 처리를 할 것인지에 대한 기본적인 설정을 할 수 있는 태그로, 각 태그에는 저마다 가진 속성이 다양하게 있다.

   page 디렉티브 태그   

   여기서 language / contentType / pageEncoding 속성은 jsp파일을 생성하면 자동으로 설정되어 나오는 항목이다.

   import 속성의 사용 예시이다. 기존 클래스에 다른 클래스를 가져올 때 사용했던 import기능과 다른 것이 없다.

   조금 주의 깊게 살펴봐야 될 부분은 예외처리 페이지이다. errorPage 속성은 해당 페이지에서 에러가 발생했을 경우 예외처리를 위한 에러 페이지 위치를 지정해 주는 것이고, isErrorPage는 그 에러 페이지를 지정하는 것이다. 물론 지정하지 않아도 경로만 잘 설정했다면 굳이 지정해주지 않아도 되지만 isErrorPage를 설정하는 이유는 true 지정 시, exception 변수를 사용할 수 있게 되기 때문이다.

   include 디렉티브 태그   

   include는 단어 뜻 그대로 '포함하다' 라는 뜻이다. file 속성에서 해당 페이지에 포함시키고자 하는 파일명을 입력해주면 되는데, 여기서 포함 가능한 대표적인 파일로는 HTML, JSP, TXT 등이 있다. 여기서 텍스트 파일은 인코딩 문제가 빈번하게 발생하니 꼭 필요한 것이 아니라면 HTML파일로 사용하는 것을 추천한다.

   말 그대로, 해당 페이지에 가져온 파일 내용을 그대로 붙여넣는 것이기 때문에 코드를 직접 입력 하는 것과 큰 차이를 알 수가 없을 것이다. 하지만 이런 기능을 활용하는 이유는 웹 사이트에서 공통된 부분을 별도의 파일로 만들어 관리하면서 페이지를 모듈화 할 수 있기 때문이다. 별도의 파일로 만들어 include로 포함시키게 되면 추후 수정할 부분이 발생하여도 그 파일만 수정하여 모든 곳에 자동적으로 업데이트가 가능함으로써 매우 중요한 부분이라고 볼 수 있다.

   taglib 디렉티브 태그   

   taglib은 사용자 정의 태그(라이브러리)를 설정할 수 있는데, java언어도 사용할 수 있는 jsp파일에서 html태그로 특정 함수를 표현할 때 사용된다. 이 태그를 사용하기 위해서는 WEB-INF의 lib폴더에 jar(java파일 묶음) 라이브러리 파일이 있어야 사용할 수 있다.

      uri는 경로를 나타내고 prefix 속성은 사용자가 정의한 태그를 식별하기 위한 고유한 태그 네임이다. java의 기능을 그대로 가져온 것을 HTML형식으로 작성하는 게 오히려 더 힘들 수 있는데도 사용하는 이유는 HTML문서 특성상 수천줄에 달하는 내용을 보기 쉽게 관리하기 위해 사용되기도 한다.

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

   기존 메인화면에 작성되어 있던 내용물은 다른 페이지에서도 반복되기 때문에 내용물을 다른 jsp파일로 옮기고 include태그를 사용하여 페이지 모듈화를 진행시킨 상태이다.

   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언어를 바로 해석할 수 없기 때문에 스크립트 태그가 따로 필요하다.

   스크립트 태그를 활용하면 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효과를 줄 수 있는 방법에 대해 알아보았다. 아직 처음 사용하다 보니 지정할 수 있는 속성에 대한 클래스를 외우지 못해서 사용함에 있어 거부감이 느껴지는 방식이었지만 막상 만들어진 결과물을 보면 익혀두는 것이 좋을 것 같단 생각이 든다.