JAVA 웹개발 과정 국비 45일차 정리

45일차

※ 배우는 과정이므로 정확하지 않을 수 있습니다.
잘못된 점은 알려주시면 수정하도록 하겠습니다!

---

Jquery 및 평가를 대비한 몇가지 지식들을 배웠다.
내일이 평가일인데, 가장 평균점수가 낮은 평가라고 해서 떨린다!

1. JQuery

1) JQuery란?

자바스크립트 라이브러리.
자바스크립트를 더 편하게 사용하기 위해 쓴다.
여러가지 버전 중 slim이 들어간 버전은 쓰지 말 것. ajax 기능이 빠져있다.

2) 이용방법

CDN 이용하기

1. 구글에 jquery cdn을 검색한다.
2. 사이트에 들어가서 최신버전(jQuery 3.x)의 minified 클릭.
3. 실행하려면 소스코드만 복사해오면 되는데, integrity는 보안을 위해 사용한다고 한다.
4. head태그 사이에 붙여넣기.

3) 자바 객체와 제이쿼리 객체

• 제이쿼리에서 $는 jQuery를 의미한다.
• JQuery에서는 CSS에서 사용하던 태그, 클래스 등의 모든 선택자를 동일하게 사용 할 수 있다.
• 선택자에는 “ “를 넣고, 변수나 객체는 “ “를넣지 않는다.

<input type="text" id="message">

input태그를 기본 자바스크립트와 제이쿼리로 각각 대상을 변수로 선택하면 아래와 같다.

let obj1 = document.getElementById("message");
console.log(obj1);
// <input type="text" id="message">

let obj2 = $("#message");
console.log(ob2);
// S.fn.init [input#message]
// 0: input#message
// length: 1
// [[Prototype]]: Object(0)

obj1는 javascript 객체로 선택해서 사용(자바스크립트 오브젝트를 담았다라는 느낌)하는 것이라면, obj2는 jQueryNode로 선택해서 사용(제이쿼리상태로 한번 더 덮어 씌운 것)하는 것이라고 할 수 있다.
대상 객체를 가져다 쓴다는 동일하지만 자바 객체를 가져오느냐 제이쿼리 객체를 가져오느냐의 차이는 있다.

obj1과 obj2는 동일한 대상을 대한다는 면에서는 같지만 사용할 수 있는 기능이 다르다.
제이쿼리는 $("#message").무언가 = 가 없다. 즉, 멤버필드가 없다.
$("#message").무언가() 이처럼 함수만 올 수 있다.

4) JQuery의 함수

함수	설명
val(값)	파라미터가 존재하면 setter로 사용
val()	파라미터가 존재하지 않으면 getter로 사용
html()	div의 값(js에서 innerHTMl)
css()	style sheet 수정 가능

See the Pen js by kkongkeozzang (@kkongkeozzang) on CodePen.

css 여러개는 객체로 줄 수 있다.

See the Pen js by kkongkeozzang (@kkongkeozzang) on CodePen.

5) 이벤트 생성 방법

① js의 on 방식

자바스크립트에서 이벤트 요소에 .을 붙이고 on과 이벤트리스너를 쓰고, 이벤트핸들러(함수)를 썼던 것과 같은 방식이다.
on과 =이 빠진다는 것 빼고는 별다른점이 없다.

$("#btn").click(function(){
	alert("test");
})

② addEventListener 방식

위에서 빠진 on이 여기서 쓰인다.
자바스크립트에서 addEventListener 방식과 똑같은 방법으로, Dynamic Binding 을 사용할 수 있다.
또한 더 많은 이벤트를 다룰 수 있다.
따라서 1번 방식보다는 2번 방식으로 이벤트를 등록하는 것을 권장한다.

$("#btn").on("click",function(){
	alert("test");
})

6) 제이쿼리 배열의 요소

p태그가 여러개 있을 때, 제이쿼리로 p태그를 선택하면 배열로 p태그가 선택되는 것을 볼 수 있다.

<p>Hello JQuery 1</p>    
<p>Hello JQuery 2</p>    
<p>Hello JQuery 3</p>    
<p>Hello JQuery 4</p>

console.log($("p"));
// S.fn.init(4)
// 0: p
// 1: p
// 2: p
// 3: p
// length: 4
// prevObject: S.fn.init [document]
// [[Prototype]]: Object(0)

