이제 본격적으로 웹 개발이 어떻게 이루어지는지
알아보고 실습해보도록 하겠습니다.
1. 이클립스를 실행을 시키고
왼쪽의 Project Explorer 에서
빈공간에 마우스 우클릭을 한 후
new > dynamic web project
를 선택합니다.
혹시 dynamic web project 가 없으신 분들은
other 를 눌러 찾으시면 됩니다.
2. Project name 을 test 로 해줍시다. (아무거나 해도 상관은 없습니다.)
Target runtime 과 Configuration 이
우리가 설정했던 Apache Tomcat v8.5 가 맞는지 확인해 준 후
Finish 를 눌러줍니다.
3. 아래쪽의 Servers 탭에
No servers are available. Click this link to create a new server...
라고 파란글씨로 되어있는 부분을 클릭해 줍니다.
4. Tomcat v8.5 Server 를 선택하고
아래쪽의 Server name 을 test 로 해줍시다. (이것도 아무거나 해도 상관 없습니다.)
Finish 를 눌러줍니다.
5. 아까 생성된 Project Explorer 탭 아래에 test 라는 다이나믹 웹프로젝트
왼쪽의 화살표를 눌러 WebContent 를 찾은 후 폴더위에서 마우스를 우클릭하여
new > jsp File 을 선택합니다.
마찬가지로 jsp File 이 없으신 분들은
other 에서 검색하여 찾으시면 됩니다.
6. 이름을
test.jsp 로 바꿔준 후 Finish 를 눌러줍니다.
7. 생성된 jsp 에서
<title></title> 사이의 부분과
<body>
</body>
사이에 그 유명한 Hello world!! 라는 글씨를 입력 후
ctrl + s 를 눌러 저장해줍니다.
8. 저장된 test.jsp 파일을 마우스 우클릭 한 후
Run as > 1. Run on Server 를 클릭하여 줍니다.
9. 위에서 생성한 test 라는 서버를 선택하고 Next > 를 눌러줍니다.
10. 오른쪽에 Configuration 에 test 서버가 있는지 확인하고
만약에 왼쪽에 있다면 클릭 후 Add > 버튼을 클릭하여 오른쪽으로 옮겨준 후
Finish 를 눌러줍니다.
이렇게 이클립스에 웹 브라우저가 동작이 되며
title 태그 사이에 작성했던 내용이 홈페이지의 제목으로
body 태그에 작성했던 내용이 페이지 내용으로 들어온 것을 확인할 수 있습니다.
위쪽의 http://localhost:9090/test/test.jsp
라는 인터넷 주소를복사하여
익스플로러나 크롬같은 웹 브라우저에 주소창에 적어주고 실행시키면
다음과 같이 브라우져 상에서도 동작하는 것을 확인하실 수 있습니다.
이것이 웹 개발의 가장 기초가 되는 작업입니다.
이제 저 빈 화면에 Hello world!! 라는 글씨가 아닌
여러가지 코드를 이용하여 메뉴를 넣고 이미지를 넣고 버튼을 넣으면
하나의 홈페이지가 탄생하게 되는 것입니다.
이제 막 걸음마를 떼었으니
앞으로 잘 배워서
여러분만의 홈페이지를 작성하는 날이 왔으면 좋겠습니다.
'개발 > 웹개발 기본가이드' 카테고리의 다른 글
| 기본 태그 사용법 input type button, text, hidden, 버튼이벤트 value 가져오기 (0) | 2019.01.31 |
|---|---|
| JSP 의 기본 input type 과 a 태그 (0) | 2019.01.29 |
| 2. 이클립스에서 개발환경 설정하기 (0) | 2019.01.21 |
| 1. 개발환경 세팅(3) 아파치 톰캣 apache tomcat 설치 및 환경변수 설정 (4) | 2019.01.17 |
| 1. 개발환경 세팅(2) 이클립스 설치 (가장 최신버전 Eclipse 2018-12 (4.10)) (0) | 2019.01.14 |