728x90

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> loginForm.jsp </title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <br />
   <form action="loginPro.jsp" method="post">
   <h2 align="center"> 로그인 </h2>
   <table>
      <tr>
         <td>아이디</td>
         <td><input type="text" name="id"></td>
      </tr>
      <tr>
         <td>비밀번호</td>
         <td><input type="password" name="pw"></td>
      </tr>
      <tr>
         <td colspan="2"><input type="checkbox" name="auto" value="1" /> 자동로그인</td>
      </tr>
      <tr>
         <td colspan="2">
         <input type="submit" value="로그인" />
         <input type="button" value="회원가입"  onclick="window.location='signupForm.jsp'"/>
         </td>
      </tr>
   
   </table>
   </form>

</body>
</html>
728x90
728x90

- 자바

 

package web.jsp07.model;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.naming.Context;
import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.sql.DataSource;

public class MemberDAO {

	   	// 커넥션 메서드 
		private Connection getConnection() throws NamingException, SQLException {
			Context ctx = new InitialContext(); 
			Context env = (Context)ctx.lookup("java:comp/env");
			DataSource ds = (DataSource)env.lookup("jdbc/orcl"); 
			return ds.getConnection(); 
		}
		//회원가입 처리
		public void addMember (MemberDTO dto) {
			Connection conn = null; 
			PreparedStatement pstmt = null; 
			ResultSet rs = null; 
			
			try {
				conn = getConnection(); // Naming/SQLException 발생가능 
				String sql = "insert into member values(?,?,?,?,?,sysdate)";
				// 커넥션으로 준비한 쿼리문 주고 실행기능 갖는 pstmt 리턴받기 (쿼리문 준비)
				pstmt = conn.prepareStatement(sql);
				pstmt.setString(1, dto.getId());
				pstmt.setString(2, dto.getPw());
				pstmt.setString(3, dto.getName());
				pstmt.setString(4, dto.getGender());
				pstmt.setString(5, dto.getEmail());
			
			
				int result  = pstmt.executeUpdate(); 
				System.out.println("insert result : " + result);
			
			
				
			}catch(Exception e) { // Naming/SQLException 발생했을때 둘다 받아줄 부모로 처리 
				e.printStackTrace();
			}finally {
				
				if(pstmt != null) try { pstmt.close(); } catch(SQLException e) { e.printStackTrace(); }
				if(conn != null) try { conn.close(); } catch(SQLException e) { e.printStackTrace(); }
			}
			
		}
			
		// 로그인 : id, pw 맞는지 체크해서 결과 돌려주는 메서드
		//			id,pw 맞으면 true, 둘중하나라도 틀리거나 없으면 false
		public boolean idPwCheck(String id, String pw) {
			System.out.println("idPwCheck 호출!");
			boolean result = false; // 최종 결과 리턴해줄 변수 미리 선언
			Connection conn = null; 
			PreparedStatement pstmt = null; 
			ResultSet rs = null; 
			
			try {
				conn = getConnection(); // Naming/SQLException 발생가능 
				String sql = "select * from member where id =? and pw =?";
				pstmt = conn.prepareStatement(sql);
				pstmt.setString(1, id);
				pstmt.setString(2, pw);
				
				rs = pstmt.executeQuery(); 
				// rs에 돌려받은 결과에 따라 result 변수값 변경 
				if(rs.next()) {
					System.out.println("rs.next() -> true");
					result = true;
				}
				
			}catch(Exception e) { // Naming/SQLException 발생했을때 둘다 받아줄 부모로 처리 
				e.printStackTrace();
			}finally {
				if(rs != null) try { rs.close(); } catch(SQLException e) { e.printStackTrace(); }
				if(pstmt != null) try { pstmt.close(); } catch(SQLException e) { e.printStackTrace(); }
				if(conn != null) try { conn.close(); } catch(SQLException e) { e.printStackTrace(); }
			}
			return result; // result변수에 들어있는 결과 리턴 
		}
	}
728x90
728x90

- 자바

package web.jsp07.model;

import java.sql.Timestamp;

public class MemberDTO {
				private String id;
				private String pw;
				private String name;
				private String gender;
				private String email;
				private Timestamp reg;
			
				
				public String getId() {
					return id;
				}
				public void setId(String id) {
					this.id = id;
				}
				public String getPw() {
					return pw;
				}
				public void setPw(String pw) {
					this.pw = pw;
				}
				public String getName() {
					return name;
				}
				public void setName(String name) {
					this.name = name;
				}
				public String getGender() {
					return gender;
				}
				public void setGender(String gender) {
					this.gender = gender;
				}
				public String getEmail() {
					return email;
				}
				public void setEmail(String email) {
					this.email = email;
				}
				public Timestamp getReg() {
					return reg;
				}
				public void setReg(Timestamp reg) {
					this.reg = reg;
				}
			
}
728x90
728x90

 

create table member( --테이블 만들기
    id varchar2(50) primary key,
    pw varchar2(50) not null,
    name varchar2(20) not null,
    gender varchar2(20),
    email varchar2(50),
    reg date default sysdate
);
desc member;  -- 테이블(맴버)참조
commit; -- 커밋
select * from member;  -- 출력용
728x90
728x90

진행 순서 
1) 회원가입에 필요한 항목을 DB 테이블 만들기

2) Member DTO로 변수와 get/set메서드 만들기  

 3) Member DAO 만들기 

 

1 - DB와 연결하는 메서드

2 - 회원가입에 필요한 메서드
받은값들을 연결된 DB에 차례대로 넣어주는 메서드

3 - 로그인에 필요한 메서드 생성 
Id 와 PW가 db값과 같은지 체크하는 메서드


 4) loginForm 만들기 

 

1 - 폼, 액션태그와 input에 변수들 넣어주기
2 - 폰트, 이미지등 CSS스타일 관리 
3 - 로그인, 회원가입 관리 
<form action="태그.jsp" method="post"> 또는 onclick을 이용하여 페이지 이동 만들기
로그인 -> login Pro로 이동
회원가입 -> signupForm 으로이동

 

 

 


   4) -  1 <회원가입 폼 (signup Form)>      

    4)에서 회원가입을 눌렀을때 실행 

 

1 - loginForm 과 유사함
2  -<form action="태그.jsp" method="post"> 
또는 onclick을 이용하여 페이지 이동 만들기
회원가입 -> signup Pro로 이동
취소버튼 -> main 으로이동(로그아웃상태)

 

 

 


     4) -  1  - 1  회원가입 처리폼 (Signup Pro)

 

 1-  DTO 객체 생성후 넘어온 파리미터를 DTO에 담아줌
 2-  DAO 객체 생성후 회원가입 메서드 작동
 3-  main 으로 이동(로그인상태)

 

 

 


4) - 2 로그인 처리폼(login Pro)

 

login Pro에 오자마자 파라미터꺼냄 
쿠키있으면 변수생성     

DAO 객체 생성하여 3) -1 에 로그인에 필요한 메서드 실행

 

 

 <1- 메서드가 실행되어 ip/ pw가 일치하는 경우>

                      ●a -  auto가 null이 아니다! (자동로그인체크)
                                -> 쿠키 객체 생성하고 유효시간과 쿠키값주고 세션 속성값 주고
                                       main으로 보냄(로그인 상태)
 

                      ●b -  auto 가 null 이면
                                     -> 세션 속성값만 주고 바로 
                                           main으로 보냄(로그인 상태) 


** 세션 속성값 -> 난 로그인처리를 했어!

 <2 - 메서드가 실행되었는데 ip/ pw가 일치하는 않는 경우>
 경고창 띄우고 
한칸 뒤로 (history.go(-1) 실행

 


   5 메인 폼 (Main Form)   만들기 

 

 <1 -   세션 속성값이 없을때> (login Pro를 통해 온게 아님-> 로그인으로 온게아님) 
             
              a  -         쿠키가 있다 ->  login pro로 보내줌 (자동로그인 체크한 경우이니 로그인 처리가 되도록)
                             login pro에서 
                                       유효시간, 쿠키값, 세션 속성값 주면서
                                       main으로 보냄
 
              b  -         쿠키가 없다 -> login Form으로 보냄 



< 2 -   세션 속성값이 있다> (login pro에서 들어온거임)(자동로그인x 로그인)

 

728x90
728x90

COOKIE 세션SESSION 필요성은 

 

 HTTP의 특징이자 약점을 보완하기 위해서이다.

그렇다면 이 HTTP의 특징은 무엇이고, 그로 인한 약점은 무엇일까?

 

HTTP 프로토콜

HTTP(Hypertext Transfer Protocol)는 인터넷 상에서 데이터를 주고받기 위해 서버 · 클라이언트 모델을 따르는 통신 규약이다. 이 HTTP 프로토콜의 특징은 비연결성(Connectionless)과 비상태성(Stateless)이다.

  1. 비연결성(Connectionless) : HTTP는 클라이언트가 서버에 요청을 보내면, 서버는 클라이언트에게 요청에 맞는 응답을 해 준 뒤 접속을 끊는다. 이에 대해서는 논란이 되는 부분이 있으나 여전히 접속을 끊음으로써 연결 비용을 줄이는 것이 HTTP의 장점이기 때문에 비연결성을 가지고 있다고 말한다.
  2. 비상태성(Stateless) : 상태 정보를 유지하지 않고. 연결을 끊는 순간 클라이언트와 서버의 통신이 끝나게 되며, 상태 정보는 유지하지 않는다.

https://sunrise-new-world.tistory.com/21

 

1. 쿠키 Cookie  


상태가 없는 프로토콜을 위해 상태를 지속시키기 위한방법
웹 브라우저( 클라이언트) 의 정보를 웹 브라우저에 저장하므로,
이후 서버로 전송되는 요청에는 쿠키가 가지고 있는 정보가 같이 포함되서 전송된다.

 

ex) 자동로그인, 로그인 상태 유지
비번, 아이디 저장 팝업

 

