Y's Diary

MVC

1. 하나의 페이지에 하나의 컨트롤러, (자바는 자식 장난감 사줄 때 다 사줘야 함.)

2. controller - serviceimpl(service) - mapper

3. 던져진 애들은 다 dto

페이지 이동하는 방법 2가지

//1. 왔다갔다
response. sendRedirect("넘어갈페이지");

//2. 그대로 앞으로 진행
//.jsp 파일에 있는 내용을 주소는 .jsp 없이 내용만 가져와라
RequestDispatcher dispatcher = request.getRequestDispatcher("넘어갈 페이지"); 
dispatcher.forward(request, response);

1. request.setattribute() 가 뭔데

2. 회원정보수정: c-s-m-db-m 넘기는 값: dto

3. jsp파일에서 form action 안에 값 (get/post) 없앤 후 controller에서 작업

4. request.getParameter();

5. loginVO vo = new LoginVO(); 에서 new LoginVO()는 stack과 heap 중 어디에 해당하는가

6. connection pool(?)

아래 문구들을 html파일이 아닌 jsp 파일에서 실행시키기

1. login.html

설명: 창에서의 아이디/비밀번호 입력요구 문구

파일 위치: garam > src > main > webapp > garam > login.html

<script>
	function login() {
		let mid = document.getElementById("mid");
		let errMsg = document.getElementById("errMsg");
		/* 속성 value == 값이 있냐 없냐 */
		/* 값이 없으면 errMsg div에 에러메시지를 날려준다. */
		if (mid.value == '') {
			/* 출력하는 방법 4가지 중 하나 */
			errMsg.innerHTML = "아이디(휴대폰번호)를 입력하세요";
			/* ★추가: 커서를 에러메시지가 뜬 장소로 옮겨준다. */
			mid.focus();
			/* 값이 없고 에러메시지가 출력이 되면 더 이상 넘어가지 않게 한다. */
			return false;
		}
		/* mid를 한 것과 같이 만들고 mid의 자리에 mpw를 넣는다. */
		/* errMsg에는 비밀번호에 관한 에러메시지를 넣는다. */
		let mpw = document.getElementById("mpw");
		if (mpw.value == '') {
			errMsg.innerHTML = "비밀번호를 입력하세요";
			/* ★추가: 커서를 에러메시지가 뜬 장소로 옮겨준다. */
			mpw.focus();
			return false;
		}
		console.log("login");
		/* 페이지가 지나가지 않도록 해주는 것: return false;  */
		/* 아이디와 비밀번호가 채워졌다면 지나갈 수 있도록 true를 사용한다. */
		return true;
	}
</script>

2. join01.html

설명: 약관 동의페이지에서 전체 동의 체크박스를 눌렀을 때 모든 약관에 동의되게 하는 스크립트

파일 위치: garam > src > main > webapp > garam > join01.html

<script>

let agree1 = document.getElementById("agree1");
let agree2 = document.getElementById("agree2");
let agree3 = document.getElementById("agree3");

function join02() {
	//checkbox checking
	if (!agree1.checked) {
		alert("서비스 이용약관 동의에 체크하세요");
		agree1.focus();
		return;
	}
	if (!agree2.checked) {
		alert("개인정보 수집 및 동의에 체크하세요");
		agree2.focus();
		return;
	}
	if (!agree3.checked) {
		alert("개인정보 3자 제공 동의에 체크하세요");
		agree3.focus();
		return;
	}
	location.href="join02.html";
	//location.replace("join02.html");
}

function chkAuto(t) {
	if (t.checked) {
		agree1.checked = true;
		agree2.checked = true;
		agree3.checked = true;
	} else {
		agree1.checked = false;
		agree2.checked = false;
		agree3.checked = false;
	}
	console.log("전체동의를 체크하였습니다." + t.checked);
}
</script>

3. 비밀번호/비밀번호 확인 (join02.html)

설명: 비밀번호와 비밀번호 확인란에 입력된 비밀번호가 일치하지 않을 시 초기화

