일경험프로그램 2일 차 특이사항
1. 인사기록카드 작성. 호주와 본적은 뭐지?
호주는 폐지된 제도임. 세대 분리되어 있다면 자신의 이름을 쓰면 됨.
본적은 가족관계증명서를 보면 나와 있음. 정부24를 통해 문서 발급.
2. 회사에 제출할 학교 졸업증명서 PDF 보안파일을 3,500원 주고 신청했는데 서버가 다운됐다. 결제는 됐는데 문서가 들어오지 않았다. 이게 무슨 오류인가? 환불 요청했다.
3. 실외기 고장(?)으로 교육실이 찜통이다. 머리가 아플 정도...
4. 첫 구내식당 이용. 생각보다 맛이 좋았다.
점심식사가 11:30부터라서 아침을 먹기가 애매하다. 그냥 참았다가 가서 맛있게 많이 먹어야겠다.
공부 흐름도
1. Web은 URL요청이 있어야 한다. 네이버, 구글도 요청이 있어야 작동한다.
2. Web은 브라우저와 database가 데이터를 주고 받는 과정.
3. front(jsp, 제이쿼리, <jstl>, script, css) -java가 중간에 껴있다- back (java, spring, mybatis)
4. java가 중간다리 역할을 한다. jdbc는 DB를 다룸.
5. java에서 프론트에 해당하는 것을 서블릿이라고 한다.
6. java는 위에가 오류 나면 다 실행이 안됨. 이를 보완하기 위해 사람들이 노력함.
7. 스트러츠→ Spring → Mybatis → jsp → ...
8. 비슷한 언어들끼리 모아두기 위해서 발전이 됐다.
9. 자바스크립트의 불편함을 보완하는 제이쿼리의 등장.
10. 스크립트의 불편한 점은 만든 값을 다시 넣어줘야 하는 것이다.
11. 그래서 앵귤러JS가 나왔으나 angular.js 는 요즘 잘 안 쓰는 추세임.
12. 더 편리한 것이 나옴. mi-platform, x-platform, nexacro가 나왔다. nexacro는 앞으로 교육을 함. websquare5를 많이 쓰는 추세. 코드 입력이 아니라 마우스로 그린다. jsp보다 편한 언어들이 나오기 시작함.
13. node가 나왔다. 서버를 내리지 않아도 수정이 가능하다. node, vue, react 를 사용함.
14. Spring, jsp, jquery를 주력으로 한다.
15. svn 사용방법도 앞으로 배울 것이다.
Java 이론 정리
1. 기본 자료형
string, int, float, double, long, short, boolean, char...
2. collection
list, map, arraylist, hashmap, vo, iterator, enum, vector 꺽쇠 <>를 제너릭이라 부른다.
Map<String, Object> map = new HashMap<String, Object>();
Object는 모든 것을 포용할 수 있는 자료형이다.
3. 상속
extends class 단일 상속이 가능. extends class 2개 상속. 다형성 개념 - 여러 개를 상속한다. A extends B extends C
implements interface, interface, interface.
4. @override의 뜻
부모 메서드에서 인터페이스 상속에서만 적용된다. 무조건 같아야 한다.
부모에 선언된 메서드를 자식이 같이 물려받아서 사용한다.
5. overloading
메서드 이름은 같은데 매개변수는 다르게 사용 가능하다.
6. 생성자
클래스명과 같은 이름의 메서드. 인스턴스 초기화 함수.
7. 접근제한자
private class, protected package, default, public project
8. 예외처리
exception, try catch, throws, nullpointedexception, outofindex 등 exception을 많이 알아두면 좋다.
9. ★ 조건문이 가장 중요하다. 개발자 가장 많이 쓰는 구문.
10. 향상된 for문
for(variable : array list)
11. 삼항연산자
String a = "test" == null ? "aaaa":"bbbb"l;
회원가입조건 (HTML, Javascript)
[요구사항]
id : 문자(영어), 숫자만, 중복체크, "test"
pw : 비밀번호확인(가입신청버튼 클릭시)
이메일 : 유효성(가입신청버튼 클릭시)
주민번호 : 숫자만 주민번호 유효성
뒷자리 맨첫자리만 숫자 1******
(가입 신청클릭시)
이름 : 5글자(maxlength x)-script
문자(한글,영어)
5글자 넘어갈 시 바로 체크
휴대폰 : 숫자만 4자리 -> 3번째로
4개 입력하면 3번째 창으로 커서이동
여기에 맞춰서 작성한 소스 코드
[SignUp.jsp]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.net.URLDecoder" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
<title>SignUp</title>
</head>
<body>
<form>
<table width="1400" height="650">
<tbody>
<tr>
<td width="100%" height="10%">회원가입</td>
</tr>
<tr>
<td height="60%" align="center" valign="top">
<hr><br>
<p align="left" style="padding-left:160px">
<br><br>
ID: <input type="text" size="10" maxlength="15" name="id" id="id" onblur="validateId()">
<input type="button" name="idChk" value="중복체크" id="idChkBtn" onclick="checkId()">
<br><br>
비밀번호 : <input type="password" size="15" maxlength="20" name="pass" id="pass"><br><br>
비밀번호 확인 : <input type="password" size="15" maxlength="20" name="pass2" id="pass2"><br><br>
이름 : <input type="text" size="13" name="name" id="name" onkeyup="fncNameKeyUp(this)"><br><br>
이메일 : <input type="text" size="15" name="email1" id="email1">@<input type="text" size="15" name="email2" id="email2"><br><br>
휴대폰 : <select name="ph1">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="019">019</option>
</select>
- <input type="text" name="ph2" size="5" maxlength="4" id="ph2"> - <input type="text" name="ph3" size="5" maxlength="4" id="ph3"><br><br>
성별 : <input type="radio" name="gender" value="남자"> 남자
<input type="radio" name="gender" value="여자"> 여자<br><br>
주민번호 : <input type="text" name="jumin1" id="jumin1"> - <input type="password" name="jumin2" id="jumin2"><br><br>
주소 : <input type="text" name="address" size="15" maxlength="15"><br>
*주소는 (시/도)만 입력해주세요 (예: 경기도, 서울특별시, 경상남도 등)
</p>
</td>
</tr>
<tr>
<td align="center">
<hr><br>
<input type="button" id="regi_btn" value="가입신청" onclick="checkPassword(); validateEmail(); checkJumin()">
<input type="reset" value="다시입력">
<input type="button" value="취소">
</td>
</tr>
</tbody></table>
</form>
<script>
function validateId() {
var idInput = document.getElementById("id");
var idValue = idInput.value;
var regex = /^[a-zA-Z0-9]{4,}$/;
if (!regex.test(idValue)) {
alert("ID는 영문 또는 숫자로만 구성되어야 하며, 최소 4자 이상이어야 합니다.");
idInput.value = "";
}
}
function checkId() {
var inputVal = document.getElementById("id").value;
if (inputVal === "test") {
alert("중복 ID입니다.");
document.getElementById("id").value = "";
} else {
alert("사용 가능한 ID입니다.")
}
}
function checkPassword() {
var password1 = document.getElementById("pass").value;
var password2 = document.getElementById("pass2").value;
if (password1 !== password2) {
alert("비밀번호가 일치하지 않습니다. 다시 확인해주세요.");
// 일치하지 않는 경우 초기화
document.getElementById("pass").value = "";
document.getElementById("pass2").value = "";
}
}
function validateEmail() {
var email1 = document.getElementById("email1").value;
var email2 = document.getElementById("email2").value;
var emailRegex = /^[A-Za-z0-9]+@[A-Za-z0-9]+\.[A-Za-z]{2,}$/;
if (!emailRegex.test(email1 + "@" + email2)) {
alert("올바른 이메일 형식이 아닙니다. 다시 입력해주세요.");
// 이메일 입력란 초기화
document.getElementById("email1").value = "";
document.getElementById("email2").value = "";
}
}
function checkJumin() {
var jumin1 = document.getElementById("jumin1").value;
var jumin2 = document.getElementById("jumin2").value;
var jumin1Regex = /^[0-9]{6}$/;
var jumin2Regex = /^[0-9]{7}$/;
if (!jumin1Regex.test(jumin1)) {
alert("주민번호 앞자리는 6자리의 숫자로 이루어져야 합니다.");
document.getElementById("jumin1").value = "";
} else if (!jumin2Regex.test(jumin2)) {
alert("주민번호 뒷자리는 7자리의 숫자로 이루어져야 합니다.");
document.getElementById("jumin2").value = "";
}
}
function fncNameKeyUp(inputElement) {
var nameValue = inputElement.value;
var regex = /^[a-zA-Z0-9]{1,5}$/;
if (!regex.test(nameValue)) {
alert("이름은 영문과 숫자만 입력 가능하며, 최대 5자까지 입력할 수 있습니다.");
inputElement.value = nameValue.slice(0, 5);
}
}
</script>
</body>
</html>유효성 검사 코드짜기가 생각보다 쉽지 않다. 내일은 확실히 완성해 보자.
느낀 점
2일차 첫 교육을 받았다. 앞으로 배우게 될 공부의 흐름과 Java 기초 지식을 정리했다. 기억나지 않는 Java 개념들이 꽤 있었다. Java의 정석 책을 다시 펴봐야 할 것 같다.
Spring으로 개발하던 웹 사이트에 회원가입(SignUp.jsp) 페이지를 만들어줬다. HTML코드는 복사해서 가져왔다. Javascript를 이용하여 각 항목별로 유효성 검사 코드를 만들고 있다. 주민번호 입력 type은 password라서 숫자가 보이지 않는다. 그런데 주민번호 뒷자리 첫 글자 1이 보이도록 어떻게 코드를 짜는지 모르겠다.
'일경험' 카테고리의 다른 글
| [국민취업지원제도 일경험프로그램 6일차] 게시판 만들기(CRUD, SpringMVC, mapper, mybatis) (0) | 2023.08.09 |
|---|---|
| [국민취업지원제도 일경험프로그램 5일차] 스크립트 체크박스 (1) | 2023.08.07 |
| [국민취업지원제도 일경험프로그램 4일차] jQuery와 HTTP (0) | 2023.08.04 |
| [국민취업지원제도 일경험프로그램 3일차] jQuery(제이쿼리)를 이용한 유효성 검사 (0) | 2023.08.03 |
| [국민취업지원제도 일경험프로그램 1일차] 개발 환경 설정하기 (0) | 2023.08.01 |