* 쿠키의 2가지 방식
- 파일 쿠키 : 실제 파일로 남겨서 저장하는 방식

- 웹 쿠키 : 브라우저가 관리

 

 

 

1) 쿠키 동작 방식

 

 

2) 쿠키의 구성

       * 이름       : 각 쿠키를 구별하는데 사용되는 이름. (알파벳, 숫자 이용)
       * 값       : 쿠키의 이름과 같이 저장할 데이터.
       * 유효시간    : 쿠키가 유지되는 시간.
       * 도메인    : 쿠키를 전송할 도메인.
       * 경로       : 쿠키를 전송할 요청 경로.

      - 하나의 브라우저는 여러 개의 쿠키를 가질 수 있고 구분할 때, 이름을 사용.
       - 각 쿠키는 값을 가지며 서버는 이 값을 사용해 작업 수행.

3) 쿠키 생성
       쿠키를 사용하려면 Cookie 클래스를 사용하여 쿠키 객체를 생성해야함
       쿠키에는 각 웹 브라우저를 판별할 수 있는 정보 포함되어있음
       서버가 응답할때, response 객체에 실려 사용자 브라우저에 저장됨.
       정보 전달 방식은 Map(key, value) 형태이다.

       [ 쿠키 객체 생성 ]
Cookie cookie = new Cookie(String name, String value);

       [ 쿠키 유효기간 설정 ] ([ 도메인, path 도 설정])
cookie.setMaxAge(60);

       [ response 객체에 쿠키 추가]
reponse.addCookie(cookie);

name : 쿠키이름
value : 쿠키값

* 쿠키 생성후, 반드시 reponse 객체에 쿠키를 추가해야한다.
* value에 아스키코드가 아닌 값이 들어가야할때는 알맞은 방식으로 인코딩한다.

 

쿠키 클래스 메서드
String  getName() 쿠키 이름 가져오기
String getValue() 쿠키값 가져오기
void setValue(String value) 쿠키값 지정
void setDomain(String pattern) 이 쿠기가 전송될 서버 도메인 지정
String getDomain() 지정된 도메인 리턴
void setPath(String url) 이 쿠키를 전송할 경로 지정
String getPath() 지정된 경로 리턴
void getMaxAge() 쿠키 유효시간을 초단위로 지정.
음수로 입력할 경우 웹브라우저 닫을때 쿠키가 함께 삭제된다.
int getMaxAge() 쿠키 유효시간을 구함.

 

 

 쿠키 읽어오기

 

#1 쿠키 목록 얻기
존재하는 모든 쿠키 객체를 가져오려면
내장객체 request의 getCookies() 메서드를 사용해야함.

Cookie[] cookies =  request.getCookies();

#2. 쿠키 객체 정보 얻기
getName(), getValue() 이용해서 정보얻어야함.

 

 

 

쿠키 삭제

 setMaxAge(0)

 

 

쿠키는 삭제하는 기능을 별도로 제공하지 않고, 
쿠키 유효시간을 만료하면 삭제됨.
즉, setMaxAge(0) 으로 만들어 다시 저장되도록 응답으로 보내기

 

 

2. 세션 Session  
: 클라이언트와 웹 서버간의 상태를 지속적으로 유지하는 방법

 

 

 

세션 내부 객체
*Object getAttribute(String name) 세션에 저장된 속성명이 name인 값을 Object로 리턴
*void setAttribute(String name, Object value) 세션에 name 속성명으로 값 저장 (어떤 값이든 저장가능)
-> 브라우저가 종료되거나, 삭제할때까지 데이터 유지
*void  removeAttribute(String name)  //로그아웃 툴 1
속성명이 name인 속성셋을 삭제
*void  invalidate() //로그아웃툴 2
현재 세션에 저장된 모든 속성 제거
java.util.Enumeration getAttributeNames() 세션 속성명들을 Enumeration으로 리턴
long getCreationTime() 세션이 생성된 시간 리턴
long getLastAccessedTime() 웹 브라우저가 해당 세션에 마지막으로 접근한 시간 리턴
int getMaxInactiveInterval() 해당 세션을 유지하기 위한 세션 유지시간 리턴.
void setMaxInactiveInterval (int interval) 해당 세션을 유지하기 위한 세션 유지시간 초단위로 설정
default 1800초 (30분) 동안 로그인 유지됨

 

 

 

 

 

 

  쿠키(Cookie) 세션(Session)
저장 위치 방문자(클라이언트) 서버
용량 제한 도메인당 20개, 쿠키당 4KB이하 용량 제한 없음
저장 형식 text Object
만료 시점 쿠키 저장 시 설정 가능. 따로 설정하지 않을 경우, 브라우저가 종료될 때 만료 정확한 시점을 알 수 없음
보안 보안 취약

보안우수

 

 

 

 

728x90
728x90

 

 

 

1712.00080.pdf
11.75MB

728x90
728x90

나스를 활용하여 개인 서버만들기

- docker에서 tomcat 활용편

 

1. 패키지 센터에서 Docker 설치

먼저 아래 사이트에 접속하여 자신의 나스가 Docker를 지원하는지 확인하기 바랍니다.

https://www.synology.com/ko-kr/dsm/app_packages/Docker

현재 지원 모델 리스트

 

 

2. Docker 실행 후 톰캣 설치

  • Docker – 레지스트리 – “tomcat” 검색 후 “tomcat” 다운로드
  • Docker – 이미지 – tomcat 선택 – 실행 – 마법사로 실행

받은 파일은 이미지에서 설정 가능하다

*혹시 이미 설치가 되어있는사람이라면

컨테이너에서 실행을 멈추면 편집탭이 활성화된다.

 

볼륩탭에서 폴더추가를 누르고 

나스에  하드안에서 서버관련 폴더를 만들고 

webapps을 만든다... 반드시 webapps로 해야함

그 다음 마운트 경로를 /usr/localtomcat/webapps로 지정한다

-> 해당폴더를 톰캣의 저 마운트로 지정하겠단 소리임

 

 

다음으론 포트설명

로컬포트는 내가 타고들어올 포트이다.

아마 자동으로 설정되어있을텐데

8080로 수동설정하겠다

 

*8080 포트를 뚫어두어야한다

** 포트포워딩필요 ** 

 

 3. 톰캣 실행

 

자 이제 이클립스나 다른 툴에서 작업한 파일을 export 해서 war파일로 만든다

그 다음 나스에 webapps 에 war 파일을 두면 알아서 구동된다.

 

http://나스IP:8080/web/jsp01/test01.jsp

입력하면 해당 test01 파일이 실행이 된다.

 

잘안되면 해당 링크참고

https://youtu.be/VF9ilum0cck

728x90
728x90
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>signupPro</title>
	</head>
<body>
<%
   request.setCharacterEncoding("UTF-8");
   
   String id = request.getParameter("id");
   String pw = request.getParameter("pw");
   String name = request.getParameter("name");
   String email = request.getParameter("email");
   String gender = request.getParameter("gender");
   
   String[] hobb = request.getParameterValues("hobbies");
   
   String job = request.getParameter("job");
   String bio = request.getParameter("bio");

   System.out.println(id);
   System.out.println(pw);
   System.out.println(name);
   System.out.println(email);
   System.out.println(gender);
   System.out.print(hobb);
   if(hobb != null){
      for(String s : hobb){
         System.out.println(s);
      }
   }
   System.out.println(job);
   System.out.println(bio);


%>


   <h3> sinupPro page</h3>

         <table>
         <tr>
            <td>ID *</td>
            <td><%= id %></td>
         </tr>
         <tr>
            <td>PW *</td>
            <td><%= pw %></td>
         </tr>
         <tr>
            <td>Name *</td>
            <td><%= name %></td>
         </tr>
         <tr>
            <td>Email</td>
            <td><%= email %></td>
         </tr>
         <tr>
            <td>Gender</td>
            <td><input type="radio" name="gender" value="male" checked/></td>
            <td><input type="radio" name="gender" value="female" /></td>
         </tr>
         <tr>
            <td>Hobbies</td>
            <td>
               <% if(hobb != null){
                     for(int i = 0; i < hobb.length; i++){ %>
                        <%= hobb[i] %>
               <%      }
               }
               %>
            </td>
            
         </tr>
         <tr>
            <td>Job</td>
            <td>
               <%= job %>
            </td>
         </tr>         
         <tr>
            <td>Bio</td>
            <td>
               <textarea row="5" cols="22" name="bio"> <%= bio %></textarea>
            </td>
         </tr>         
   
      </table>