function join02() {
	// 비밀번호 확인
	let pw = document.getElementById("pw");
	let pw2 = document.getElementById("pw2");
	if (pw.value != pw2.value) {
		alert("비밀번호가 일치하지 않습니다.");
		pw.value = "";
		pw2.value = "";
		pw.focus();
		return false;
	}

4. 비밀번호 유효성 검사 (8 ~ 12, [영문자, 숫자, 특수문자]) (join02.html)

설명: 영문자, 숫자, 특수문자 미입력시 alert창 띄워주며, 8자 이상이 안 되거나 12자를 초과하면 똑같이 경고창 띄움.

function pwChk(t) {
	if (t.value.length >= 8 && t.value.length <= 12) {
		let regE = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
	if (!regE.test(t.value)) {
		alert("비밀번호는 영문자, 숫자, 특수문자를 포함해야 합니다.");
		return false;
		}
	} else {
		alert("비밀번호는 8자 이상 12자 이하로 입력하셔야 합니다.");
}

5. 비밀번호 입력란 확인 기능 (join02.html)

설명: 사용자가 입력한 비밀번호와 비밀번호 확인란을 스스로 확인할 수 있게 하는 기능

function pwshow(t) {
	let pw2 = document.getElementById("pw2");
	if (t.checked) {
		pw.type = "text";
		pw2.type = "text";
		} else {
			pw.type = "password";
			pw2.type = "password";
		}
}

6. 

1. https://developers-dot-devsite-v2-prod.appspot.com/chart

2. https://www.chartjs.org/docs/latest/

3. https://echarts.apache.org/en/index.html

[1장]

1.  get방식과 post 방식

2. 웹 서버와 웹 어플리케이션 서버의 차이

3. tcp/ip 계층 복습

4. 프로세스와 스레드

5. 웹 컨테이너

• a.jsp - a_jsp.java - a_jsp.class(바이너리?)
• java se와 java ee의 차이 

6. jsp

• html + java = jsp
• 화면구현할 때 html을 했고 별도로 java 배움.
• 금융권에서 많이 사용(보안)

[2장]

1. ch02 - 13slide 생략 가능

2. 개발환경은 설치된 디렉토리를 가리키게 하면 된다. 

• 아파치 톰캣 마지막 부분에 'run apache tomcat' 체크 해제

[3장]

1. 서블릿의 역할

2. 이클립스에서 jsp 프로젝트 만들기

3. 스크립트 태그의 종류 및 역할

4. watson의 별명(?): catalina

5. page 디렉티브 태그의 속성

[4장]

1. 폼 태그

• enctype 없으면 파일 전송 불가

[4교시]

1. 마우스 효과 및 텍스트 효과

https://mf2fm.com/rv/dhtmlheartcursor.php

2. 코드 비교 사이트

https://www.diffchecker.com/

1. UI(User Interface: 사용자 인터페이스)

// 응용SW엔지니어링 개요

○ SW 제품은 특정 고객 또는 일반적인 시장을 위해 개발된다. 

• 일반적인 형태는 다양한 계층의 소비자를 위해 개발되며 예시로는 엑셀/워드 등이 있다.
• 주문 형태는 특정 고객의 사양에 맞게 개발된다.

○ 새로운 SW는

• 신규 개발되거나
• 기존 SW를 재사용하거나
• 일반적 SW를 재구성하여 만들어진다.

○ 응용SW엔지니어링이란

응용 SW를 구축, 운영, 유지보수, 재구축의 전반적인 업무를 수행하는데 관련 있는 모든 것을 의미한다.

○ 응용 SW엔지니어 직무자는

• 컴퓨터 프로그래밍 언어를 사용하여 각 업무에 맞는 SW 기능을 설계, 구현 및 테스트하고
• 사용자에게 배포하며
• 버전관리를 통해 제품 성능 향상과 서비스 개선 업무를 수행하는 사람을 의미한다.
• 개발프로젝트 매니저 / 프로그램 개발자 / 프로그램 설계자 / 화면 설계자 / 프로그램 테스터 
• 정보시스템 이관 업무 수행자 등 다양한 구성원이 함께 업무를 수행한다.

// 사용자 인터페이스 (UI: User Interface)

정보시스템에서 화면으로 지칭되어지는 요소와 가장 큰 관련이 있다.

○ 컴퓨터 상호 작용(HCI: Human-Computer Interaction)

: 컴퓨터와 사용자 사이의 상호작용과 정보 교환을 위한 인터페이스

: 사용자 경험을 더하여 UI/UX(User Interface / User Experience)라고 한다.

○ 사용자 인터페이스 제공 방법

• 입력: 사용자가 시스템을 조작하는 방법을 정의한다.
• 출력: 사용자 조작에 따라 시스템 생성 결과를 제시하는 수단으로 사용된다.

○ UI 분류

• GUI - Graphical User Interface
• WUI - Web User Interface
• CLI - Command User Interface
• Batch Interface
• Touch Interface
• 음성 사용자 인터페이스

// 화면 설계 원칙

◇ 직관성: 화면의 버튼, 항목, 입력 칸 등 한 눈에 봐도 그 기능과 의미를 파악해야 한다.

◇ 일관성: 여러 화면의 인터페이스에서 각 항목 배치는 일관성이 있어야 한다.

◇ 효율성: 화면이 쉽게 익숙해져야 하며 사용이 효율적이어야 한다.

○ 최소 당황의 원칙

사용자 경험에서 사용자가 익숙한 상황에 맞춰 설계한 것을 의미한다.

방의 문손잡이를 예로 들었을 경우에 보통 잡기 편안한 왼쪽 또는 오른쪽 끝에 위치하는데

만약 문손잡이가 상단 또는 하단에 있는 경우 이게 뭔가 싶을 것이다. 

// 웹/모바일 접근성 지침

○ 웹/모바일 접근성

: 어떤 사용자(장애인, 노인) 및 기술환경에서도 사용자가 전문적인 능력 없이 제공하는 모든 정보에 접근할 수 있도록 보장하는 것

(한국정보화진흥원이 정의내렸다.)

○ 접근성

: 장애인 뿐만 아니라 모든 사람이 정보통신 기기 및 서비스를 손쉽게 활용할 수 있도록 만드는 것

○ ex) 리모콘, 전화, 자동문 등은 장애인과 노인들을 위해 개발되었으나 널리 보급되며 모든 이가 편하게 활용하게 되었다.

(자동문은 그런 것 같았는데 리모콘은 처음 알았다..)

// 사용자 경험 (UX: User Experience)

○ 사용자 경험이란

• 사용자가 어떤 시스템, 제품, 서비스를 직.간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험
• 단순 기능과 절차상의 만족 뿐 아니라 전반적인 지각 가능한 모든 면에서 
• 사용자가 참여, 사용, 관찰하고 상호 교감을 통해 알 수 있는 가치 있는 경험을 의미한다.

○ 긍정적 경험과 부정적 경험

• 긍정: 사용자 니즈의 만족, 브랜드 충성도향상, 시장에서의 성공을 가져다 주는 주요 사항이 된다.
• 부정: 감정적, 이성적, 경제적으로 편리하지 못하거나 부정적인 반응을 불러일으키는 경험을 할 때 발생한다.

[다음 글]

응용SW엔지니어링 수행 프로세스(2) - 사용자 경험

1. 카카오맵 https://apis.map.kakao.com/

1. 카카오 개발자사이트 (https://developers.kakao.com) 접속
2. 개발자 등록 및 앱 생성
3. 웹 플랫폼 추가: 앱 선택 – [플랫폼] – [Web 플랫폼 등록] – 사이트 도메인 등록
4. 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록합니다. (예: http://localhost:8080)
5. 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용합니다.
6. 앱을 실행합니다.

2. 카카오오븐: https://ovenapp.io/ 

[막힌 부분]

문제.

1. w3cschools.com - javascript - 전구 껐다 켰다하기 (button)

2. 똑같은 문제를 토글버튼을 사용하여 껐다 켰다하기(무려 20분 소요..)

- 결과화면: on

- 결과화면: off

- 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 전구 on/off -->
<h2>자바스크립트: 전구 on/off </h2>

<!-- 버튼 2개로 전구 on/off 하기 -->
<button onclick="on()">Turn On</button>
<img src="img/pic_bulboff.gif" alt="전구" id="bulb">
<button onclick="off()">Turn off</button>

<!-- 토글 사용하여 하나의 버튼으로 전구 on/off 하기 -->
<button onclick="toggle()">토글</button>

<!-- javascript -->
<script>
/* on */
function on() {
	//var img = document.images[0].src;
	document.getElementById("bulb").src = "img/pic_bulbon.gif";
	console.log("켜라");
}

/* off */
function off() {
	document.getElementById("bulb").src = "img/pic_bulboff.gif";
	console.log("꺼라");
}

/* 버튼 한 개로 키고 꺼라 (on/off) */
function toggle() {
	/* 이미지 비교하는 법 .src */
	if(document.getElementById("bulb").src == "http://localhost:8080/javascript/img/pic_bulboff.gif") {
		/* 킨다 */
        on();
	} else {
    	/* 끈다 */
		off();
	}
}
</script>
</body>
</html>