유디의 공간정보·개발일기

1. 0809_JSP, 클라이언트/서버, IP, IDE, 웹서버 도구 본문

JSP & Servlet

1. 0809_JSP, 클라이언트/서버, IP, IDE, 웹서버 도구

55yudi 2021. 8. 10. 21:26
1. JSP outline
  1. Internet
  • Inter-Network : 수많은 네트워크
  • 인터넷의 서비스

 

 2. 클라이언트 / 서버

  • 클라이언트 : 웹브라우저(크롬, 인터넷 익스플로러,엣지, 파이어폭스 등)
  • web browser market share 2021을 보면 크롬 점유율이 가장 높다.
  • 서버 : 웹서버
  • 웹서버 : 대표적인 웹서버에는 톰캣(Tomcat), IIS(Internet Information Server), 아파치(Apache)
  • (IIS --> 제어판/윈도우기능켜기끄기/인터넷정보서비스)

 

 3. IP 확인하기

  • Window일 경우 : cmd -> ipconfig
  • Mac일 경우 : terminal -> ifconfig 
  • terminal에서 확인한 IP와 whoami사이트에서 확인한 IP가 다름
  • 모바일도 ip주소를 갖는다. 
    • cmd / terminal에서 확인한 IP : 사설 IP
    • whoami에서 확인한 IP : 공인 IP (외부로 나가는 IP)
    •   
        공인IP 사설IP
      할당 주체 ISP(인터넷 서비스 공급자) 라우터(공유기) -- 192.의 경우
      할당 대상 개인 또는 회사의 서버(라우터) 개인 또는 회사의 기기
      고유성 인터넷 상에서 유일한 주소 하나의 네트워크 안에서 유일
      공개 여부 내/외부 접근 가능 외부 접근 불가능

 

 4. HTML(HyperText Markup Language)

  • 웹 페이지를 만들기 위해 필요함
  • 태그로 이루어진 언어

 5. Javascript

  • 프로그래밍 언어
  • 웹페이지에서 기능이 필요하기 때문에   예) 존재하는 아이디 확인, 패스워드 확인(두 번씩 입력) 등
  • 서버측에도 사용함, Node.js + express
  • 정적인 HTML 콘텐츠를 프로그램 구현을 통해 동적으로 변경하거나 사용자와의 상호작용을 담당

  6. IDE(Integrated Development Environment, 통합개발환경)
   - editor, debugger, linker, compiler, library 통합
   - Eclipse or Intellij (android sdk intellij)

 

7.  IP
   Port
    1~65535번
   - 1024번 이하는 시스템이 이미 사용하고 있을 가능성이 높다.
   - 1521 --> 오라클이 사용하는 포트 번호
   - 8080 --> 오라클
   - 9000 우리가 사용할 포트

   - cmd 창에 netstat -na | findStr 1521 입력
     동작중인지 아닌지 포트 상태가 나옴

Eclipse에서 실습하기

 

  1. 서버연동

  • Help -> About Eclipse 실행 후, Enterpirse 가 붙어있는 것을 확인
    •  Editor, Debugger, Linker
  • Window -> Show View -> Other -> Servers  -> Open
  • 이클립스 Servers에 New Server 클릭 - Tomcat v9.0 Server 선택 - Next - Browse - 설치한 tomcat 9.0 폴더 경로 찾아서 클릭 - Finish

 

Tomcat v9.0 Server 선택

 

Browse - 설치한 tomcat 9.0 폴더 경로 연결하기

 