</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>회원가입</title>
</head>
<body>
   
   <form action="signupPro.jsp" method="post">
      <table>
         <tr>
            <td>ID *</td>
            <td><input type="text" name="id" /></td>
         </tr>
         <tr>
            <td>Password *</td>
            <td><input type="password" name="pw" /></td>
         </tr>
         <tr>
            <td>Name *</td>
            <td><input type="text" name="name" /></td>
         </tr>
         <tr>
            <td>Email</td>
            <td><input type="text" name="email" /></td>
         </tr>
         <tr>
            <td>Gender</td>
            <td>
               <input type="radio" name="gender" value="male" checked /><input type="radio" name="gender" value="female" /></td>
         </tr>
         <tr>
            <td>Hobbies</td>
            <td>
               <input type="checkbox" name="hobbies"  value="music" /> Music
               <input type="checkbox" name="hobbies"  value="sports" /> Sports
               <input type="checkbox" name="hobbies"  value="travel" /> Travel
               <input type="checkbox" name="hobbies"  value="movies" /> Movies
            </td>
         </tr>
         <tr>
            <td>Job</td>
            <td>
               <select name="job">
                  <option value="employer">Employer</option>
                  <option value="employee">Employee</option>
                  <option value="teacher">Teacher</option>
                  <option value="student">Student</option>
                  <option value="freelancer">Freelancer</option>
                  <option value="etc">Etc</option>
               </select>
            </td>
         </tr>
         <tr>
            <td>Bio</td>
            <td>
               <textarea rows="5" cols="22" name="bio"></textarea>
            </td>
         </tr>
         <tr>
            <td colspan="2">
               <input type="submit" value="가입" /> 
               <input type="reset" value="재작성" /> 
            </td>
         </tr>
      </table>
   </form>

</body>
</html>

 

 

 

728x90
728x90

6. 에러 페이지 세팅
웹 어플리케이션 실행 도중에 발생할 수 있는 오류에 대비한
예외 처리 코드를 작성하여 비정상적인 종료를 막기 위한 세팅

1) 웹 에러
개발자의 실수로 일어날 수 있는 웹 에러 두 가지
404 : Not Found Error : 요청경로 오류, 잘못된 url로 요청/
500 : Internal Server Error : 요청 페이지의 로직 오류 (자바 문법 오류)

그 외 HTTP 상태코드
[2xx] Success 성공 관련 코드
200 : 성공 : 서바가 요청한 페이지를 잘 처리 제공했다.
201 : created : 서버에 요청한대로 데이터가 생성되어 제공되었다.

 

[3xx] Redirection 이동관련 코드

 

[4xx] Client Error 관련 코드
400 : Bad Request : 요청이 이상함. 
405 : Method Not Allowed : 요청해 실행되어야할 메서드가 안된다. 허용되지않는다.

 

[5xx] Server Error 관련 코드
503 : Service Unavailable : 서비스 지원불가(웹은 살아있는데 서버가 죽었을때)

2) 예외 처리 방법
- try/catch/finally 를 이용 : 자바 언어에서 예외처리 구문 이용
- page 디렉티브태그 이용한 예외처리 : errorPage="erorr.jsp" isErrorPage="true"
- web.xml에 예외처리 : <error-page>태그와 하위태그 이용

* 동시 적용시 예외처리 우선순위
1. try/catch/finally
2. page 디렉티브 태그
3. web.xml
4. 위 항목에 해당안되면 웹서버에서 제공하는 기본 오류페이지 출력

3) web.xml에 예외처리

<error-page>
<error-code>...</error-code> 또는 <exception-type>...</exception-type>
<location>...</location>
</error-page>

error-code : 오류 코드 설정
exception - type : 자바예외 유형의 클래스 이름 설정
location : 에러페이지에 URL 설정

 

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">

	
	<!-- 에러페이지 세팅 -->
	<!-- <error-page>
		<error-code>500</error-code>
		<location>/jsp02/errorXml.jsp</location>
	
	</error-page> -->
<!-- 	<error-page>
		<exception-type>java.lang.Exception</exception-type>
		<location>/jsp02/errorXml.jsp</location>
	
	</error-page> -->
</web-app>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>errorXml</title>
</head>
<body>
	<h1>공사중입니다</h1>
</body>
</html>
728x90
728x90

3. response 내장 객체
: request와 반대기능. 사용자의 요청을 처리한 결과를 웹브라우저로 전달하는 정보 저장.

1) 기능
리다이렉트 하기 (페이지 강제 이동)
헤더 정보 입력

2) 리다이렉트 
다른 페이지로 강제 이동하도록 reponse 객체의 리다이렉션 메서드 제공

**void sendRedirect(String url);

<%@ 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>   <!-- 3번설명 -->
	<h1> B page</h1>
	
	
	<%
	System.out.println("bbbbbb");
	response.sendRedirect("c.jsp"); // 코드로 c.jsp로 이동
	%>
</body>
</html>




4. out 내장 객체
: 웹 브라우저에 데이터를 전송하는 출력 스트림 객체
<%=  > 스크립트 출력문으로 브라우저에 출력하는것과 같은 기능
void print(String str)
void println(String str)  브라우저라 줄내림안됨 print와 같게나옴
void newLine()  줄내림
쓸일없다... 태그로하는게 더 나으니깐

5. application 내장 객체
: 어플리케이션과 관련된 기본 객체
특정 웹 어플리케이션에 포함된 모든 JSP페이지는 
하나의 application 내부객체를 공유한다.
초기 설정 정보 읽기, 서버 정보 읽기, 웹 어플리케이션이 제공하는 자원 읽기...

1) 웹 어플리케이션 초기화 파라미터 읽기

웹 어플리케이션 전체에 사용할 수 있는 초기화 파라미터는 WEB-INF/web.xml 파일에
<context-param> 태그를 사용하여 추가한다.

* web.xml
웹 어플리케이션을 위한 설정 정보를 담고 있는 파일.
WEB-INF 폴더 안에 위치해야함.

web.xml에 초기화 파라미터를 추가하면,
JSP에서는 application 내부 객체의 메서드를 통해
초기화 파라미터를 꺼내서 사용할 수 있다.

* 초기화 파라미터 읽는 메서드
String getInitParameter(String name) 
: 이름이 name인 초기화 파라미터의 값을 문자열로 리턴
해당 값이 없으면 null 리턴
Enumeration<String> getInitParameterNames()
: 초기화 파라미터 이름 목록 리턴 


언제사용?
이름 그대로 웹어플리케이션 초기화에 필요한 설정정보를 저장하려고 사용

 

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">

 	 초기화 파라미터 설정 
	<context-param>
		<description>로딩 여부</description>
		<param-name>logEnabled</param-name>
		<param-value>true</param-value>
	</context-param>
	<context-param>
		<description>디버깅 레벨</description>
		<param-name>debugLevel</param-name>
		<param-value>5</param-value>
	</context-param>

</web-app>
728x90

'WEB Creator > [JSP]' 카테고리의 다른 글

[JSP] 4. 회원가입 폼  (0) 2022.06.13
[JSP] 3. 에러 페이지 세팅  (0) 2022.06.13
[JSP] 2 - 내장 객체(Implicit Object) (1) Request  (0) 2022.06.13
[JSP] 1 - JSP 페이지 구성 요소(Directive, Script)  (0) 2022.06.10
[JSP] 설정  (0) 2022.06.10
728x90


내장 객체 (Implicit Object)
: JSP페이지에서 사용할 수 있도록 JSP 컨테이너에 미리 정의된 객체.
import문 없이, 객체 생성없이 바로 사용가능하다.
내부객체는 _jspService()메서드 내부에 있다.


1) 종류
*request : HTTP 요청 정보 저장 : javax.sevlet.http.HttpServletRequest
*response : HTTP 응답 정보 저장 : javax.sevlet.http.HttpServletReponse
*session : 웹브라우저 정보 유지를 위한 세션 정보 저장
: javax.sevlet.http.HttpSession
out : 출력할 내용을 담고 있는 출력 스트림 : javax.sevlet.jsp.jsp.jspWriter
application : 웹 어플리케이션 컨텍스트 정보 저장
pageContext : JSP 페이지 정보 저장 : javax.sevlet.jsp.PageContext
page : JSP 페이지로 구현한 자바 클래스로 JSP페이지 자체를 나타냄
: java.lang.Object
config : JSP 페이지 설정 정보 저장 :  javax.sevlet.jsp.ServletConfig
conception : JSP 페이지 예외 발생 처리 : java.lang.Throwable


2. request 객체
: 웹브라우저에서 서버의 JSP페이지로 전달하는 정보를 저장. (요청관련)

1) 기본기능
       클라이언트(사용자브라우저)와 관련된 정보 읽기 기능
       서버와 관련된 정보 읽기 기능
       클라이언트가 전송한 요청 파라미터 읽기 기능
       클라이언트가 전송한 요청 헤더 읽기 기능
       클라이언트가 전송한 쿠키 읽기 기능
       속성 처리 기능

2) 요청 파라미터 처리
: 요청 파라미터의 형태는
파라미터명 = 값
*form 태그라면 name 속성값 = 입력데이터
위와 같은 형태로 전송되며,
전송된 값을 꺼낼때는 파라미터명을 키값으로 request 객체를 이용해 
데이터를 꺼낼 수 있다.

# 메서드

입력폼에 입력한 사용자의 답을 얻어내는 요청 메서드

***String getParameter(String name)***
파라미터명이 name인 값을 리턴해줌. 없으면 null 리턴
String[] getParmeterValues(String name)* 파라미터명이 name인 값들을 배열로 리턴해줌.
(파라미터 이름이 같은 여러개의 데이터가 넘어왔을경우 : 
해당 파라미터 이름을 주고, 값을 배열로 한번에 가져오기)
ava.util.Enumeration getParameterNames() 파라미터명들 목록을 java.util.Enumeration 타입으로 리턴

 

웹 서버 브라우저 정보를 가저오는 메서드
request.getRemoteAddr() 클라이언트 IP
request.getContextPath() 컨텍스트 경로
request.getRequestURI() 요청 URI
request.getContentType() 요청정보 컨텐츠 타입
request.getCharacterEncoding() 요청정보 인코딩
request.getProtocol() 요청정보 프로토콜
request.getMethod() 요청정보 전송방식 (get, post)
request.getContentLength()  요청정보 길이
request.getServerName()  서버이름
request.getServerPort() 서버포트


