2018-12-14 수업 내용 정리

개발공부, 뉴딜과정

JavaScript 람다식

1
2
3
4
5
var function1=function(text){
   return text.repeat(12);
}
 
var function2=(text=>text.repeat(12));
1
var 함수명 = (매개변수) => {실행할내용};

자바스크립트 과제

문제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>할일 목록 앱</title>
    <style>
        #add-btn{
            padding: 5px 10px;
            border: 0;
            background: #f80; color: white;
            border-radius: 5px;
        }
        ul{ 
            padding: 0; 
            list-style-position: inside;
        }
        li{
            border-bottom: 1px solid #999;
            padding: 5px 0;
        }
        .active{ background: gold; } /* 목록 클릭 스타일 */
    </style>
</head>
<body>
    
    <h1 id='title'>할일 목록</h1>
    <button id="add-btn">목록 추가</button>
    <ul id='list'>
        <li>밥먹기 1</li>
        <li>잠자기 2</li>
        <li>밥먹기 3</li>
        <li>잠자기 4</li>
    </ul>
 
<script>
    //자바 스크립트를 사용하세요 
    
</script>    
 
</body>
</html>

모범답안

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script>
 
    // 변수 초기화
    var title = document.getElementById('title'); 
    var list = document.getElementById('list');
    var li = list.getElementsByTagName('li');
    var addBtn = document.getElementById('add-btn');    // 목록 추가 버튼
 
    // 이벤트리스너
    list.addEventListener('click', activeItem); 
 
    function activeItem(event){
        // 클릭한 노드가 li이면 
        if(event.target.nodeName == 'LI'){
            // event.target은 클릭한 객체를 의미
            title.innerHTML = event.target.innerText;    
 
            // 목록 스타일 초기화
            for(var i = 0; i < event.target.parentNode.children.length; i++){
                event.target.parentNode.children[i].removeAttribute('class');
            }
            // 클릭한 목록 스타일 지정
            event.target.setAttribute('class', 'active'); // 클릭한 대상            
        }    // end if
    }    // end function        
 
    // 목록 추가
    addBtn.addEventListener('click', function(){
        var txt = prompt('제목 입력');
        list.innerHTML += '<li>' + txt + '</li>';
    });
 
</script>

최초에 내가 만든 답

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>할일 목록 앱</title>
<style>
#add-btn {
	padding: 5px 10px;
	border: 0;
	background: #f80;
	color: white;
	border-radius: 5px;
}
ul {
	padding: 0;
	list-style-position: inside;
}
li {
	border-bottom: 1px solid #999;
	padding: 5px 0;
}
.active {
	background: gold;
} /* 목록 클릭 스타일 */
.addColor {
	background: #f80;
	color: white;
}
</style>
</head>
<body>
	<h1 id='title'>할일 목록</h1>
	<button id="add-btn">목록 추가</button>
	<ul id='list'>
		<li>밥먹기 1</li>
		<li>잠자기 2</li>
		<li>밥먹기 3</li>
		<li>잠자기 4</li>
	</ul>
	<script>
	
	var title = document.getElementById("title");
	var lis = document.getElementsByTagName("li");
	
	function showAlert() {
		var todo = prompt("추가할 할 일");
		if (todo != null || todo != "") {
			todoNode = document.createElement('li');
			texttodo = document.createTextNode(todo);
			todoNode.appendChild(texttodo);
			document.getElementById("list").appendChild(todoNode);
		}
	}
	
	function removeColor() {
		for (var i = 0; i < lis.length ; i++) {
			lis[i].classList.remove('addColor');
		}	
	}
	
	function change(e) {
		title.innerHTML = e.target.innerText;
		removeColor();
		e.target.classList.add('addColor');
	}
	
	var addbtn = document.getElementById("add-btn");
	addbtn.addEventListener("click", showAlert);

	
	for (var i = 0; i < lis.length ; i++) {
		lis[i].addEventListener("click", change);
	}
	
	</script>

</body>
</html>

나는 스타일 관련한 클래스를 하나 생성하고, 제이쿼리에서 제어하듯 클래스를 추가시켜서 구현했다. 그런데 이 오스는… 스크립트 단에서 새로 insert 시킨 li의 경우 이벤트 효과가 들어가지 않아 다시 짜야 한다. 코드를 짜면서 새롭게 배운 자바스크립트 문법은

그리하여 다시 짠 소스. click 이벤트를 ul에 주었다. (달라진 소스만)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script>

var title = document.getElementById("title");
var list = document.getElementById("list");

