1-1.Eclipse에 JSP로 시작화면 만들기

(이 글은 기본적으로 Eclipse, Sql Developer 설치가 완료된 상태를 가정하고 작성되었습니다.)

• 사용 기술 : Java, JSP, Oracle, Bootstrap, CSS, HTML
• 오늘의 기술 : JSP
• 사용 툴 : Eclipse

안녕하세요 하모예입니다. 

오늘부터 시간이 나는대로 꾸준히 업로드를 해서 로그인, 회원가입, 게시판을 다양한 언어를 활용한 버전으로 소개해드리려고 합니다. 

DBMS를 활용하지 않은 버전을 제일 먼저 보여드리려 하다가,

실무에서 GUI만으로 페이지를 구성할 가능성은 제로에 가깝다고 판단하여 이를 제외하고 

MyBatis나 Spring을 활용하지 않는 기본적인 JAVA베이스 페이지부터 하나씩 보여드리겠습니다. 

 

글을 시작하기에 앞서 상단에 말씀드렸듯이 Eclipse나 STS와 같은 툴, Sql Developer 설치,

utf-8로 인코딩 처리, tomcat설치 및 등록에 관한 건 선배님들의 블로그를 참고해주세요. 

 

제가 지금까지 개발을 하면서 가장 많이 참고했던 인코딩 처리관련 글은 갱짱님의 글이고, 

https://gangzzang.tistory.com/entry/이클립스-개발환경-UTF8-인코딩-설정

이클립스(Eclipse) 개발환경 "UTF-8" 인코딩 설정

tomcat설치 및 서버 등록관련해서 가장 많이 참조했던 글은 금소니님의 글입니다. 

https://goldsony.tistory.com/26

이클립스에서 톰캣(Tomcat) 설치하고 테스트하기

두분 모두 아주 친절하게 글을 작성해두셨으니 참고해주세요. 

인코딩과 서버등록까지 모두 끝나셨다면

이제 Eclipse, 이클립스에서 Dynamic Web Project, 다이나믹 웹 프로젝트를 만들어봅시다. 

 

1. 좌측에 Project Explorer에서 오른쪽 마우스를 클릭한 후 [New] - [Dynamic Web Project]를 클릭해주시거나

상단 메뉴바에서 [File] - [New] - [Dynamic Web Project]를 클릭해주세요. 

2. 상단에 프로젝트 명을 입력한 후 Next버튼을 눌러주세요. 

 

3. 아래 블러된 부분을 모두 지워주시고 경로를 web\WEB-INF\classes로 바꿔주세요. 

사실 이 경로를 바꿔주지 않아도 지금 당장은 큰 문제가 생기지 않습니다. 

그럼에도 Default output folder를 바꿔주는 이유는 나중에 Spring Framework, 스프링 프레임워크를 사용할때를 대비해서 습관을 들이기 위해서입니다. 

스프링 프레임워크(포함 대부분 JAVA 프레임워크)는 WEB-INF\classes경로에 class파일들을 저장하도록 설정이 되어 있기 때문에 project를 생성할때 경로의 변경이 필수적이기 때문입니다. 

경로를 바꿔주셨다면 Next를 눌러주세요.

 

4. 다음은 Content directory를 web으로 변경하시고, 아래 Generate web.xml deployment descriptor를 체크해주세요.

눈치가 빠르신 분들은 바로 아시겠지만, 3번에서 Default output folder에 지정했던 web과 동일하게 적어주셔야 합니다.

다시말해 디폴트로 지정되어 있는 WebContent를 쓰시려면 Back하셔서 web부분을 WebContent로 바꿔주셔야 합니다.

그치만... 제가 web으로 적는데는 다 이유가 있겠죠? ㅎㅎ

Content directory를 web으로, 아래 체크박스에 체크를 하셨다면 Finish를 눌러주세요. 

 

5. 이제 거의 다왔습니다!!

스프링 프레임워크를 쓸때를 대비해서 최대한 유사하게 web밑에 views라는 폴더를 만들어줍니다.

6. 마지막으로 views밑에 index.jsp라는 jsp 파일을 만들어주세요. 

5번에서 views 폴더를 만든 방법과 동일하게 views폴더에서 오른쪽 마우스를 클릭해서 [New] - [JSP File]을 클릭하시고 

File Name에 login.jsp라고 입력하시면 됩니다. 

만일 New에 JSP File이 없는 경우 [Others]를 클릭하셔서 마법사에 jsp를 검색하시면

위와 같은 방법으로 JSP File을 추가하실 수 있습니다.  

이제 [Next > ] - [Finish]를 눌러주시면 

축하합니다!!  JSP 파일을 만드셨네요!!

이제 BootStrap을 활용해서 세상에서 가장 간단한 로그인 페이지를 만들어봅시다!!