*

3) 전송방식 : GET/POST
웹 브라우저에서 많이 사용하는 파라미터 전송방식 두가지
GET : URL 경로뒤에 물음표와 함께 파라미터를 붙혀 전송한다.
이를 쿼리스트링이라고한다.
각 파라미터는 파라미터명 = 값의 형태로 전송되고
파라미터가 여러개일 경우는 &(엠퍼샌드)를 구분자로 연결하여 전송한다.
브라우저에 따라 한글 get방식으로 전송시
주소창에 %...% 이런 형태의 문자로 표현될 경우가 있다.
*URL 퀘리 스트링으로 파라미터를 전송하기 때문에
폼을 사용하지 않아도 파라미터 전송
브라우저나 웹서버 또는 웹 컨테이너에 따라 
전송할 수 있는 파라미터의 길이 제한이 있을 수 있다.


POST : URL 경로뒤에 파라미터가 보이지 않는다.
데이터 영역을 이용하여 파라미터를 전송하여,
전송할 파라미터의 길이 제한이 없다.
(파일데이터는 post)

4) 요청 파라미터 인코딩

웹 브라우저는 웹서버에 파라미터를 전송할때
알맞은 캐리터 셋을 이용해서 파라미터값을 인코딩한다.
웹 서버는 알맞은 캐릭터 셋을 이용하여 그것을 디코딩한다.
-> 인코딩 / 디코딩 캐릭터셋이 일치하지 않으면 웹서버는 잘못된 파라미터값을 사용함.

[캐릭터 셋 세팅]

# Client <------ server : <%@ page 인코딩 UTF-8 (브라우저에 utf-8로 뿌린다...)
# Client ------> server : 다른곳에서 처리



 

<%@ 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>  <!-- 메모장 2번설명 pro.jsp로 받은 id/pw값 전달 -->
	<form action="pro.jsp"method="post">  <!-- post 방식으로 해야 주소창에 안뜸 get방식은 뜸 -->
		id : <input type="text" name = "id"/><br/>
		pw : <input type="password" name = "pw"/><br/>
 		좋아하는 동물 :
 			<input type="checkbox" name="pet" value="dog" /> 강아지
 			<input type="checkbox" name="pet" value="cat" /> 고양이
 			<input type="checkbox" name="pet" value="tiger" /> 호랑이
 		
 		<input type="submit" value="로그인" />	
	</form>

</body>
</html>


 

<%@ 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>
	<!-- 	request 객체에서 넘어온 데이터 꺼내기 -->
	
<%
//post 방식 인코딩 처리 : post 방식으로 요청되어 넘어오는 파라미터값이 한글일경우
//						인코딩 처리가 필요함. 파라미터를 꺼내기전에 
request.setCharacterEncoding("UTF-8");
//localhost:8080/web/jsp02/pro.jsp?id=sdd&pw=1234 -->
	//request.getPramater(name)

	String id = request.getParameter("id");
	String pw = request.getParameter("pw");
	
	// 같은 이름의 파라미터명인 값 여러게 넘어왔을경우
	String[] pets = request.getParameterValues("pet");
	
	//화면에 출력
	//out.println("id : " +id + "<br />");
	//out.println("pw : " +pw + "<br />");  
	for(int i = 0; i <pets.length; i++){
		out.println("pet : " + pets[i] + "\n");
	}

%>
<body>
		<h1> pro page</h1>
		<h2> id : <%= id %></h2>
		<h3> pw : <%= pw %></h3>
		 
		 	<% for(int i = 0; i <pets.length; i++){%>
			<h3> pet : <%= pets[i] %> </h3>
			<%}%>
		
		
</body>
</html>
728x90
728x90

[day18]

 

 

  1. Network

1) 네트워크  :  데이터를 전송할 수 있는 통신망, 전자장비들의 집합, 장비와 장비를 연결한 것.

 

노드 Node : 네트워크에 연결된 모든 장치들

호스트 Host : 노드에게 하나 이상의 서비스를 제공해주는 노드

-> 데이터 주고 받기 위해 존재 (통신)

-> 통신을 하려면 약속이 필요함 : protocol : 데이터 전송 규약

 

유형 : 네트워크 크기와 용도에 따라 LAN, WAN으로 구성

 

LAN Local Area Network : 지역망 ( 작은 망)

통신 주체인 자신과 “동일한” 네트워크간의 통신을 의미하며

작은 범위로 구성된다 -> 스위치

통신장비 : NIC(랜카드), T/P cable, Switch 

통신 프로토콜 : Ethernet < FastEthernet < GigabitEthernet

통신주소 : Mac-address : 물리주소 

 

 

 

WAN Wide Area Network : 큰망

내부 -> 외부로 통신할때 

일반적으로. ISP(kt, sk…..)로 부터 임대회선을 사용하기 때문에 구축비용은 감소하지만 통신 및 유지/보수 비용이 증가

 

자신이 포함되지 않은 “외부” 네트워크 구간을 의미하며, 비교적 큰 범위로 구성된다.

 

대표장비 : Router 라우터

통신프로토콜 : IPv4 (Internet Protocol version4)

통신주소 : IP address : 논리주소

 

 

 

 

 

 

2) IP address : Internet Protocol Address

: 통신을 하는 모든 기계는 네트워크상에서 유일하게 자신을 식별 할 수 있는

“고유주소”를 가지고 있다.

IP 주소는 32비트의 이진수로 구성, 보통 8비트 씩 4부분으로 나누어 십진수로 표현

ex)192.168.100.74

 

숫자로 된 주소는 기억하기 어려우므로 www.naver.com 과 같은 문자열로 구성된

도메인 이름으로 바꿔서 사용한다.

사용자가 도메인 이름으로 페이지를 요청하면,

DNS(Domain Name System) 서버에 의해 숫자로 구성된 IP 주소로 자동 변환.

 

IPv4 : 4개의 숫자로 구성된 32비트의 IP 주소

IPv6 : 128비트로 구성 

 

IP조수 확인 : Cmd - > ipconfig (요약)

ipconfig -all (자세히)

 

3) Port : 데이터를 주고받는 통로, 여러개의 서비스를 해줄 때

서로 충돌이 나지 않도록 포트를 구분해서 만들어 놓음.

포트번호는 개발자가 임의로 선택해 사용할 수 있으나,

기존 응용 프로그램에서 사용하는 번호나 시스템 포트 번호는 피하는 것이 좋다.

잘 알려진 포트번호 : HTTP = 80, FTP = 21, Telnet = 23

기존 잘 알려진 포트는 0 ~ 1023 사이번호를 가지며,

사용자 지정하는 번호는 이 범위를 피해서 선택하도록

 

 

윈도우 cmd > netstat -a

    맥.  sudo lsof -PiTCP -sTCP:LISTEN. https://velog.io/@taelee/%ED%98%84%EC%9E%AC-%EC%97%B4%EB%A0%A4%EC%9E%88%EB%8A%94-%ED%8F%AC%ED%8A%B8-%ED%99%95%EC%9D%B8mac)

 

 

4) Protocol : 통신 규약

컴퓨터간에 정보를 주고받을 때의 통신 방법에 대한 규칙과 약속

대표적인 표준 프로토콜의 예는 인터넷에서 사용하는 TCP/IP가 이에 해당한다.

 

5) 데이터 전송 방식

: IP 프로토콜 위에서 동작 

# 1.  TCP Transmission Control Protocol

연결형 서비스를 제공함. 신뢰성 높음.

ex) download

데이터 전송시 세그먼트 블록단위로 분할해 전송하고,

하나 전송하고 받는쪽에서 잘 받았다는 ACK 신호를 보내면

다음 블록을 전송.

 

# 2. UDP User Datagram Protocol

비연결형 서비스를 제공. 빠른 전송. 신뢰성 떨어짐

ex) streaming service

전송한 데이터가 목적지 까지 제대로 도착했는지 확인하지 않는다.

 

6) OSI 7 계층 : 모든 네트워크 통신에서 생기는 여러가지 충돌 문제를 완화하기 위하여

국제 표준기구(IOS)에서 표준화된 네트워크 구조를 제시한 기본 모델

https://shlee0882.tistory.com/110

 

2. Java.net (더 좋은게 있어서 잘 안쓴다)

InetAddress 클래스

: 자바에서 IP다루기 위한 클래스

URL 클래스

: 자바에서 URL을 다루기 위한 클래스

프로토콜 :  //호스트명:포트번호/경로명/파일명?쿼리스트링# 참조  

 

https://isplus.joins.com/2022/05/27/enter/entertainment/20220527085428908.html : URL

 

포롴토콜 : HTTPS, HTTP     https=443. http =80

ip(호스트명) : 도메인 주소 

포트번호 : 443 생략

경로명 : 접근하려는 자원이 저장된 서바상의 위치 : contect path, 루트 컨텍스트

파일명 : 접근하려는 페이지 이름

쿼리스트링 : ? 뒷부분 ( 데이터 문자형태로 전송 파라미터명 =값&파라미터명 = 값..)

 

URL !=URI

 

 

3.소켓 프로그래밍

: 소켓을 이용한 통신 프로그래밍

소켓 = 통신하는 두 응용 프로그램간의 통신 링크 각 끝단 (endpoint)

TCP/IP 프로토콜을 따르며, TCP/UDP 방식이 있다. 

 