function showAlert() {
	var todo = prompt("추가할 할 일");
	if (todo != null || todo != "") {
		todoNode = document.createElement('li');
		texttodo = document.createTextNode(todo);
		todoNode.appendChild(texttodo);
		document.getElementById("list").appendChild(todoNode);
	}
}

function removeColor() {
	var lis = document.getElementsByTagName("li");
	for (var i = 0; i < lis.length ; i++) {
		lis[i].classList.remove('addColor');
	} 
}

function change(e) {
	title.innerHTML = e.target.innerText;
	removeColor();
	e.target.classList.add('addColor');
}

var addbtn = document.getElementById("add-btn");
addbtn.addEventListener("click", showAlert);

list.addEventListener("click", change);
</script>

제이쿼리

  • 함수 안에 셀렉터를 넣으면 객체화된다.

    1
    $(tr).addClass("~");

  • find()는 배열을 가질 수 있다

  • data()

    • HTML 엘리먼트 내에 데이터를 저장하고 읽는 역할을 하는 함수

    • 참고에 활용한 링크

    • 사용법

      • 데이터 저장

        1
        2
        3
        $("span").data("name", "Nextree");
        // key와 value 형태로 저장된다
        $("span").data("address", "가산");

      • 데이터 가져오기

        1
        2
        Evar name = $(&quot;span&quot;).data(&quot;name&quot;);
        var address = $(&quot;span&quot;).data(&quot;address&quot;);

      • 데이터 삭제

        1
        $(selector).removeData(key);

전송방식

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
$('#delBtn').click(function() {
            if(confirm('정말로 탈퇴하시겠습니까?')) {
                 $.ajax({
                    url:'${root}/member/users/${user.userid}',  
                    type:'DELETE',
                    contentType:'application/json;charset=utf-8',
                    dataType:'json',
                   success:function(response) {
                   console.log(response.result);
                   $(location).attr('href', '${root}/member/logout.cafe');
                            },
                   error:function(xhr,status,msg){
                  console.log("상태값 : " + status + " Http에러메시지 : "+msg);
                            }
                        });
                    }
                });
//회원탈퇴
    @RequestMapping(value="/users/{userid}", method=RequestMethod.DELETE)
    @ResponseBody
    public Map<String, String> deleteMember(@PathVariable String userid) {
        memberService.deleteMember(userid);
        Map<String, String> map = new HashMap<String, String>();
        map.put("result", "ok");
        return map;
    }
 
 
 
$.ajax({ 
        url: "${root}/member/users",  
        type: 'PUT',  
        dataType: 'json', 
        data: data,
        contentType: 'application/json;charset=UTF-8', 
        mimeType: 'application/json',
        success: function(response) {
                $('#registerModal').modal('hide');
                        $(location).attr('href', '${root}/member/view.cafe');
                    }, 
                    error:function(xhr, status, message) { 
                        alert("status : " + status + " error : " + message);
                    } 
                });
 
 
 
//회원정보수정
@RequestMapping(value="/users", method=RequestMethod.PUT, headers = { "Content-type=application/json" })
@ResponseBody
public Map<String, String> modifyMember(@RequestBody MemberDetailDto memberDetailDto) {
        memberService.modifyMember(memberDetailDto);
        Map<String, String> map = new HashMap<String, String>();
        map.put("result", "ok");
        return map;
    }

  • delete

    • url로 데이터를 전송하고, 받는 컨트롤러 단에서 메서드 타입에 delete를 명시해준다.

  • put

    • create에 사용되는 방식
    • 원하는 정보를 요청하는 게 아니라 직접 바꿀 수 있다
    • 나한테 왜이래

  • 그 외

    • @PathVariable : 외부로 value가 노출되지 않음
      delete 때 썼던 것 같다.

    • @restController : 데이터 자체를 반환해주는 것
      (문자열, json, xml 반환)

    • serialize() : 다 가지고 올 때 사용

      1
      2
      3
      4
      var param = $(this).serialize();
      // 폼에 있는 데이터 다 가지고 오기
      // 이 경우 name이 key로 가버림
      // 나중에 이 param 객체를 data에 넣어서 ajax로 쏜다!

sql

  • nvl 함수

    1
    2
    3
    SELECT ENAME, NVL(TO_CHAR(COMM),'no commission')
    --바꾸고자 하는 자료형이 맞아야 한다.
    FROM EMP

  • 그룹함수 외에 select 절 칼럼은 모두 group by 절에 넣어야 한다.

uml 의존과 연관이 잘 이해되지 않는다면

  • 의존 : 지역 변수
  • 연관 : 전역 변수