콘솔창 위치의 톰캣서버 더블클릭해서 overview 띄우고 포트 변경하기

  • 서버 실행을 하면 8080 포트 관련 오류가 남
    • Oracle : 1521 / 8080
    • Tomcat : 8080
      • Oracle과 Tomcat 충돌로 인해 포트번호를 9000 등으로 변경 
      • 1024번 이하는 시스템이 사용하고 있을 가능성이 높다.
  • HTTP/1.1의 Port Number 을 9000으로 바꿈

 

  • File - New - Other - web 검색 - Dynamic Web Project - Next - Project name : myweb (반드시소문자) - finish - Open Perspective
  • myweb 프로젝트 안에 있는 WebContent 폴더에 마우스 오른쪽 버튼 클릭 -> HTML File -> File name : introduction 입력 -> finish
  • myweb 프로젝트에서 마우스 우클릭 -> Run As -> Run on Server -> Finish
  • url에 /introduction.html 을 입력 후 엔터

 

  • 클라이언트가 웹페이지를 언제 요청하나?
    • 사용자가 링크나 태그를 클릭하면 웹브라우저는 서버에게 요청을 보낼 때
    • 주소창에 주소를 입력했을 때도 요청을 보낼 때
    • 새로고침 버튼을 누를 때도 요청을 보낼 때
    • 폼 태그의 서브밋을 할 때도 요청을 보낼 때
    • ajax에서 요청을 보내기도 함
  • Client(Web Browser)와 Server(Tomcat)
    • 1. 브라우저에서 주소 입력창에 위의 주소를 입력하고 엔터를 침
      • 서버주소 : localhost(자기 자신) 또는 내 IP주소
      • Port : 9000
      • 요청한 컨텐츠는? introduction.html
      • 쿼리문자열 (?키=밸류&키=밸류)
    • 2. 서버는 그 요청을 받아서 있으면 찾아서 응답하고, 없으면 404 상태코드로 응답함
    • 404 Not Found 오류 : 찾지 못함
    • 304 Not Modified 오류 : 요청된 리소스를 재전송할 필요가 없다.

 

  • 서버측에서 무슨 일이 일어나나요?
  • 변환된 소스파일에 해당하는 메서드가 실행되고 html에 결과가 나타남
  • jsp파일도 html처럼 생겼다는 특징!!!
  • jsp파일을 생성하면 java파일로도 같이 생성된다는 것

  • 컴파일 : 어떤 언어의 코드를 다른 언어의 코드로 바꿔주는 것,
               소스코드 파일을 컴파일해서 클래스파일로 변환하는 것

  • 한글깨짐 현상 및 UTF-8로 encoding하기
      - window-preferences- encoding-workspace 에서 other체크하고 utf-8 로 변경
      - jsp files- encoding 에 맨위꺼(utf-8) 변경하고 apply

c.f. Vue, React, Angular라는 기술이 있음

  • 클라이언트 측 실행 언어란 : javascript, 웹브라우저에서 실행된다.
  • 서블릿 : 서버에서 웹페이지 등을 동적으로 생성하거나
                  데이터 처리를 수행하기 위해 자바(Java)로 작성된 프로그램

  • 정적 웹페이지 : 컴퓨터에 저장된 텍스트 파일을 그대로 보는 것, HTML
  • 동적 웹페이지 : 저장된 내용을 다른 변수로 가공처리하여 보는 것, PHP, ASP, JSP

  • WebContent 폴더 또는 WebApp 폴더에서 진행
  • myweb 프로젝트 안에 WebContent폴더에서 마우스 오른쪽 클릭버튼 하여 확장자(.html, .jsp 등) 에 알맞게 생성
  • introduction_html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>	
	테스트 
	<a href="kyj.html">홍길동보기 </a>
	<form action="kyj.html">
		<input type="submit" value="소개보기">
	</form>
	<a href="myjsp.jsp">jsp요청</a>
	<script>
		alert('haha'); //alert이라는 함수가 호출된거고 alert이라는 함수가 클라이언트(크롬)에서 실행됨 
	</script>
</body>
</html>

 

 

  • kyj.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>홍길동을 소개합니다.</h1>
	<a href="https://www.youtube.com"></a> <br>
	<h4>부서번호를 입력하고 버튼을 눌러보세요!</h4>
	<form>
		부서번호 : <input type="text" name = "deptId"><br>
		<input type ="submit" value="제출">
	</form>
</body>
</html>

 

  • myjsp.jsp
  • <%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	이것은 동적페이지입니다. 동적이란 의미를 확실히 파악해두길! <br>
	=> 클라이언트가 요청할 때마다 응답내용이 달라질 수 있는 페이지를 의미한다.
	지금 시각은 <%= new Date() %>
	부서번호에 따라 부서원들의 정보를 출력한다면...
	80번 부서원 정보출력
	100번부서
	110번 부서
</body>
</html>
  • .metadata -> myjsp 검색 후 -> myjsp_jsp.java 복사 -> Java Resource 안에 src폴더에 복사 붙여넣기

 

  • JSP 페이지 처리 과정
    • [클라이언트(웹브라우저) :
      1. JSP 요청(Hello.jsp)] -> [ 웹서버 : JSP페이지(Hello.jsp) -> 2.번역 -> 서블릿 프로그램(Hello_jsp.java) -> 3.컴파일 -> 서블릿 클래스(Hello_jsp.class) ] ->  4. JSP서블릿 실행응답 (가공된 HTML문서)
    •  서버측
      • 어떤 jsp파일이 있을 때 해당하는 .java파일이 만들어지고 class가만들어지면서 변환된  _jspService 메소드가 실행됨. 그리고 가공된 HTML문서로 결과를 던져줌.

'JSP & Servlet' 카테고리의 다른 글

[JSP] <jsp:include>, <%@ include ...%>  (0) 2021.08.11
[JSP] JSTL 사용 방법 - 주요 태그 문법 정리  (0) 2021.08.10
JSTL - <c:forEach>, <c:forTokens> 태그 사용법  (0) 2021.08.10
[JSP] request.getParameter()  (0) 2021.08.10
2. 0810_JSP문법, script tag, directive tag, action tag, 내장 객체  (0) 2021.08.10
'JSP & Servlet' Related Articles more