1) TCP 소켓 : 클라이언트( 사용자, 요청자)와 서버(서비스 제공자, 호스트) 간의 1 : 1 통신

통신은 서버가 먼저 클라이언트의 접속을 기다리고, 클라이언트가 서버에 접속을 하면,

그때부터 서로 데이터를 주고 받을 수 있다.

 

 

 

 

 

 

(1) 서버 프로그램에서 포트와 연결된 서버소켓을 사용하여 클라이언트 연결 요청을 처리할 준비함.

(2) 클라이언트 프로그램은 접속할 서버의 IP주소와 포트번호를 가지고 서버소켓을 생성해서 서버에 연결 요청

서버 소켓은 클라이언트 연결을 요청받아, 서버에 새로운 소켓을 만들어 클라이언트 소켓과 연결되도록 한다.

(3) 클라이언트 끼리 서버를 통해 데이터를 주고 받는다.

(4) 연결해제

728x90
728x90

[day17]

 

  1. 입출력 : java.io 패키지

IO = I/O = input/output 

 

  1. File 클래스 : java.io.File

  : 크기, 생성, 삭제, 변경 등등 내용 관리 가능

입출력 X 

 

1) 생성자

File(String pathname) :  파일확장자명을 포함한 전체 경로를 문자열로 주며 생성

File(File parent, String child) : parent(부모) 디렉토리안에 child 이름의 서브디렉토리나 파일을 나타내는 객체생성

File(String parent, String child) : parent(부모) 디렉토리안에 child 이름의 서브디렉토리나 파일을 나타내는 객체생성

 

File(URI uri) : file:URI를 추상경로명으로 변환하여 객체생성 

 

 

2) 객체 생성

File 참조 변수명 = new File(“전체 경로”);

c: [temp]-test.txt

File(String pathname) -> File f = new File(“c:\\temp\\test.txt);

File(String parent, String child) -> File f = new File(“c:\\temp”, “test.txt”);

* 파일은 확장자명까지 표기

 

3) 주요 메서드++

boolean mkdir() :  새로운 디렉토리(폴더) 생성

boolean createNewFile() : 빈 파일 생성. 생성하려는 파일이 이미 존재하면 생성X

String[] list() : 디레고리내의 파일과 서브 디렉토리 목록을 문자열 배열로 리턴

File[] listFiles() : 디레고리내의 파일과 서브 디렉토리 목록을 File 객체로 리턴

boolean delete() : 파일 또는 디렉토리 삭제

boolean renameTo(File dest) : dest 경로명으로 파일 이름(경로) 변경

long length() : 파일 크기 리턴

String getPath() : 경로 문자열로 리턴

String getAbsolutePath() : 절대경로를 문자열로 리턴

String getParent() : 파일이나 디렉토리의 부모디렉토리 이름 리턴

String getName() : 파일이나 디렉토리의 이름 문자열 리턴

boolean isFile() : 파일이면 true 

boolean isDirectory() : 디렉토리면 true 

long lastModified() : 마지막 변경시간 리턴

boolean exists() : 파일 또는 디렉토리가 존재하면 true

 

 

 

 

  1. Stream 스트림 ( 와이파이라 생각하면 쉬움)

: 데이터가 돌아다니는 통로 (선) -> 데이터를 목적지로 I/o 하기 위한 방법.

 

- 스트림은 다른 목적지로 데이터를 보낼때 가장 중요한 역학을 한다. 

- 스트림은 단 방향 : input 따로 output 따로

- 자바 응용 프로그램은요 입력 스트림과 출력스트림과만 연결을하고, 

입출력장치 제어하고 실질적인 입출력처리는 스트림이 진행한다.

 

입력장치 or 파일 ——> 입력 스트림 ——-> 자바 응용 프로그램

출력장치 or 파일 <——출력스트림 ——— 자바 응용프로그램

 

- 스트림을 통해 흘러가는 기본 단위는 바이트나 문자이다.

자바 스트림 객체는 바이트 단위로 입출력하는 바이트 스트림과

문자 단위로 입출력하는 문자 스트림으로 나뉜다.  

바이트 스트림을 다루는 클래스는 공통적으로 뒤에 Stream 붙고

문자 스트림을 다루는 클래스는 공통적으로 뒤에 Reader/Writer가 붙어 구분 가능.(문자하나 2바이트 취급)

 

- close() : 스트림을 열었으면 사용 후 반드시 닫아줘야 메모리 누수가 안된다, 

 

 

 

  1. 바이트 스트림

- 바이트 단위로 데이터 전송 (바이너리 데이터가 흐르는 스트림)

- 다양한 클래스 제공으로 용도에 맞게 골라 사용

- 이미지, 동영상 등 전송 가능

 

***1) InputSteam, OutputSream ***

: 추상 클래스. 바이트 단위 입출력 처리를 위한 공통기능을 가진 수퍼 클래스

 

 

2) FileOutputStream

: 파일에 출력을 하기 위한 클래스

파일에 바이너리 데이터를 저장할 수 있다.

바이너리 파일은 사람이 읽고 해석하는것이 거의 불가능. 

 

 

#1. 생성자

FileOutputStream(File file) : file이 지정하는 파일에 출력 스트림 생성

FileOutputStream(String name) : name이 지정하는 파일에 출력 스트림 생성

FileOutputStream(File file, boolean append) : append가 true면 파일 마지막부터 데이터 저장

FileOutputStream(String name, boolean append) : append가 true면 파일 마지막부터 데이터 

 

#2. 주요 메서드

void write(int b) : int 형으로 넘겨진 바이트 한개 출력

void write(byte[] b) : 배열 b의 바이트를 모두 출력

void write(byte[] b, int offset, int Len) : Len 크기만큼 offset 부터 배열 b를 출력

void flush() : 출력스트림에 남아있는 바이너리 데이터 모두 내보내기

void close() : 출력스트림 닫고, 관련된 시스템 자원 해제

 

3) FileInputStream

: 바이트 스트림으로 파일 읽는 스트림 클래스

 

#1. 생성자 

FileInputStream(File file) : file이 지정하는 파일로부터 읽어오는 스트림 생성

FileInputStream(String name) : name 지정하는 파일로부터 읽어오는 스트림 생성

 

#2. 주요 메서드

int read() :입력 스트림에서 한 바이트 읽어 int형으로 리턴

int read(byte[] b) : 최대 배열 b의 크기 만큼 바이트를 읽음

int availble() : 현재 읽을 수 있는 바이트 수 리턴

void close() : 스트림 닫고 관련 시스템 자원 해제

 

#EOF : End of File 파일의 끝

read()할때 EOF를 만나면 -1을 리턴

 

* read()의 리턴이 int 형인 이유

byte 0xFF(-1)

byte값 -1 int 로 리턴 : 0x000000FF 리턴

EOF -1 리턴 : 0xFFFFFFFF리턴 (32비트)

 

4) DataInput/OutputStream

: boolean, char, byte 등 기본타입의 값을 바이너리 형태로 출력.

바이너리 형태를 기본값으로 읽어옴

각 자료형에 맞는 값들을 입력/ 출력할 수 있는 메서드들이 존재

 

5) ObjectInputStream / ObjectOutputStream.  (잘 안쓴다 )

: 객체를 스트림에 입/출력하는데 사용하는 클래스

보조 스트림으로 사용

 

 

  1. 문자 스트림

- 자바형에서는 char형이 2바이트이기 때문에, 한글과 같은 2바이트 문자는 바이트 스트림으로 전송시 깨지는 경우가 있다.

이러한 점을 보완하기 위해 문자 스트림 제공

- 문자화되지 않는 바이너리 값은 처리불가 -> 이미지 같은것 처리불가

- 클래스들의 이름이 Reader/Writer로 끝남

- 메서드 리턴타입을 잘 보면 byte[]가 아닌 char[]을 사용하는것을 볼 수 있다.

 

1) Reader / Writer

:문자 스트림 클래스들의 부모. 추상클래스

 

2) OutputStreamWriter

: 파일에 텍스트데이터를 저장할 때 생성자 인코딩 지정하여 처리가능

인코딩을 지정하지 않으면 OS에서 디폴트로 사용하는 인코딩으로 데이터 저장.

 

#1 생성자 ( api 문서 참고)

charset = encoding : 문자셋

 

 

 

#2 주요 메서드 (바이트 스트림참고)

String getEncoding() : 인코딩값 리턴

void flush() : 스트림 비우기 ( 닫기전에 호출하기)

 

 

 

 

3) InputStreamReader

: 바이트 스트림을 문자 스트림으로 연결시켜주는 역할을 하는 보조 스트림

바이트 스트림의 데이터를 지정된 인코딩의 문자 데이터로 변환하는 작업 수행

 

#1 생성자 (api 문서 참고)

#2 주요메서드 (바이트 스트림 참고)

String getEncoding() : 인코딩값 리턴

 

  # 윈도우에서 사용하는 인코딩

MS949 :  마이크로소프트사에서 한글 국가 표준 코드를 확장해서

MS949라고 불리는 코드 체계를 만들고

윈도우 기본 문자 체계로 사용함.

 

 

4) BufferedReader

: 버퍼를 이용해서 입력의 효율을 높일 수 있도록 해주는 역할

readLine() 을 사용해서 데이터를 라인단위로 읽어 올 수 있다.

 

BufferedReader + InputStreamReader -> Scanner

 

 

6. OS

: 하나의 소프트웨어로, 소프트웨어들을 관리하는 소프트웨어(App)

windows, linux, iOS,  android, unix, MacOS

 

자바 -> JVM : 자바 App을 관리하는 소프트웨어

 

 

