JSP 프로그래밍의 시작
이전 포스팅에서 JSP 프로그래밍을 할 수 있는 환경을 구축 하였습니다. 만약 여러분의 컴퓨터에 JSP를 프로그래밍 할 수 있는 환경이 갖추어 지지 않았다면, 이전 포스트를 보면서 JSP 환경 구축을 하시기 바랍니다. 프로그래밍 환경이 구축되지 않았다면 JSP 프로그래밍 하기 힘들어요~ ( 메모장을 이용해서 서버에 올리는 식으로 할 수도 있지만 시간이 많이 걸리고 복잡해서 처음 배우는 분들에겐 비추입니다. )
2010/04/06 - [컴퓨터 공학/Java] - 자바( Java )설치하기 & 환경변수( path ) 설정하기
2010/04/06 - [컴퓨터 공학/Java] - 자바( JAVA ) 개발 환경 설치( IDE 설치 ) - 이클립스( Eclipse ) 설치하기 및 오류
2010/07/15 - [컴퓨터 공학/Java] - 이클립스와 톰캣 설치 및 연동하기
이클립스 프로젝트 생성하기
그러면 JSP 프로그래밍을 하기위해서 개발환경인 이클립스를 실행시킵니다.
이클립스에도 여러가지 버젼이 있는데, 저는 갈릴레오 버전을 사용하고 있습니다. 갈릴레오 버전이 나온지 얼마 안되서 아직 호환성 문제 및 여러가지 잡음이 있는데, 만약 JSP 프로그래밍을 하다가 안 되는 점이 있으면, 잘 찾아 보시고 정 안되면 이전 버전인 유로파 같은 버전을 다시 설치해 주시기 바랍니다.
어짜피 이클립스는 인스톨 과정이 없고, 그냥 압축 파일만 압축 해제 해주면 되기 때문에 다운그레이드 하는 과정이 굉장히 쉽습니다.
하위 버전을 사용 하실 경우 톰캣 연동 플러그인을 다시 설치해 주셔야 합니다. ( plugins 폴더에 다시 집어 넣어 주셔야 합니다. )
2010/07/15 - [컴퓨터 공학/Java] - 이클립스와 톰캣 설치 및 연동하기
하위 버전을 사용 하실 경우 톰캣 연동 플러그인을 다시 설치해 주셔야 합니다. ( plugins 폴더에 다시 집어 넣어 주셔야 합니다. )
2010/07/15 - [컴퓨터 공학/Java] - 이클립스와 톰캣 설치 및 연동하기
이클립스를 실행 하셨으면, [File] -> [New] -> [Project]를 선택합니다.
Project 를 새로 생성 할 수 있는 창이 뜨는데요. 이 메뉴 중에서 'Web' 의 하위메뉴에서 'Dynamic Web Project'를 선택해 줍니다.
여기서 Dynamic Web Project 란 동적인 웹 페이지를 만들 수 있는 프로젝트를 말합니다. 동적인 웹 페이지란, 게시판 처럼 데이터 베이스나 어떤 입력, 조건 등에 따라서 웹 페이지의 내용이 동적으로 변하는 페이지를 말합니다. JSP나 PHP, ASP 등의 웹 프로그래밍 언어로 쓰여진 웹 페이지가 이런 동적 웹페이지 ( Dynamic Web Page )에 해당합니다.
반면 Static Web Project는 JSP 같은 웹 프로그래밍 언어가 아니라 단지 HTML과 Javascript, css와 같은 웹 페이지 자체의 동적인 요소가 없는 페이지를 만드는 프로젝트를 의미합니다.
우리는 JSP 프로그래밍을 할 것이기 때문에 'Dynamic Web Project'를 선택합니다.
반면 Static Web Project는 JSP 같은 웹 프로그래밍 언어가 아니라 단지 HTML과 Javascript, css와 같은 웹 페이지 자체의 동적인 요소가 없는 페이지를 만드는 프로젝트를 의미합니다.
우리는 JSP 프로그래밍을 할 것이기 때문에 'Dynamic Web Project'를 선택합니다.
'Dynamic Web Project'를 선택 하셨으면 위와 같은 창이 나올 겁니다. 'Project Name'에 적절한 프로젝트 이름을 써줍니다. 나머지는 그냥 기본 설정을 따라가시면 됩니다.
그 밑에 'Project contents' 는 프로젝트의 컨텐츠 ( 설정사항, 소스 코드 등 ) 들이 어느 디렉토리에 저장이 될
것인가를 말합니다. 기본으로 설정을 하면, 여러분의 'Work Space' 에 저장이 될 겁니다.
그리고 'Target Runtime'은 개발한 JSP 등의 실행을 위한 서버를 설정하는 곳인데, 나중에 설정을 하게 될 것이니 <None>을 사용하도록 합니다.
그리고 'Target Runtime'은 개발한 JSP 등의 실행을 위한 서버를 설정하는 곳인데, 나중에 설정을 하게 될 것이니 <None>을 사용하도록 합니다.
프로젝트 이름을 입력 하셨으면, [Finish] 를 눌러서 진행합니다.
프로젝트가 생성되어 'Project Explorer'에 방금 생성한 프로젝트가 등록이 되어 있는 것을 볼 수 있습니다.
저는 'JspProgramming' 이라는 이름으로 생성을 했습니다. 여러분도 여러분이 써 넣으신 프로젝트 이름이 저 곳에 뜰 겁니다.
"Hello, world!" 프로그램 소스 작성
이제 JSP를 프로그래밍 할 수 있는 프로젝트까지 생성이 되었습니다.
지금부터는 실제로 JSP 프로그래밍을 해보도록 하겠습니다. 프로그래밍을 배울 때, 가장 먼저 작성하는 프로그래밍이 바로 Hello, World 인데요. 간단하기 "Hello, World!"라는 문자를 출력하는 프로그램 입니다.
Project Explorer에 보시면 'WebContent' 라는 폴더가 있습니다. 이 폴더를 선택하고 우클릭해서 폴더를 하나 만들어 줍니다.
[우클릭] -> [New] -> [Folder] 를 선택합니다.
폴더 이름에 적절한 이름을 넣어줍니다.
저는 HelloWorld 라는 이름을 넣었습니다.
적절한 이름을 넣고 [Finish]를 선택합니다.
뭐, 사실 이렇게 폴더를 만들어서 관리를 하지 않아도 됩니다만 효과적인 소스 관리를 위해서 저는 폴더를 만들어서 관리를 하는 편입니다. 나중에 프로젝트가 커지거나 소스 파일이 많아지면 헷갈리게 되거든요 ^^
귀찮으신 분들은 폴더 안 만드셔도 됩니다.
귀찮으신 분들은 폴더 안 만드셔도 됩니다.
HelloWorld 라는 폴더가 생성이 되었으면 ( 여러분이 입력한 폴더가 생성이 되었으면 ) 그 폴더를 선택하고 [우클릭] -> [New] -> [JSP]를 선택합니다.
만약 JSP가 보이지 않으신다면,
[New] -> [Other] -> 'Web' -> 'JSP' 를 선택하시기 바랍니다.
[New] -> [Other] -> 'Web' -> 'JSP' 를 선택하시기 바랍니다.
"File Name" 에 생성할 파일이름을 써 넣습니다.
저는 "HelloWorld.jsp"를 써 넣겠습니다.
[Finish] 를 눌러도 되지만 [Next]를 눌러서 템플릿 소스를 선택하도록 하겠습니다.
여러가지 템플릿 항목들이 있는데, 그 중에 "New JSP File (html)" 을 선택하고 [Finish] 버튼을 누르겠습니다.
템플릿이란?
프로그래밍을 하게 되면, 기본적인 구조를 계속해서 입력해야 할 상황이 있습니다.
HTML을 예로 들면,
<html>
<head>
프로그래밍을 하게 되면, 기본적인 구조를 계속해서 입력해야 할 상황이 있습니다.
HTML을 예로 들면,
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
이 부분은 새로운 html 페이지를 만들 때 항상 반복적으로 써 넣어야 합니다. 하지만 템플릿을 사용하면 이런 기본적인 구조가 미리 쓰여진채로 생성이 되어서 보다 편리하게 프로그래밍을 할 수 있습니다.
물론 Ctrl + C,V 를 해서 복사를 할 수도 있지만 이 기능을 사용하는게 더 깔끔하고 멋지지 않을 까요? ㅋㅋ
<body>
</body>
</html>
이 부분은 새로운 html 페이지를 만들 때 항상 반복적으로 써 넣어야 합니다. 하지만 템플릿을 사용하면 이런 기본적인 구조가 미리 쓰여진채로 생성이 되어서 보다 편리하게 프로그래밍을 할 수 있습니다.
물론 Ctrl + C,V 를 해서 복사를 할 수도 있지만 이 기능을 사용하는게 더 깔끔하고 멋지지 않을 까요? ㅋㅋ
그럼 "Hello, World!"를 출력하는 프로그램을 작성해 보도록 하겠습니다.
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
Hello, World!
</body>
</html>
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
Hello, World!
</body>
</html>
단순히 템플릿에 의해 생성된 내용 중에 '<body>' 와 '</body>' 사이에 "Hello, World!" 만 타이핑 해서 넣은 화면입니다. 템플릿을 이용하면 편리하긴 하지만 좀 더럽게 느껴질 수도 있습니다. 생략 할 수도 있는 것들이 추가 되니까 말이죠.
[Ctrl] + [F11] 을 눌러서 실행을 시킵니다.
위와 같은 창이 뜨는데, 아마 'IBM WebSphere v6.0' 이라는 항목이 기본으로 설정되어 있을 텐데, 조금 위로 올라가면
'Apache' -> 'Tomcat v5.5 Server' 가 있을 겁니다. 여기서 여러분이 설치한 톰캣 서버의 버전을 선택해 주시면 됩니다. 저는 5.5 버전을 설치했으니 v5.5 를 선택하겠습니다.
'Tomcat Installation directory'의 [Browse]를 클릭해서 여러분이 이전에 톰캣 서버를 설치한 디렉토리를 지정해 줍니다.
기본 디렉토리는 "C:\Program Files\Apache Software Foundation\Tomcat 5.5" 입니다.
[Next]를 눌러서 진행합니다.
다음은 실행에 포함시킬 프로젝트를 선택하는 화면입니다.
'Project" Explorer' 에 여러개의 프로젝트를 포함 시킬 수 있는데, 그 중에 실행 시킬 프로젝트를 고르는 화면입니다. Configured 라는 쪽이 실행 시킬 프로젝트 목록이고, Available 이라는 쪽이 추가 시킬 수 있는 프로젝트입니다. 여러개의 프로젝트가 연계해서 작동하는 큰 프로젝트가 아니면 대부분 현재 실행되고 있는 프로젝트만 포함 시킵니다.
이렇게 서버 설정이 끝나고, 다시 [Ctrl] + [F11] 을 눌러서 프로젝트를 실행 시킵니다.
자, Hello, World! 라는 문자열이 뜬 것이 보입니다.
이제 JSP 프로그래밍을 할 수 있는 개발 환경과 간단한 JSP 프로그래밍을 해 봤는데요. 앞으로 배울 것이 더 많고 많이 배울 수록 해보고 싶은 것들이 더 많게 될 것입니다.
JSP 학습 추천 도서