이때, p:nth-child()를 쓰거나, 배열의 인덱스를 찾아서 각각의 요소에 접근할 수 있다.
그런데, 배열의 인덱스를 찾아서 쓸 때에는 주의가 필요하다.

$("p")는 배열으로 제이쿼리 객체인 반면, $("p")[0]은 배열의 요소로 자바스크립트 element이다.
즉, element에 css함수가 없으니 에러가 뜬다.
이렇게 요소에 접근하여 함수를 쓸 때는 한번더 $로 감싸주어야 한다.

• $("p") : 제이쿼리 객체, 배열
• $("p")[i] : 배열의 요소, 자바스크립트 객체
• $($("p")[0]) : 배열의 요소를 다시 제이쿼리로 감싸준 것. 제이쿼리 객체

See the Pen js by kkongkeozzang (@kkongkeozzang) on CodePen.

2. form 태그 이어서..

지난 시간에 form 태그로 유효성 검사를 하는 방법을 배웠다.
form 태그는 submit 버튼과 함께 쓰여 페이지를 이동하면서 정보를 모두 가져간다.
이 특성과 제이쿼리를 이용해서 조금 더 효율적인 유효성 검사를 진행할 수 있다.

1. 유효성 검사

아이디와 메세지, checkbox타입의 input태그 그리고 radio타입의 input 태그를 한 form 안에 넣고, submit 버튼을 만든다.
radio타입 input 태그를 만들 때는 name을 지정해주지 않으면 모두 다 선택 가능하기 때문에 주의한다.

<form action="exam01.html" method="get" id="frm">
    <input type="text" id="id"><br>

    <textarea id="msg"></textarea><br>
    당신이 좋아하는 기업은 어디입니까?(1개 이상 선택)<br>
    <input type="checkbox" value="Apple">Apple
    <input type="checkbox" value="Microsoft">Microsoft
    <input type="checkbox" value="Google">Google<br>

    당신이 좋아하는 언어는 무엇인가요? <br>
    <input type="radio" value="Java" name="lang">Java
    <input type="radio" value="Python" name="lang">Python
    <input type="radio" value="C" name="lang">C<br>

    <input type="submit">
</form>

submit 버튼은 기본적으로 action 속성을 가지고 있기 때문에, 버튼을 누르면 이동하는 이벤트가 자동으로 진행된다.
따라서 if문에 return false;를 넣어주면 넘어가지 않게 막아줄 수 있다.
return 값을 주지 않으면 default로 true값을 가진다.
radio타입이나 checkbox 타입은 input[type=type]:checked를 이용하여 대상을 선택할 수 있다. 배열로 값을 리턴하기 때문에 .length를 사용하면 몇개를 선택했는지를 알 수 있다.
또한 for문으로 어떤 값을 선택했는지도 확인 가능하다.

$("#frm").on("submit",function(){
	if($("#id").val()==""){
		alert("아이디를 입력하세요.");
		return false;
	}
	if($("#msg").val()==""){
		alert("메세지를 입력하세요.");
		return false;
    }
    if($("#frm input[type=checkbox]:checked").length==0){
    	alert("기업을 최소 1개 이상 선택해주세요.");
    	return false;
    }
    if($("#frm input[type=radio]:checked").length==0){
    	alert("언어를 선택해주세요.");
    	return false;
    }
})

// 어떤 걸 선택했는지 추적하는 기능
let arr = $("#frm input[type=checkbox]:checked");
for(let i=0;i<arr.length;i++){
	console.log(arr[i].value);
}

See the Pen js by kkongkeozzang (@kkongkeozzang) on CodePen.

2. form 태그의 method 속성

<form action="exam01.html" method="get">

form 태그의 method 속성을 이해하려면 클라이언트-서버 통신을 알아야하는데, 뒤에서 배울 거긴 하지만 살짝 알아보도록 하자.

form태그의 역할은 위에서 정리했듯이 클라이언트에 있는 정보가 서버로 넘어가게 해주는 것이다.
이때 전송 과정을 Request라고 한다.
즉, Request란 클라이언트가 서버에게 전달하는 모든 통신이다.
서버가 Request를 받으면, 응답할 의무가 있는데 이때 서버는 Response라는 응답을 보낸다.
이렇게 클라이언트가 요청하면 서버가 응답하는 동작이 웹 어플리케이션의 기본 동작이다.