7. Thread 스레드

1) 프로세스 process

현재 실행중인 프로그램이다.

프로그램이 실행하면 OS로 부터 실행에 필요한 자원(메모리) 를 할당받아 프로세스가 된다.

프로세스 = 프로그램을 수행하는데 필요한 메모리 같은 자원 + 스레드

자원을 이용하여 “실제로 작업을 수행하는것이 스레드” 이다.

 

싱글 프로세스 = 하나의 프로그램을 돌리기위해 1개의 프로세스가 실행되는것.

멀티 프로세스 = 하나의 프로그램을 돌리귀해 여러 프로세스가 실행되는것.

 

2) 멀티태스킹 multitasking : multi + tasking

태스크 task = 프로세스가 하는 일

태스킹 = 포로세스가 일을 하는것

멀티태스킹 = 하나의 프로세스가 여러일을 하는것

 

 

3) 스레드 thread

하나의 태스크를 수행하는 일꾼

프로세스 = 공장(자원 + 일꾼), 스레드 = 일꾼 

싱글스레드 = 자원 + 일꾼

멀티 스레드 = 자원 + 일꾼 + 일꾼 ….

둘 이상의 스레드를 가지고 있는것을 멀티스레드 프로세스라고 부른다

(multi-thread process)라 부른다.

 

하나의 프로세스가 가질 수 있는 스레드의 개수는 제한되어있지는 않으나

스레드가 작업을 수행하는데 개별적인 메모리 공간을 필요로 하므로

프로세스의 메모리 한계에 따라 생성될 수 있는 스레드의 수가 결정된다,

 

4) 멀티태스킹과 멀티스레딩

멀티태스킹을 실현하기 위한 2가지 방법

- 멀티 프로세싱  : 하나의 프로그램을 여러개의 프로세스로 구성 

-> 각 프로세스가 하나의 작업을 처리하도록

-> 단점 : 프로세스간 변수 공유 X -> 통신으로 공유해야함

통신이 어렵고, 문맥교환에 따른 과도한 작업량 소요될수도..

 

 

- 멀티 스레딩 : 하나의 프로그램을 동시 처리 가능하게 작업을 분할하고 

작업의 개수만큼 스레드를 생성, 스레드 하나당 하나의 작업처리하게함

자원과 메모리 공유, 문맥교환 빠름

 

활용분야

- 웹서버 시스템

- 워드, 한컴

 

5) 자바의 멀티스레딩 

JVM이 알아서 한다.

8. 스레드 만들기

# 개발자가 할일 

1) 스레드 할일 코드로 작성

2) JVM에게 스레드 생성하고 코드 실행하도록 요청

 

# 구현방법

1) Thread 클래스 상속받아 스레드 만들기

java.lang.Thread

# 1. 생성자 (문서참고)

# 2.  주요 메서드

void run() : JVM에 의해 호출 (핵심 메서드)

스레드가 해야할 작업을 구현해놀는 메서드 

개발자는 반드시 이 메서드 오버라이딩하여 스레드가 할일을 코드로 작성햐야함

이 메서드가 종료하면 스레드도 종료.

 

void start() : JVM에게 스레드 실행하도록 요청하는 메서드

void interrupt() : 스레드 강제 종료

static void yield() : 다른 스레드에게 실행을 양보

void join() : 스레드 종료할때까지 기다린다.

long getId() : 스레드 id값 리턴

String getName() : 스레드 이름 리턴

int getPriority : 스레드의 우선순위값 리턴 1~10사이 값

void setPriority(int n) : 스레드의 우선순위 n으로 변경

Thread.State getState() : 스레드의 상태값 리턴

static void sleep(long mills) : mills 밀리초동안 스레드 잠재우기

static Thread currentThread() : 현재 실행중인 스레드 객체의 레퍼런스 리턴

# 1. 스레드 클래스 상속 받은 클래스 작성

# 2. run() 메서드 오버라이딩 : 스레드가 할일 작성

# 3. 스레드 객체 생성

# 4. 스레드 시작 : start() 호출

 

 

2) Runnable 인터페이스 구현 

java.lang.Runnable

 

# 1. Runnable 인터페이스 구현하는 클래스 선언

# 2. run() 오버라이딩 : 스레드가 할일 작성

# 3. 객체 생성

Thread th = new Thread(new 우리가 만든 클래스명());

# 4. 스레드 시작 : start()

 

 

 

9. 스레드 생명 주기

1) 스레드 상태

Thread Life Cycle : 스레드 생명 주기 갖고 있고, 상태 6가지로 표현

 

NEW : 스레드 탄생. new Thread()

RUNNABLE : 스레드가 현재 실행되고 있거나, 실행 준비되어 스케줄링 기다리는 상태

WIMED_WAITING : 스레드가 sleep(n)을 호출하여 n 밀리초 동안 기다리면서 멈춘 상태.

BLOCK : 스레드가 I/O 작업을 실행하여 I/O 완료기다리면서 멈춘 상태

WAITING : 스레드가 어떤 객체에 대해 wait() 호출하여; 다른 누가 notify()로 깨워줄때 까지 무한정 기다리는 상태

 

TERMINATED :  스레드 종료한 상태

 

728x90
728x90

[jsp01 day25]

 

1. 세팅

1) 준비물 : JDK11, 톰캣 9, 이클립스, DBMS, 구글 크롬

-jdk 환경변수 꼭 설정

 

2) 톰캣 다운 / 설치

https://tomcat.apache.org/download-90.cgi

tomcat 9 > core > zip 다운받기

작업폴더로 옮기고 그곳에서 압출해제

 

3) 이클립스 ( 자바수업내용과 겹치지 않게 새로 압축해제해서 사용)

jsp 작업 폴더 안에 새로 압축해제

#1. 실행 : workspace 폴더 경로 잡아서 런치

#2. 모드 Java EE (실행하면 default 세팅이라 건들필요 x

#3 인코딩 세팅 : UTF- 8

window > preference > 검색 : encoding 

> 검색된 모든메뉴 UTF-8로 변경

 

* 인코딩 : encoding,charset 문자 체계

UTF-8 : 유니코드

IOS-8859-1

KSC5607

MS949(default) / CP949 : MS사

EUC-KR : ANSI를 한국에서 확장한 버전

ANSI : ASCII. 아스키코드 (1바이트)

 

4) 이크립스에 톰캣 세팅

하단에 Servers 탭 > 파란색 링크 혹은 비곤에 마우스 우클릭 > new> server >

>Apache 폴더 > 톱캣 9.0 선택 > browse눌러서 톱캣 압축해제한곳 경로선택 >

> bin 폴더 보일때까지만 들어가기 

 

* servers 탭안에 Tomcat... 생기고, 왼쪽 Project Explorer에 Servers 폴더 생기면 됨.

 

5) 이클립스에 웹 프로젝트 생성

File > New > Dynamic Web Project

>Project Name : 프로젝트명 작성 Next! > Next!

> 체크박스 체크하고 Finish!

 

6) 웹프로젝트의 구조

웹 서버가 준비된 상태에서 아래와 같은 폴더 구조를 갖춰야한다.

 

[폴더명] : 프로젝트명(Context path, 루트 컨텍스트)

-[ WEB - INF ]

- [ lib] : 외부 라이브러리 배치

- [ classes] : 자바 컴파일된 클래스 파일 (이클립스에선 안보임)

- web.xml : 웹 전반적인 설정 파일

-[ META - INF] : 자바 패키징 기술인 jar의 일부, 설정관련

- jsp/html/css/이미지...

 

2. 웹과 jsp

1) 인터넷과 웹

인터넷 : 컴퓨터가 서로 연결되어 TCP/IP라는 통신 프로토콜을 이용하여

정보를 주고받는 전세계의 컴퓨터 네트워크

 

웹 : 인터넷의 서비스 중 하나로, 인터넷에 연결된 컴퓨터들을 통해 정보 공유하는 공간.

world wide web 줄인말

 

2) 웹 동작원리

클라이언트/ 서버 방식으로 동작

클라이언트 : 사용자 (요청자), 웹 브라우저

웹 서버 : 서비스 제공자 

 

동작 방식 : 

클라이언트 ---- 웹 페이지 요청(request)----> 웹 서버

(브라우저)<------결과물로 응답(reponse)-----(ex. tomcat)

 

3) 정적웹페이지 / 동적 웹페이지

정적 웹페이지 : static : 저장된 텍스트 파일 그대로 보는것

html 같은 웹 언어로 작성

사용자가 web 브라우저에 url 입력요청

-> 이미 준비된 문서 그대로 보내줌

초기 웹페이지, 변화 적응 x, 추가/수정/삭제 수동으로

 

 

동적 웹페이지 : dynamic : 저장된 내용을 가공처리해서 보는것

PHP, ASP, JSP 같은 웹 언어로 작성

사용자가 web브라우저에 URL입력 요청

-> 분석,처리 -> 가공된 HTML 파일 생성 보내줌

현재 우리가 보는 페이지 대부분, 데이터 저장 DB

 

 

4) 웹 주소

URL : http://서버ip:port/File경로~~(uri)

 

내가 제공하는 웹사이트를 내가 요청하겠다.

http://  192.168.1.85:8080/ 파일경로

http:// 127.0.0.1:8080/ 파일경로  

http://localhost:8080 ( 우리가 사용할 버전)

 

IP : IP Address 네트워크상 PC 고유 주소

 

port : IP 주소로는 컴퓨터 구분을 할 수 있지만, 어떤 서비스 프로그램을 실행할지 알 수 없어서,

