블로그
00.개요
본 포스트는 JSP를 사용하여 풀스택 웹페이지를 개발하는 것으로 합니다.
구성환경
운영체제 : Windows10
통합개발환경 : Eclipse EE
웹서버 : Apache Tomcat 9.0
데이터베이스 : MySQL
CSS : 부트스트랩
사용언어 : JAVA, JavaScript, Html
HTML은 사람의 몸이고 CSS는 옷이며 JS(JavaScript)는 팔벌려뛰라고하는 동작이며 JAVA는 팔벌려 뛰기위해 어느 근육을 사용해서 처리해야하는지 판단하는 뇌와같은 기능을한다고 생각합니다.
01. 이클립스 설치
다운로드
https://www.eclipse.org/downloads/
사용언어인 JSP에 최적화 되어있는 통합개발환경(IDE; Integration Development Environment)인 이클립스 툴을 사용합니다. 최신버전이 매번 갱신됨으로 해당 홈페이지에서 직접 다운로드 받아주시길 바랍니다.
Eclipse IDE for Java EE Developers 선택후 설치 진행
인스톨러를 실행하시면 2번째 버전을 선택하고 설치를 진행해 주세요.
02. 자바 설치
다운로드
다운로드 및 설치를 통해 최신버전을 유지해주시길 바랍니다.
03. 웹서버(아파치 톰캣) 다운
다운로드
https://tomcat.apache.org/download-90.cgi
해당 사이트에 들어가 zip을 다운로드 받아주세요
내가 원하는 경로에 압축을 풀자
03. MySQL 설치(DB 필요시 선택)
다운로드
https://dev.mysql.com/downloads/mysql/
해당 패이지 하단의 Go to Download Page 를 클리합니다.
mysql-installer-community*.msi 의 Download를 클릭합니다.
다음페이지로 이동을 하게되는데 맨아래 No thanks, just start my download 를 클릭하고 다운로드를 진행해주세요
...
및줄친 버튼을 클릭하여 설치를 진행합니다.
...
도중에 root 비밀번호를 설정해주고 설치를 계속 진행합니다.
03. 부트스트랩 설치
다운로드
http://bootstrapk.com/getting-started/#download
압축파일을 다운로드 해주세요
이클립스 프로젝트 생성 및 기본 환경 구성
이클립스를 실행하면 이와같은 창이 뜹니다. 프로젝트를 생성할 위치를 지정합니다 그후 Launch 버튼을 누릅니다.
프로젝트를 생성하기위해 File -> New -> Other를 선택해줍니다
Dynamic Web Project 를 검색하여 Next 를 누릅니다.
프로젝트 이름을 입력하고 Finish를 눌러줍니다.
나의 프로젝트 파일이 만들어졌습니다.
2. 부트스트랩 설치
압축을 풀었던 부트스트랩파일을 WebContent에 드래그하여 복사를해줍니다
복사가 완료된 모습입니다. 부스트스랩의 디자인을 사용할수있게 되었습니다.
3. 아파치 톰캣 설치
File -> New -> Other 를 클릭해줍니다
Server를 검색하고 선택후 Next를 클릭해줍니다.
Apache -> Tomcap v9.0 Server 를 클릭하고 Next 를 눌러줍니다.
나만의 서버이름을 설정하고(선택) Browse로 Apache Tomcat이 압축풀린 폴더를 지정해주고 Next 를 누릅니다
서버가 제공할 프로젝트를 Add를 눌러 오른쪽으로 보내고 Finish를 누릅니다.
Server에 MyFirstProject가 등록이되고 서버 설치가 완료가 됩니다.
4. 나만의 웹페이지 만들기
WebContent 폴더에서 오른쪽을 클릭하고 New JSP File을 클릭합니다.
파일이름을 지정하고 Finish를 누릅니다.
JSP 파일을 생성하면 The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path 에러메세지가 나오게됩니다.
이를해결하기위해서 아래 내용을 따라해주시길 바랍니다.
MyFirstProject 오른쪽 마우스 클릭을하고 맨아래 Properties를 클릭합니다.
왼쪽바에서 Java Build Path -> Libraries -> Add Library를 클릭하면 Add Library 창이 하나 뜨게되는데 Server Runtime을 클릭해줍니다.
아까 만든 서버를 선택하고 Finish를 눌러줍니다.
서버 Library가 추가가되고 Apply를 누르고 닫기를 누르면 에러메세지가 발생하지 않게 됩니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>부트스트랩 기본 틀</title> <link href="./css/bootstrap.min.css" rel="stylesheet"> <link href="./css/custom.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="./js/bootstrap.min.js"></script> </head> <body> <button class="btn btn-danger">내용입력</button> </body> </html> | cs |
해당 코드를 복사하여 Test.jsp에 붙여넣어줍니다.
해당페이지에서 실질적인 내용을 적어 서버를 실행하게되면 원하는 결과하면을 받아볼수있습니다.
5. 서버 구동하기
상단 재생버튼을 누르면 다음과 같이 창이뜹니다 Finish를 눌러주세요
액세스 허용을 합니다
잠시후 서버가 구동이되고 이클립스 자체 웹브라우저가 실행이되고 다음과같이 빨간 버튼이 보이면 나만의 JSP 홈페이지를 만들준비가 끝난것입니다.