Request는 데이터 패킷(데이터 덩어리)로, 아래와 같이 영역이 두개로 나눠지는 하나의 가방을 상상하자.

• Header : Request가 가져야하는 기본 정보들(IP, Encoding, Browser 등..)
• Body : 빈공간

method=”get” 속성을 주고 버튼을 딱 누르면 서버에게 전달되는 request안에 header영역에 url에 정보들이 붙어서 날라간다.(default는 get 방식)
만약에 method=”post” 속성을 준다면 이 데이터들은 body 영역에 들어가서 날라간다.

네이버를 예로 들면, 검색창에 검색어를 “자바스크립트”라고 치면 위쪽 url 어딘가에 내가 검색한 “자바스크립트”가 그대로 끼어있는 것을 발견할 수 있다. 바로 get 방식으로 버튼이 동작한 것이다.
post 방식은 로그인 할 때를 예로 들 수 있는데, 아이디와 비밀번호를 치고 로그인 버튼을 누를 때 위와 같이 url에 내 아이디와 비밀번호가 그대로 노출된다면? 이것을 방지하기 위한 최소한의 보안성을 가지는 것이다.
또 다른 차이점은 바로 절대 주소값의 유무이다.
get방식은 절대주소값을 얻을 수 있기 때문에 url을 공유해도 그대로 정보들을 볼 수있다. post방식은 절대주소값을 갖지 못한다.
정리하자면 아래와 같다.

• get : 데이터를 Request 패킷 영역의 URL 속성에 담아서 전송하는 방식.
  • 소량 데이터 전송만 가능하다.
  • 절대 주소값을 얻을 수 있다.
• post : 데이터를 Request 패킷 영역의 Body 영역에 담아서 전송하는 방식.
  • 데이터를 URL에 노출시키지 않아 최소한의 보안성을 가진다.
  • 대량 데이터를 전송할 수 있다.
  • 절대 주소값을 얻을 수 없다.

3. form 태그 안에서만 적용되는 태그

① reset

reset 버튼을 누르면 자신과 같은 form 안에 작성된 내용을 모두 초기화시킨다.

<input type="reset">

② submit

submit 타입 input 태그는 언급했듯이 누르면 action 속성의 링크로 이동하는 이벤트를 내장한다.
button 태그는 기본적으로 submit 기능을 내장하고 있어서 submit 타입 input 태그와 동일하게 동작한다.

<input type="submit">
<button>버튼</button>

만약 button 태그를 submit 기능으로 동작하지 못하게 하려면 아래 둘 중 한 방법을 사용한다.

<button type="button">버튼</button>
<input type="button" value="버튼">

4. 유효성 검사 input 태그

정규표현식을 쓰지 않더라도 어느정도 잘못된 데이터를 걸러내줄 수 있는 input 태그도 존재한다.
email 타입 input 태그는 @의 앞뒤로 데이터가 입력되지 않으면 안내문을 띄워준다.
number 타입 input 태그는 숫자와 지수표현식 e를 제외한 나머지는 입력되지 않게한다.
input 태그에 pattern 속성으로 정규표현식을 줘서 데이터를 제한할 수도 있다.

<input type="email"><br>
<input type="number"><br>
<input type="text" id="phone" pattern="010-?\d{4}-?\d{4}"><br>

See the Pen js by kkongkeozzang (@kkongkeozzang) on CodePen.

그럼 편하게 왜 이렇게 안쓰고 어렵게 js에 정규표현식을 써서 쓰는 걸까?
위 태그들은 안내문의 형식과 디자인이 정해져있기 때문에, 제약이 많다.
따라서 간단한 기능을 만들어 쓸 때 정도로만 사용하는 것이다.

5. 회원가입 페이지 - 예제

마지막으로 유효성 검사를 적용한 회원가입 페이지를 만들었다.
UI 디자인은 포기했지만.. 그래도 나름 만족할만한 기능으로 구현해서 뿌듯하다.
왜 input 박스가 아래로 내려간건지 모르겠다. codepen붙여넣기 하니까 이상해졌네..
주소도 api 를 붙여넣기해서 작동하진 않지만 다른 기능이 그래도 작동은 하니까 넘어가야겠다!

See the Pen js by kkongkeozzang (@kkongkeozzang) on CodePen.