클라이언트가 연결할때 다른 서버 프로그램과 구분할 수 있도록 port 번호를 사용함.

내 pc에서 현재 사용중인 port 번호 확인

: cmd > netstat -a

톰캣 기본세팅 포트 번호 : 8080

 

도메인 cmd > nslookup naver.com

https://naver.com/main/read.nhn?a=10

DNS : Domain Name Service

-> DNS에 IP주소 요청 -> 응답받은 ip주소로 웹서버에 서비스 요청

-> 서버가 요청 주소 분석/처리해 요청한 내용을 응답 -> 브라우저

 

5) 웹 프로그래밍과 JSP

웹 프로그래밍 : 웹 서버가 웹 브라우저에 응답으로 전송할 데이터를 

생성해주는 프로그램을 작성하는 것

웹 프로그래밍 언어 : 클라이언트 측 실행 언어와 서버측 실행언어로 구분 

JSP(JavaServer Pages) : 자바를 기반으로 하는 서버측 웹 프로그래밍 언어.

HTML코드에 자바를 삽입 할 수 있도록 개발된 기술

(이전에는 Servlet이라는 기술로 사용하였으나 어렵고 불편)

실제로 웹 어플리케이션 서버에서 서비스 될때는 서블릿으로 변환됨

 

-JSP는 서블릿 기술의 확장

-JSP는 유지 관리 용이

-빠른 개발 가능

 

6) 웹 서버, 웹 컨테이너, 웹 어플리케이션 서버

#1. 웹 서버

HTTP 프로토콜을 이용하여 클라이언트 요청을 받아

HTML이나 오브젝트를 전송.

웹 서버만 구축된 서버는 웹페이지, 이미지등 "정적페이지"생성

아파치, IIS등 서버

 

#2. 웹 컨테이너 

JSP와 서블릿을 실행할 수 있는 프로그램으로

서블릿 컨테이너라고도 함.

웹 서버에서 JSP를 요청하면 컨테이너가 JSP파일을

서블릿으로 변환하여 컴파일을 수행, 서블릿 수행 결과를 웹 서버에 다시 전달.

 

 

#3. 웹 어플리케이션 서버 (Web Application Server : WAS)

웹 서버와 웹 컨테이너를 결합한 서버

JSP 컨테이너가 탑재된 WAS는 JSP페이지를 컴파일하여 "동적페이지" 생성함.

톰캣, BEA의 웹 로직 등..

 

3. JSP 페이지 구성 요소

디렉티브 (Directive)

스크립트 

표현언어 (EL Expression Language

내장객체 (Implicit Object)

정적인 데이터 (일반 텍스트)

표준 액션 태그 (Action tag)

커스텀 태그 (Custom tag)와 표준 태그 라이브러리(JSTL)

 

 

4.  디렉티브 태그

page : JSP 페이지에 대한 정보 설정

include : JSP 페이지의 특정 영역에 다른 문서를 포함

taglib : JSP 페이지에서 사용할 태그 라이브러리 설정

 

<%@ 디렉티브태그명 속성명 = "값" 속성명 = "값" ...%>

 

1) page

JSP 페이지 설정 정보 지정

문서 타입, 출력버퍼 크기, 에러페이지등 지정

페이지 최 상단에 선언 권장

 

[ 속성들 ]

language

contentType

pageEncoding : UTF-8 

import : 자바 임포트랑 같은 %>안에 넣어주면됨

session : true (default이므로 생략가능)/fault 로그인처리할때 

buffer : 버퍼사이즈 (8kb가 default)

autoFlush : true 디폴트  / 버퍼가 꽉차면 화면으로 알아서 뿌려줌, 

false로 하면 화면꽉찰때 에러남

isThreadSafe : true 여러사람이 와도 되는가?

info : 페이지 설명글 메모할것 (쓸일 거의없음)

errorPage : 에러페이지 errorpage = "error.jsp" (error라는 페이지를 띄움)

isErrorPage : false 디폴트 / 이 페이지가 에러전용 페이지냐 ?

isELignored : false 디폴트 / 

defrerredSyntaxAllowedAsLiteral  : false 디폴트 

 

2) include 태그

외부 파일의 내용을 포함 : 복붙 개념. 붙혀와서 서블릿으로 한번에 번역. 

헤더,푸터등 공통된 부분을 별도의 jsp파일로 만들어 모듈화 할때 유용한 태그

-> 코드 유지보스, 재사용 가능성 향상

<%@ include 속성 = "값"...%>

file="파일경로"

같은 폴더안에 있으면 파일명만, 그렇지 않으면 전체 URL 설정

주의!!! 현재파일과 include 하는 파일의 인코딩 설정이 동일해야함!!

 

3) taglib 태그

표현언어, JSTL, 사용자정의 태그등 외부 태그 라이브러리를 설정하는 태그

 

<%@ taglib prefix="태그식별자" uri="태그라이브러리경로" %>

 

 

 

<%@ 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> <!-- 4. 디렉티브 설명 -->
	<h1> test01</h1>
	서버 : <%= application.getServerInfo() %> <br />
	서벌릿 : <%= application.getMajorVersion() %>.<%= application.getMinorVersion()	%> <br/>
	JSP : <%=JspFactory.getDefaultFactory() .getEngineInfo(). getSpecificationVersion() %>	

</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    <%@ include file="test03.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test02</title>
</head>
<body> <!-- 4. 디렉티브 설명 -->

		<h2>==================================================	</h2>
		<h1>	Test02 page</h1>
		<h2>==================================================	</h2>
		 <%@ include file="test03.jsp" %>
		 <%@ include file="test03.jsp" %>
</body>

</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test03</title>
</head>
<body> <!-- 4. 디렉티브 설명 -->
<h2>**********************************	</h2>
<h1>Test03 page</h1>
<h2>**********************************	</h2>
</body>
</html>

 

 

5. 스크립트

: HTML 코드에 자바코드를 넣어 프로그램이 수행하는 기능 구현

서블릿 클래스로 변환할때, JSP 컨테이너가 자바 코드가 삽입되어 있는

스크립트 태그로 처리하고 나머지는 HTML코드나 일반 텍스트로 간주함.

 

선언부 : <%!   %> : 클래스 영역 : 사용 거의 안함

스크립트릿 : <% %> : 메서드 영역 : 가장 많이 사용. 변수선언 -> 지역변수 자바 실행 코드

출력문 : <%= %> : 값을 출력   : HTML코드와 섞어서 사용가능

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

 <!-- 6 스크립스설명 -->
<h1> test04 page </h1>
<%-- #1. 선언부 --%>
<%! 
	//선언부 : 클래스영역
	//클래스변수, 인스턴스 변수, 메서드
	static int num = 10;
	int num2 = 200;
	public int mul(int a, int b){
		return a * b;
	}
	
%>
<%-- #2. 출력문 : 세미콜론 안적음. 변수명, 리턴있는 메서드 호출하면 값화면에 출력 --%>
<%= num %> <br/>
<%= num2 %><br/>
10*20 = <%= mul(10,20) %>

<!-- 스크립트릿 -->
<% // 스크립트릿 : 메서드 영역
	for(int i = 0; i < num ; i++){
		out.print("java server pages" + i + "<br/>");
	}
	String col = "yellow";
	

%>
<body bgcolor="<%=col%>">
</body>

<ul>
<% for(int i = 0 ; i < 10; i++){ %>  


<li>hello jsp</li>
<%} %>
</ul>

 

 

 

728x90
728x90

======= 셋팅 순서 ========

1) 이클립스 UTF-8로 셋팅
window -> preferences -> encoding 검색 -> 좌측 UTF-8로 변경

-----------------------------------------

2) 톰캣 셋팅
 이클립스 하단 Servers 탭 빈곳 마우스 우클릭 > new -> server > Apache 폴더 
> Tomcat 9.0선택 후 Next!  
> Browsw 눌러서 톰캣 압축해제한 경로 선택 후 Next!
(※ 이때 눈으로 bin 폴더등이 보일때까지만 들어가기)
 ★ Servers탭 안에 Tomcat....생기고, 
왼쪽 Project Explorer에 Servers 폴더 생기면 됨.

-----------------------------------------

3) 웹프로젝트 세팅
 좌측 상단탭 File > New 
> Dynamic Web Project
> Project Name : 프로젝트명작성 후 Next!
> Next! > 체크박스 체크하고 Finish

-----------------------------------------

4) 웹 프로젝트 JDK 세팅
web폴더 만든 후 폴더 위 우클릭
> properties 
> 좌측탭 Project Facets
> Java 오른쪽 Version 11로 변경
> 좌측탭 Java Build Path
> JRE System Library 더블클릭
> JavaSE-11(jre)로 변경

 

 

필자는 NAS로 연동

2022.06.14 - [NAS] - [NAS] synology NAS로 Tomcat 구동 하는 방법 (docker, jsp)

728x90
728x90

17. 이벤트 등록
1) 이벤트 등록 방법
addEventListener() 를 이용하여 요소에 이벤트 등록

타켓.addEventListener("이벤트종류",function(){});
이벤트 종류
load : 로딩이 완료 되었을때
resize : 윈도우창 크기 변경되었을때

keydown
keyup

change
click
focus
mousedown
mouseup
mouseout
mouseover
mousemove

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
    </title>
</head>
<body>
  <button class="btn"> 클릭 </button>
  <button onclick="clickFunc()"> 클릭 2</button>
   <script> // 17 이벤트 등록
  
//@1 자바스크립트로 이벤트 등록
       const btn = document.querySelector(".btn");
       btn.addEventListener("click",function(){
           alert("버튼클릭");
       });
       
