국비학원/수업기록
국비 지원 개발자 과정_Day55
루팽
2023. 2. 15. 15:07
<시험1-UI 구현서술형(신)>
HTML5에서 제공하는 input 태그의 type속성으로 사용 가능한 속성값을 5가지 이상 작성
button, checkbox, color, date, email
HTML의 영역을 구분하는 태그 중 div 태그와 span 태그의 차이점을 서술
div는 줄 바꿈이 되고 Block속성으로 width, height 크기 지정이 가능하지만,
span은 줄바꿈 없이 그 옆으로 붙고 Inline속성으로 크기를 지정할 수 없다.
전역객체(Window)의 NaN 속성에 대해 서술
Not-A-Number로 숫자가 아니라는 의미
자바스크립트의 scope 중 block scope에 대해 서술
주어진 코드블록({}) 안에서만 사용이 가능하며 밖에서는 접근할 수 없는, {}에 의해 생기는 변수의 유효범위를 블록 스코프라고 한다.
자바스크립트의 scope 중 block scope와 functional scope의 차이에 대해 서술
블록스코프에는 let, const가 있고, 블록({})마다 새로운 스코프가 재정의된다.
함수스코프에는 var가 있고, 함수마다 새로운 스코프가 재정의된다.
자바스크립트의 원시타입을 3가지 이상 서술
string, number, boolean
window 객체의 onload 속성에 대해 서술
자바스크립트에서 페이지가 로드되면 자동으로 실행되는 전역 콜백함수이다.
페이지의 모든 요소들이 로드되어야 호출되고, 한 페이지에서 하나의 window.onload() 함수만 적용된다.
자바스크립트의 브라우저 객체 모델에 속한 객체를 3개 이상 서술
navigator, screen, location
<시험2-UI 구현포트폴리오(신)>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>회원 가입 양식</title>
<style>
div{
height: 185px;
width: 370px;
border: 1px solid black;
padding-top: 20px;
padding-left: 20px;
margin-top:25px;
}
p{
background-color: white;
font: 14px black;
position: absolute;
top: 2px;
left: 20px;
}
td{
font-size: 14px;
}
.id{
margin: 5px 0;
margin-left: 10px;
}
.pw{
margin: 5px 0;
margin-left: 10px;
}
.pwRe{
margin: 5px 0;
margin-left: 10px;
}
.radio{
margin: 5px 0px 5px 0px;
}
.rLable{
margin: 5px 0px 5px 2px;
margin-left: 12px;
}
.btn-chk{
font-size: 12px;
}
.btn-reset{
font-size: 12px;
position: absolute;
left: 177px;
margin: 10px 0;
}
.btn-submit{
font-size: 12px;
position: absolute;
left: 233px;
margin: 10px 0;
}
</style>
</head>
<body>
<div>
<p >회원 가입 양식</p>
<form action="insert.no" method="post">
<table>
<tr>
<td>아이디</td>
<td>
<input class="id" id="id" type="text" size="20px">
<input class="btn-chk" id="btn-chk" type="button" value="중복확인">
</td>
</tr>
<tr>
<td>비밀번호</td>
<td>
<input class="pw" type="password" size="20px"></input>
</td>
</tr>
<tr>
<td>비밀번호확인</td>
<td>
<input class="pwRe" type="password" size="20px"></input>
</td>
</tr>
<tr>
<td class="loc">지역</td>
<td>
<label class="rLable" for="loc1">서울</label>
<input name="radio" class="radio" type="radio" id="loc1" value="서울"></input>
<label class="rLable" for="loc2">부산</label>
<input name="radio" class="radio" type="radio" id="loc2" value="부산"></input>
<label class="rLable" for="loc3">대구</label>
<input name="radio" class="radio" type="radio" id="loc3" value="대구"></input>
</td>
</tr>
</table>
<input class="btn-reset" id="btn-reset" type="reset" value="초기화"></input>
<input class="btn-submit" id="btn-submit" type="button" value="회원가입"></input>
</form>
</div>
<script>
// 중복확인 버튼을 눌렀을 때
document.getElementById('btn-chk').addEventListener('click', ()=>{
const userId = document.getElementById('id').value;
const firChk = /^[a-z]/; // 첫글자만 영어소문자
const secChk = /[^a-zA-Z0-9\!\@\#]/; // 영어,숫자,!,@,#
console.log(userId.search(firChk));
console.log(userId.search(secChk));
if(userId.search(firChk) >= 0 && userId.search(secChk) <= 0 && userId.length >= 6 && userId.length <= 12){
document.getElementById('id').style.backgroundColor = 'green';
} else{
document.getElementById('id').style.backgroundColor = 'red';
}
})
// 회원가입 버튼을 눌렀을 때
document.getElementById('btn-submit').addEventListener('click', ()=>{
const radio = document.querySelector('input[type=radio][name=radio]:checked');
if(!radio){
window.alert("지역을 선택해주세요")
}
})
// 초기화 버튼 - 배경색 초기화
document.getElementById('btn-reset').addEventListener('click', ()=>{
document.getElementById('id').style.backgroundColor = 'white';
})
</script>
</body>
</html>
<부서등록 추가 - 기본페이지>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>부서관리3</title>
<%@ include file="../../common/easyUI_common.jsp"%>
<script type="text/javascript">
const insertForm = () => {
console.log("insertForm 호출");
// 부서등록 다이얼로그
$('#dg_dept').dialog({
title: '부서정보등록',
width: 400,
height: 400,
closed: false,
cache: false,
href: 'insertForm.jsp',
modal: true
});
};
</script>
</head>
<body>
<table id="dg"></table>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-add" plain="true" onclick="insertForm()">입력</a>
</div>
<div id="dg_dept"></div>
<script type="text/javascript">
// 부서관리 테이블
$('#dg').datagrid({
title: '부서관리',
url:'../dept.json',
toolbar: '#toolbar',
columns:[[
{field:'deptno', title:'부서번호', width:100},
{field:'dname', title:'부서명', width:100},
{field:'loc', title:'지역', width:100, align:'right'},
]]
});
</script>
</body>
</html>
<부서등록 추가 - 다이얼로그>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>부서등록 - 다이얼로그</title>
<%@ include file="../../common/easyUI_common.jsp"%>
</head>
<body>
<div style="margin: 20px 0;"></div>
<div style="margin: 30px">
<form id="f_dept" action="insertAction.do" method="get">
<div style="margin-bottom: 20px">
<input class="easyui-textbox" name="deptno" label="부서번호: "
labelPosition="top" data-options="prompt:'Enter a deptNo'"
style="width: 200px;">
</div>
<div style="margin-bottom: 20px">
<input class="easyui-textbox" name="dname" label="부서명:"
labelPosition="top" data-options="prompt:'Enter a deptName'"
style="width: 300px;">
</div>
<div style="margin-bottom: 30px">
<input class="easyui-textbox" name="loc" label="지역:"
labelPosition="top" data-options="prompt:'Enter a Location'"
style="width: 300px;">
</div>
<div style="text-align: center">
<a href="javascript:insertAction()" class="easyui-linkbutton"
iconCls="icon-ok" style="width: 200px; height: 32px">등록</a>
</div>
</form>
</div>
<!-- js를 바디 가장 밑쪽으로 내려줌 -->
<script type="text/javascript">
const insertAction = () => {
console.log($("#_easyui_textbox_input1").val()
+ ", " + $("#_easyui_textbox_input2").val()
+ ", " + $("#_easyui_textbox_input3").val())
const u_deptno = $("#_easyui_textbox_input1").val()
const u_dname = $("#_easyui_textbox_input2").val()
const u_loc = $("#_easyui_textbox_input3").val()
$.ajax({
method: "get",
url: "/jEasyUI/dept/insertAction.do?deptno="+u_deptno+"&dname="+u_dname+"&loc="+u_loc,
success: function(data){
console.log("톰캣서버에서 응답으로 보낸 값 => " + data)
}
})
}
</script>
</body>
</html>
<부서등록 추가 - 서블릿>
package com.day1;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.log4j.Logger;
/*
* 자바로는 웹서비스가 불가하다 -> request와 response가 없어서 안된다!
* 왜냐하면 http(s: security+인증서)프로토콜을 지원하는 API가 없으니까
* 그리고 자바는 URL(프로토콜://도메인:포트번호/경로/페이지이름 or 서블릿)을 등록할 수 없으니까
*
* Servlet = Server + Applet(JFrame-html태그에서 호출이 가능한 유일한 자바클래스)
* jsp콘테이너(jsp-api.jar)와 servlet콘테이너(servlet-api.jar)
* a.jsp ->(톰캣서버의 jsp-api.jar이 자바로 변환)-> a_jsp.java ->(servlet-api.jar이 컴파일해줌)-> a_jsp.class
*
* 서블릿이 되기위한 조건
* HttpServlet을 상속받아야한다 → 상속받아서 Override해서 씀(doGet, doPost), @어노테이션은 자바에 작성한다
* 사용자의 요청을 서버쪽으로 전달하기위한 4가지 함수 중 get, post사용
* doGet, doPost메소드의 파라미터에 request, response
*
* 웹페이지 출력이란? -> 쓰기이다
* request - 쿼리스트링 -> get방식 -> RESTfull API[get, post, put, delete]
*
* response
*
* js 출력
* document.write("<b>123</b>")
*
* 서블릿 출력
* PrintWriter out = res.getWriter();
* out.print("<b>123</b>")
*/
public class DeptManager extends HttpServlet {
Logger logger = Logger.getLogger(DeptManager.class);
@Override
public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
logger.info("[[ doGet 호출 성공 ]]");
String u_deptno = req.getParameter("deptno");
String u_dname = req.getParameter("dname");
String u_loc = req.getParameter("loc");
res.setContentType("text/plain;charset=UTF-8");
PrintWriter out = res.getWriter();
out.print(u_deptno + ", " + u_dname + ", " + u_loc);
}
@Override
public void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
logger.info("[[ doPost 호출 성공 ]]");
}
}
<부서등록 추가 - xml>
<?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">
<!--
web.xml(배치서술자 Deployment Descriptor)은 톰캣에서 제공해준다 -> 위치는 WEB-INF 아래
서버가 처음 로딩 시 web.xml 파일을 읽어들여 환경설정에 대해 어플리케이션을 배치하게 됨
-->
<!-- context-param에 등록한 정보는 톰캣서버가 기동할 때 생성되서 서버가 죽을때까지 쭉 기억한다 -->
<context-param>
<param-name>log4jConfigLocation</param-name>
<param-value>/WEB-INF/classes/log4.properties</param-value>
</context-param>
<!--
자바로 웹서비스X / 서블릿은 가능 -> URL을 적을 수 있어서 -> xml에 등록가능(URL사용위해 서블릿을 배치)
서블릿과 서블릿매핑은 항상 같이있어야한다
URL을 등록(url-pattern) - URL이 있어야 요청할 수 있음
servlet보다 servlet-mapping을 먼저 읽는다
-->
<servlet>
<servlet-name>HelloServlet</servlet-name>
<servlet-class>com.day1.HelloServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HelloServlet</servlet-name>
<url-pattern>/day1/hello.kh</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>DeptServlet</servlet-name>
<servlet-class>com.day1.DeptManager</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DeptServlet</servlet-name>
<url-pattern>/jEasyUI/dept/insertAction.do</url-pattern>
</servlet-mapping>
</web-app>
<!--
Deployment Descriptor 배치서술자 spring maven방식 빌드 -> pom.xml파일에 등록
web.xml문서를 수정하면 반드시 서버를 내렸다가 다시 기동할 것(주의!)
-->