//@2 <button onclick="alert('버튼클릭)">클릭</button> 과 동일

//@3
       function clickFunc(){
           for(let i = 0; i <10; i++){
               if(i%2 ==0){
                   console.log("helloo"+i); 
               }
           }
       }
       
    </script>
    
</body>
</html>
728x90
728x90

16. 문서 객체 모델 (DOM, Document Object Model) : DOM 트리 

문서 노드  : 전체 문서를 가르키는 Document 객체
HTML 요소 노드 : HTML 요소를 가르키는 객체
텍스트 노드 : 텍스트를 가르키는 객체




# 노드 객체 가져오는 메서드 
document.getElementById(id값) : id 속성값으로 노드 가져오기
document.getElementsByTageName(name) : 태그명으로 노드 찾기 (배열로 리턴)
document.getElementsbyClassName(name) : class 속성값으로 노드 가져오기 (배열로 리턴)
document.querySelector(css선택자) : css 선택자로 노드 찾기 (첫번째 찾은 요소만 리턴)
document.querySelectorAll(css선택자) : css 선택자로 노드 찾기 (모든요소 배열로 리턴)

<h1>hello</h1>
# 찾은 HTML 요소 확인/수정
요소.innerText = '대치할 새로운 텍스트' : 요소 안의 내용 확인/ 수정 (태그 미포함)
요소.innerHTML = '새로운 HTML 내용' : 요소 안의 내용 확인/ 수정 (태그 포함)
요소.attribute = 새값 : 요소의 속성값 수정
요소.setAttribute(속성명, 값) : 요소의 속성값 메서드로 설정


# HTML 요소 생성/추가
document.creatElement(태그명) : HTML 태그 생성
document.appendChild(요소) : 요소 추가하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="first"> div 1 
          <div>1-1</div>
          <div>1-2</div>
          <div>1-3</div>
          <div class = "test"> test div</div>
      </div>
       
        <div id ="second"> div 2</div>
        <div id ="third"> div 3</div>
        <script>   
        
            let elem0 = document.getElementsByTagName('div'); // 태그 div 로된 모든 노드 출력  
            
            let elem1 = document.getElementsByClassName('first'); // 클래스 first 로된 노드 출력 
                console.log(elem0); // HTMLCollection(7) [div.first, div, div, div, div.test, div#second, div#third, second: div#second, third: div#third]
                console.log(elem1); // HTMLCollection [div.first]
            let elem2 = document.getElementById('second');
                console.log(elem2);
    
            let elem3 = document.querySelector('div.test');
                console.log(elem3);
    
            let elem4 = document.querySelectorAll('div');
                console.log(elem4);  //NodeList(7) [div.first, div, div, div, div.test, div#second, div#third]
                for(let i = 0; i<elem4.length; i++){
                console.log(elem4[i].innerText); // 글자만 가져오기
                }
                for(let i = 0; i<elem4.length; i++){
                console.log(elem4[i].innerHTML); // html 다가져오기
                }
    
                    
    </script>
</body>    
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width : 100px;
            height: 100px;
            text-align: center;
        }
    
    </style>
</head>
<body>
       <h1>hello</h1>
       
       <script> // 16번 
        const newTag = document.createElement('div'); // div태그 스크립트로 생성
           newTag.innerText = 'JavaScript';
           newTag.setAttribute("class","box");
           newTag.style.background = "red";
           newTag.style.color = "white";
           
          document.body.appendChild(newTag);

        </script>

</body>
</html>

728x90
728x90

4) history 객체
: 브라우저에서 뒤로가기 앞으로가기 기능을 코드로 실행시키는 기능 제공

# 속성들 메서드
back() : 뒤로가기
forward() : 앞으로가기
go(이동숫자) : 이동 숫자를 -2로 입력하면 뒤로가기 2번 / 양수이면 앞으로가기

5) navigator 객체
: 현재 사용자의 브라우저 정보와 운영체제 정보를 제공

# 속성
appVersion : 사용자 브라우저 버전 정보 리턴
language : 사용자 브라우저가 사용하는 언어. 한글 'ko'
product : 사용자 브라우저 엔진 이름.
platform : 사용자 컴퓨터 운영체제 정보 제공.
onLine : 사용자 온라인 상태 여부 제공.
userAgent : 사용자 브라우저와 운영체제의 종합 정보 제공

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
    </title>
</head>
<body><!-- 15-4 -->
           <h1> page 1</h1>
           <button onclick = "location.href='js25.html'"> 2 page로 이동</button>
           <button onclick="history.forward()"> 앞으로가기</button>
           <button onclick="history.go(1)"> 앞으로가기 go + 1</button>
    
     <script> 
        
             // 15- 5 네비
             let userAgent = navigator.userAgent;
             document.write(userAgent);
        
    </script>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <h1>page2</h1>
   <button onclick="history.back()">뒤로가기</button>
    
</body>
</html>


userAgent 출력문 :
     Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) 
Chrome/102.0.0.0 Safari/537.36


화면출력문 내용
Mozilla/5.0 기본 플랫폼
(Windows NT 10.0; Win64; x64)  운영체제 정보
AppleWebKit/537.36 (KHTML, like Gecko)   사용중인 브라우저 엔진 이름
Chrome/102.0.0.0  사용중인 브라우저 이름 / 버전
 Safari/537.36      같은 엔진을 사용중이며 호환 가능한 다른 브라우저



728x90
728x90



15. 브라우저 객체 모델 (BOM, Browser Object Model)
: 브라우저에 내장된 객체가 계층적 구조로 이루어져있는 것을 말함



1) window 객체

# 메서드
*open("URL", "새창 이름", "새창 옵션들") : 팝업창
* 새창 옵션들 *
width  : 창 너비
height  : 창 높이
left : 창 x 축 좌표
top : 창 y 축 좌표
scrollbars : 스크롤바 숨김 / 노출 설정. no/yes
location : url 주소 입력하는 영역 숨김/노출 설정
status   : 상태 표시줄 영역 숨김/ 노출 설정
toolbars : 도구 상자 영역 숨김/ 노출 설정

alert(data)  : 경고창에 data 보여주기
confirm("질문") : 질문 확인/취소. 확인 : true 리턴, 취소 : false 리턴
prompt("질문", "기본 답변")  :입력창
moveTo(x,y) : 지정한 새창의 위치를 이동
resizeTo(width, height) : 창크기 변경
*setIntervar(funtion(){}, 시간간격) : 지속적으로 지정한 시간간격을 두고 함수실행

*clearInterval() : 인터벌 삭제
*setTimeout(funtion(){...}, 시간간격)  : 지정한 시간 이후 함수 한번 실행
*clearTimeout() : 타임아웃 삭제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <button onclick="window.clearInterval(inter)"> 정지 </button>
 <button onclick="window.clearTimeout(out)"> 타임아웃 취소 </button>
         <script> //15 - 1
       
       // 5초후 타임아웃 콘솔창에뜸
        let out = window.setTimeout(function(){
            console.log("타임아웃!!!!");
            
        }, 5000);
        
        /*
        // 콘솔창에 1초마다 숫자만들기
           let num = 0;
            let inter= window.setInterval(function(){
                num++;
                console.log(num);
            },1000);
       */
        

        /*   // 네버버어라는 네이버창을 해당 크기에 맞게 띄움
            window.open("http://naver.com","네버버어","width=350, height=400, left=50, top 50, location=no, scrollbars=no,status=no");
        */
        /*   // 미리만들어둔 js22pop 파일을 popup이란 이름으로 해당 크기에 맞게 띄움
            window.open("js22pop.html","popup", "width=300, height=300, left=100,top=100, location=no ");
        */
        /*   // 지금 배고픈가요라는 질문창을 띄움
            let result = window.confirm("지금 배고픈가요?");
            console.log(result);
        */

    
    </script>
</body>
</html>

2) 스크린 객체
: 사용자의 모니터 정보를 제공하는 객체

screen.속성;

width  : 화면 너비값 리턴
height  : 화면 높이값 리턴
availWidth  : 작업표시줄 제외한 화면 너비값
availHeight : 작업표시줄 제외한 화면 높이값
colorDepth : 사용자 모니터가 표현 가능한 컬러bit리턴

3) location 객체
(브라우저 주소창 관련)

# 속성과 메서드 
**href** : 주소 영역의 주소를 설정하거나 리턴
hostname : url의 호스트이름을 설정하거나 리턴
host : url의 호스트이름과 포트번호를 리턴
protocol : 프로토콜 리턴
search : url의 쿼리스트링 리턴 (쿼리스트링 = 주소의 ? 뒷부분)
reload() : 브라우저 새로고침

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body> <button onclick="location.href='js22pop.html'"> 새로고침 </button>
    <script> // 15 -2 
    
        console.log(screen.width);    // 1920	
        console.log(screen.height);	   // 1080
        console.log(screen.availWidth); //1920
        console.log(screen.availHeight); //1040
        console.log(screen.colorDepth); 	//24

    
        //15 -3
        let hrefval = location.href;
        console.log(hrefval);     //http://127.0.0.1:51856/Js/js23.html
        
        console.log(location.hostname); // ip
        console.log(location.host);     //ip + 포트
        console.log(location.protocol);     //http(s)
        console.log(location.search);       //주소창? 뒤 리턴
        
        let tout = setTimeout(function(){
            //location.href = "js22pop.html";
            location.reload();
            
        },3000);   // 3초마다 새로고침
        
        
    </script>
</body>
</html>
728x90

+ Recent posts