Scenario: Ajax를 이용하여, 특정 Html 요소 불러오기 그 Html 파일내에 특정 태그 요소만 불러오고자 함


Solutions: 제일 고민됬던 부분.1. $.ajax를 써서 어떻게 <li> 태그요소만 불러올것인가?? 나는 ajax name:value를 뒤져봤는데 아무리봐도 나오지 않았다.

결국 jquery 메소드를 통해 해결 할 수 있엇다.

총 소스는 (아래)

<Main.html>

  1. <head>
  2. <meta charset="UTF-8">
  3. <title>서버의 데이터를 대상 엘리먼트에 삽입하기</title>
  4. <style>
  5. div {
  6.     width: 200px;
  7.     height: 80px;
  8.     margin: 3px;
  9.     float: left;
  10. }
  11. </style>
  12. <script
  13.     src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  14. <script>
  15.     $(document).ready(function() {
  16.         $("#menu1").click(function() {
  17.             $.ajax({
  18.                 url : "menu.html",
  19.                 success : function(result) {
  20.                     $("#message1").html(result);
  21.                 }
  22.             });
  23.         });
  24.     });
  25.     $(document).ready(function() {
  26.         $("#menu2").click(function() {
  27.             $.ajax({
  28.                 url : "menu.html",
  29.                 success : function(result) {
  30.                     var refine = $("#message2").html(result).find('li');
  31.                     console.log(result);
  32.                     console.log(refine);
  33.                     console.log(typeof(refine));
  34.                     $('#message2').html(refine);
  35.                 }
  36.             });
  37.         });
  38.     });
  39. </script>
  40. </head>
  41. <body>
  42.     <div>
  43.         <a href="#" id="menu1">메뉴 보기 1</a>
  44.         <p>
  45.             <span id="message1"></span>
  46.     </div>
  47.     <div>
  48.         <a href="#" id="menu2">메뉴 보기 2</a>
  49.         <p>
  50.             <span id="message2"></span>
  51.     </div>
  52. </body>
  53. </html>

 

<menu.html> : main 에서 불러올 html 파일

  1. <meta charset="UTF-8">
  2.  
  3. <p> 중 식 메 뉴 </p>
  4. <ul>
  5. <li> 짜장면 </li>
  6. <li> 짬뽕 </li>
  7. <li> 기스면 </li>
  8. <li> 탕수육 </li>
  9. </ul>
  10. <p> 메뉴를 골라주세요.</p>


Scenario: 체크박스를 만들어 jQuery로  선택된 체크박스 value 들을 가져오고, 결과에 밑에 띄워준다. 두번째 부터는 결과에 있는 요소들을 지워준디 다시 그려준다.



Solutions: 아래


Ps. 어려웠던점

1. jQuery 선택자와 결과밑에 check value를 띄워줄때, 맨처음엔 after로 했엇는데 아무리해도 안지워 지는것이다. 여기서 많은 고민을함.

  차라리 Text 삽입시에 append를 사용하면 그 객체들이 전부 child 가 되기때문에 지워주기가 쉬움.


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>여러 개의 취미를 체크박스에서 선택하고 결과보기-:checkbox</title>
  6. <style>
  7. div {padding: 5px 5px 5px 5px}
  8. .item { float: left;    width: 100px;}
  9. </style>
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
  11.     <script type="text/javascript">
  12.     $(function(){
  13.         $('#selectBtn').click(function(){
  14. //          console.log(('#contents'));
  15.             $('#contents').children().text(""); //모든자식 지우기(새로 선택된결과를 띄우기위해서)
  16. //          $('#contents').children('p').text(""); P인자식만 해당
  17.              $('input:checkbox').each(function() { //[name=??] 로특정 체크박스만 불러오기가능
  18.                  if(this.checked)
  19.                     $('#contents').append('<p>'+this.value);
  20.              });
  21.         });
  22.     });
  23.    
  24.     </script>
  25.    
  26.  
  27. </head>
  28. <body>
  29.     <div>
  30.     <span class="item"> 음악감상 </span> <input type="checkbox" name="hobby" value="music">
  31.     </div>
  32.     <div>
  33.         <span class="item"> 요가 </span> <input type="checkbox" name="hobby"  value="yoga">
  34.     </div>
  35.     <div>
  36.         <span class="item"> 독서 </span> <input type="checkbox" name="hobby"  value="reading">
  37.     </div>
  38.     <div>
  39.         <input type="button" id="selectBtn" value="취미 선택">
  40.     </div>
  41.     <div id="contents">결과</div>
  42. </body>
  43. </html>


Scenario: 학원에서 공부한 jQuery 기본 셀렉터 예제 정리


Solutions: 아래


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title> 객체 조작 및 생성 </title>
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> //CDN을 쓰면 궂이 JS파일 없이사용가능
  7. <style type="text/css">
  8. <script>
  9. //************* 기본 예제문제 시작
  10. $(function(){
  11. //(1) h1 태그의 align 속성값을 left적용하기
  12. $('h1').css("text-align","left");
  13. //(2): li태그중 첫번째 요소에 텍스트를 새 텍스틀 바꾸기
  14. $('li:eq(0)').text("첫번째리스트");
  15. //(3)h2태그에 자식 요소인 strong태그의 글자를 빨간색으로 적용
  16. $("h2:nth-child(2)").css("color","red");
  17. //(4)id=two인 요소의 이전 요소에 글자를 파란색으로 적용
  18. $("#two").css("color","blue");
  19. //(5)id=two인 요소의 다음에요소에 글자를 보라색으로 적용
  20. $("#two").next().css("color","purple");
  21. //(6)id=two인 요소의 부모 요소에 파선을 생성
  22. $("#two").parent().css("border","dashed");
  23. //(7)class=myList인 요소내의 가장 앞의 위치에 새요소를 추가
  24. $(".myList").prepend("<li>Front</li>");
  25. //(8)class=myList인 요소내의 마지막 위치에 새요소를 추가
  26. $(".myList").append("<li>back</li>");
  27. //(9)class=three인 요소의 이전 위치에 새요소를 생성
  28. $(".three").before("<li>앞에삽입</li>");
  29. //(10)class=three인 요소의 다음 위치에 새 요소를 생성
  30. $(".three").after("<li>뒤에삽입</li>");
  31. //(11)h2태그중에 2번째 요소를 <div>태그로 감싸기
  32. $("h2:nth-of-type(2)").wrap('<div/>');
  33. //(12)h2태그중에 하위 요소를 strong태그를 포함하는 <h2>에 class="tit"속성 추가
  34. $("h2").children("strong").parent().addClass('tit'); //** 가장애먹은부분("h2").children("strong") 에 tit를 추가하면 스트롱태그에만 tit추가하는거임.
  35. //(13)h2태그중에 마지막 요소에 class="tit"속성을 제거
  36. $("h2:last").removeClass('tit');
  37. });
  38.  
  39. //**************특정 배수 객체에 css적용시 셀렉터 사용법
  40.     $(function() {
  41.         $('h3:nth-child(3n+1)').css({'background-color':"black",'color':"white"}); //이렇게 +1을 해줘야지 0번째부터 시작됨
  42.         $('h3:nth-child(3n+1)').css({'background-color':"black",'color':"white"}); //중괄호 사용시 따옴표를 쓰지 않고
  43.                                                                       //backgroundColor:'balck' 이렇게 카멜표기법으로 표현가능
  44.     })
  45.  
  46.  
  47. //**********마이너스 선택자를 쓸경우 ; -1은 집합내 맨끝요소를 가르킴
  48. $(function() {
  49.         $('h1').css({'background-color':'orange','color':'white'}); //한줄에 이런식으로 css 여러속성 주기가능
  50.         $('h1').eq(-2).css('color',"red");  //'h1:eq(0)'처럼 쓰면 li태그 내에서만 셀렉 가능, 그러나 이런식으로하면 다 쓸수 있고
  51.                                             //인덱스가 0부터 시작.(n일경우)
  52. });
  53.  
  54.  
  55. //**********게시판 만들때 글 순서에따라 명암도 규칙있게 주기
  56. $(function() {
  57.     $('tr:nth-child(3n)').css({'background-color':"gray"}).prev().css({'background-color':"lightgray"});   
  58. })
  59.  
  60. </script>
  61. <style>
  62.    div{background-color:yellow;}
  63.    .tit{background-color:orange;}
  64. </style>
  65. </head>
  66. <body>
  67. // 생략된 객체들이 있음
  68.   <h1 align="center"><strong>내용1</strong></h1>
  69.   <h2><strong>내용2</strong></h2>
  70.   <h2>내용3</h2>
  71.   <h2 class="tit">내용4</h2>
  72.   <ul class="myList">
  73.     <li>리스트1</li>
  74.     <li id="two">리스트2</li>
  75.     <li class="three">리스트3</li>
  76.     <li>리스트4</li>
  77.   </ul>
  78.  
  79.  
  80. //********** 게시판 예제에 필요한 객체
  81.     <table>
  82.         <tr><td>신형 넥수스 10 미개봉 팝니다.</td><td>62만원</td></tr>
  83.         <tr><td>갤록시S5 전투용 싸게 처분합니다.</td><td>45만원</td></tr>
  84.         <tr><td>안드로이드 프로그래밍 정복 새 책</td><td>8만원</td></tr>
  85.         <tr><td>ASUS 젬북 UX21A full hd, i7 CPU, RAM 4G, 256 SSD</td><td>99</td></tr>
  86.         <tr><td>2.5인치 샘송 외장하드 1테라. 좋은 자료 겁나 많음</td><td>12만원</td></tr>
  87.         <tr><td>거의 신품급 DSLR. 캐농 750d 듀얼 랜즈</td><td>75만원</td></tr>
  88.         <tr><td>애뿔 아이뽕6 가개통급. 한개 60만원, 두개 130만원</td><td>60만원</td></tr>
  89.         <tr><td>경희대 앞 넓고 깔끔한 원룸. 초역세권에 신축 풀옵션</td><td>500/50</td></tr>
  90.         <tr><td>스타 2. 자유의 날개 + 군단의 심장 합쳐서 떨이합니다.</td><td>30000</td></tr>
  91.     </table>
  92. </body>
  93. </html>


Scenario: JAVA SCRIPT의 DOM 객체를 활용하여 mouse over, out에 따라 움직임는 그림을 표현하고자 하였으나, 

마우스를 올리면, H1의 텍스트나 모두 변했지만, 이상하게 그림만 변하지 않는 것이었다.  firstChild의 개념이 이해가 잘 가지 않았던 

나는, 삽질을 많이하다가, 답을 발견했다.


Solutions : 선생님 왈 "DOM객체를 이용할땐 항상 트리구조를 생각해야된다. 그러므로 띄어쓰기 없이 바로 붙여써줘야됨"


ex) 마우스 over out의 따라 동적으로 변하는 버튼 만들기. 예제 소스

HTML 5 1.10 KB
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>DOM 객체</title>
  6. </head>
  7. <body>
  8.     <h1 id="title">마우스 아웃</h1>
  9.     <a onmouseover="mOver()" onmouseout="mOut()" href="#" id="btn"><img src="https://t1.daumcdn.net/cfile/tistory/227AF044589C1B6110"alt="버튼"/></a>
  10. //항상  트리구조를 생각해야된다. 그러므로 띄어쓰기 없이 바로 붙여써줘야됨
  11.     <p id="img_src"></p>
  12.    
  13. <script>
  14.     //<![CDATA[
  15.  
  16.     var theBtn = document.getElementById("btn");
  17.     var s = document.getElementById("img_src");
  18.  
  19.     //버튼위에 mouseover 되었을때
  20.     function mOver() {
  21.         title.innerHTML = "마우스 오버";
  22.         theBtn.firstChild.src = "https://t1.daumcdn.net/cfile/tistory/247FA346589C1B311E";
  23.         s.innerHTML = theBtn.firstChild.src;
  24.     }
  25.  
  26.     function mOut() {
  27.         title.innerHTML = "마우스 아웃";
  28.         theBtn.firstChild.src = "https://t1.daumcdn.net/cfile/tistory/227AF044589C1B6110";
  29.         s.innerHTML = theBtn.firstChild.src;
  30.  
  31.     }
  32.  
  33.     //버튼위에 mouseout 되었을때(default상태), 추가적으로 버튼주소 추가하여 출력하기
  34.  
  35.     //]]>
  36. </script>
  37. </body>
  38. </html>

ps.실행 결과 (링크로 들어가서 run을 눌러주면 됩니다.)



Javascript Array 의 유용한 메소드들

http://jhjang.egloos.com/2369285

Java 의 Vector 클래스는 내부적으로 배열을 사용하고 있다. 따라서 Vector 의 자바스크립트 버전을 만들기 위해서는 Array 객체에 대한 빵빵한 지식이 필요하다 (없어도 된다. 그러나 있으면 매우 좋다). 자! 배열의 기초와 유용한 메쏘드들을 살펴보자.
배열의 생성

1. 생성자를 이용한 생성

- new Array(arrayLength)

ex) friends = new Array(3); // 크기가 3 인 배열 생성

- new Array(element0, element1, ... , elementN)

ex) friends = new Array("개똥이", "소똥이", "말똥이"); // 크기 3인 배열 생성(값이 채워짐)

2. 직접 생성

friends = ["개똥이", "소똥이", "말똥이"];

간접적인 배열 길이의 증가

배열의 길이는 현재 배열의 길이보다 큰 인덱스를 사용하면 자동으로 증가한다. 아래는 배열의 길이가 0 인 객체 생성 후 99번째 요소에 값을 할당하여 배열의 길이가 100 으로 증가한 예이다.

friends = new Array();

friends[99] = "새똥이";

메쏘드 종류

concat : 두개의 배열을 합쳐 새로운 배열을 리턴한다. 원본 배열은 변하지 않는다.

문법

arrayName.concat(arrayName2, arrayName3, ... , arrayNameN)

인자

arrayName2, ... , arrayNameN - 합쳐질 인자들

예제

두 배열을 합치는 예

alpha = new Array("a", "b", "c");

numeric = new Array(1, 2, 3);

alphaNumeric = alpha.concat(numeric); // ["a", "b", "c", 1, 2, 3] 배열 생성

join : 모든 요소가 구분자로 이어진 문자열을 리턴한다. 디폴트 구분자는 comma(,) 이다.

문법

arrayName.join(separator)

인자

separator 요소와 요소 사이에 사용될 구분자 문자열

예제

friends = new Array("소똥이", "개똥이", "말똥이");

strFriends1 = friends.join(); // 소똥이,개똥이,말똥이

strFriends2 = friends.join(", "); // 소똥이, 개똥이, 말똥이

strFriends3 = friends.join(" + "); // 소똥이 + 개똥이 + 말똥이

pop : 배열의 마지막 요소를 삭제한 후 그 값을 리턴하고 배열의 크기를 줄인다.

문법

arrayName.pop()

인자

없음

예제

// 말똥이가 pop 되고 배열에는 "개똥이", "소똥이"만 남는다.

// 배열크기도 2로 줄어든다.

friends = ["개똥이", "소똥이", "말똥이"];

popped = friends.pop(); // popped 에 말똥이가 할당된다.

push : 배열에 하나 또는 여러개의 값을 넣고 새로운 배열의 길이를 리턴한다.(배열길이 증가)

문법

arrayName.push(element1, element2, ... , elementN)

인자

element1, element2, ... , elementN - 추가될 요소들

예제

friends = ["개똥이", "소똥이"];

pushed = friends.push("말똥이", "새똥이"); // ["개똥이", "소똥이", "말똥이", "새똥이"]

alert(pushed); // 4

reverse : 배열 요소를 역순으로 재배치한다(첫번째 요소는 마지막으로, 마지막 요소는 처음으로).

문법

arrayName.reverse()

인자

없음

예제

myArray = new Array("1", "2", "3");

myArray.reverse(); // ["3", "2", "1"]

shift : 첫번째 요소를 삭제하고 배열의 길이를 하나 줄인 후, 삭제된 요소를 리턴한다.

문법

arrayName.shift()

인자

없음

예제

friends = ["개똥이", "소똥이", "말똥이"];

shifted = friends.shift(); // ["소똥이", "말똥이"]

alert("삭제된 요소는 " + shifted + " 입니다."); // 개똥이

slice : 얇게 썬 슬라이스 치즈가 생각난다(^^). 배열의 일부를 잘라내어 새로운 배열을 리턴한다.

문법

arrayName.slice(begin[,end]) : [] 은 선택사항임

인자

begin - 0보다 큰 시작 인덱스 (필수)

end - 0보다 큰 끝 인덱스 (선택). 지정되지 않으면 배열의 끝까지 복사된다.

예제

numbers = ["0", "1", "2", "3", "4"];

sliced1 = numbers.slice(2, 3); // ["2"]

sliced2 = numbers.slice(2); // ["2", "3", "4"]

sort : 배열의 요소를 정렬한다.

문법

arrayName.sort([compareFunction])

인자

compareFunction - 정렬방법을 지정한 함수.

생략시에는 요소들의 toString() 값을 사전순서(Dictionary order) 대로 정렬한다.

compareFunction(a, b) 에서

1) a > b : 0 보다 큰 값 리턴

2) a = b : 0 리턴

3) a < b : 0 보다 작은 값 리턴

예제

// 역행 정렬

function descComparator(a, b) {

return b - a;

}

// 순행 정렬

function ascComparator(a, b) {

return a - b;

}

numbers = ["0", "1", "2", "3", "4"];

numbers.sort(); // ["1", "2", "3", "4", "5"]

numbers.sort(ascComparator); // ["1", "2", "3", "4", "5"]

numbers.sort(descComparator); // ["4", "3", "2", "1", "0"]

splice : 이전 배열요소를 삭제하고 새로운 내용물을 추가하는 형태로 배열 내용을 변경한다. 삭제된 요소들은 리턴된다. Vector 와 유사한 기능을 하므로 숙지하자.

문법

arrayName.splice(index, howMany, [element1][, ..., elementN])

인자

index - 변경하고자 하는 요소의 시작 인덱스

howMany - 삭제하고자 하는 이전 배열요소 갯수.

element,...,elementN - 추가하고자 하는 배열 요소들

예제

// numbers[2]부터 2개("2", "3")를 삭제하고 그 자리에 "5"와 "6" 을 삽입한다.

numbers = ["0", "1", "2", "3", "4"];

spliced = numbers.splice(2, 2, "5", "6"); // ["0", "1", "5""6", "4"]

alert(spliced); // "2", "3"

unshift : 하나 또는 여러개의 요소를 배열의 왼쪽에 추가한다. 배열길이는 증가한다.

문법

arrayName.unshift(element1,..., elementN)

인자

element1,...,elementN - 배열의 앞쪽에 들어갈 요소들

예제

numbers = ["0", "1", "2"];

numbers.unshift("-2", "-1"); // ["-2", "-1", "0", "1", "2"]

*by 라셍, 문제시 삭제하겠습니다.

Scenario: JavaScript 학습도중, 계산기를 만들어보고자함


Solution: 하다보니 가장 막혔던 부분은, form태그의 name 속성 이었다. 원래는 action이나 id 속성만 줘봤는데,

 폼 테그에 text를 접근하려면 Form에 Name을 부여해서 접근할 수 있어야됨.




Ex: 완성 예시(링크 접근후 Runs 클릭)

http://www.w3schools.com/code/tryit.asp?filename=FCHYBFKWWWPO



  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Calculation</title>
  6. <style>
  7. legend {
  8. }
  9. p{
  10.     height: 20px;
  11. }
  12. fieldset{
  13.     width: 150px;
  14. }
  15.  
  16. #calc {
  17. }
  18.  
  19. #calc input[type=button] {
  20.     border: thin 1px ;
  21.     width: 25px;
  22.     text-align: center;
  23.     border-color:  #1ad1ff;
  24. }
  25.  
  26. #win {
  27.     width: 145px;
  28.     background-color: #b3f0ff;
  29.     border: none;
  30. }
  31. </style>
  32. <script>
  33. function cal(num){
  34.     myform.win.value += num;
  35.     console.log(num);
  36. }  
  37.  
  38. function answer(){
  39.     try{
  40.         myform.win.value = eval(document.myform.win.value);
  41.     }catch(e){alert('잘못된 연산오류 ㅋ')}
  42. }
  43.  
  44. function clearcal(){
  45.     myform.win.value = "";
  46. }
  47.  
  48. </script>
  49. </head>
  50. <body>
  51. <!--    맨처음에 폼테그는 무조건 action만 써봐서 착각함, 이곳에 네임속성을써줘야 자바스크립트에서 텍스트뷰에 값입력해줌 -->
  52.     <form name="myform" id="calc">
  53.         <fieldset >
  54.             <p><input type="text" id="win"> </p>
  55.            
  56.             <p>
  57.             <input type="button" value="1" onclick="cal('1')">
  58.             <input type="button" value="2" onclick="cal('2')">
  59.             <input type="button" value="3" onclick="cal('3')">
  60.             <input type="button" value="4" onclick="cal('4')">
  61.             <input type="button" value="5" onclick="cal('5')">
  62.             </p>
  63.             <p>
  64.             <input type="button" value="6" onclick="cal('6')">
  65.             <input type="button" value="7" onclick="cal('7')">
  66.             <input type="button" value="8" onclick="cal('8')">
  67.             <input type="button" value="9" onclick="cal('9')">
  68.             <input type="button" value="0" onclick="cal('10')">
  69.             </p>
  70.             <p>
  71.             <input type="button" value="/" onclick="cal('/')">
  72.             <input type="button" value="*" onclick="cal('*')">
  73.             <input type="button" value="-" onclick="cal('-')">
  74.             <input type="button" value="+" onclick="cal('+')">
  75.             <input type="button" value="=" onclick="answer()">
  76.             </p>
  77.             <p>
  78.             <input type="button" value="C" onclick="clearcal()">
  79.             </p>
  80.         </fieldset>
  81.     </form>
  82. </body>
  83. </html>




Scenario: 아래와 같은코드에서 버튼까지 바르게 뜨나, 버튼을 누르면 자바스크립트 함수가 실행이 안됨. 삽질좀 하다가 폼을 빼버리니까 또 잘됨.

Solutions: 폼태그안에서 input 태그의 ip와 자바스크립트이 함수명이 같을 경우 오동작 하는 것이었음. 인풋태그 ip와 함수명은 다르게 만들것.

<샘플 소스코드 예시>

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <script type="text/javascript">
  7.     function btn_alert() {
  8.         alert("알람창!!");
  9.     }
  10.    
  11.     function btn_confirm() {
  12.         var check = confirm("확인/취소 버튼");
  13.         if(check)
  14.             alert("확인버튼 클릭");
  15.         else
  16.             alert("취소 버튼 클릭");
  17.     }
  18.  
  19.     function btn_prompt() {
  20.         var name = prompt("이름은?","Park");
  21.         if(name)
  22.             alert("이름은 "+name+" 입니다.")
  23.         else
  24.             alert("질문창 취소")
  25.     }
  26. </script>
  27. </head>
  28. <body>
  29.  
  30.     <form name='aa' id='b' method="post" action="cs">  
  31.         <input type="button"  value="버튼" onclick="javascript:alert('버튼클릭~')" name="btn_alert" ><br/>
  32.         <input type="button" value="알림창" onclick="btn_alert();" name="btn_confirm"  /><br/>
  33.         <input type="button"  value="확인창" onclick="btn_confirm();" name="btn_confirm"/><br/>
  34.         <input type="button" value="플롬프트창" onclick="btn_prompt();" name="btn_prompt"  /><br/>
  35.     </form>  
  36.    
  37.  
  38. </body>
  39. </html>




ps.예전에 오픈 Canlendar.js 소스를 사용한 적이 있엇는데, 마우스를 아무리 textedit 에 클릭해도 캘린더가 안뜬 적이 있었다. 화가 나서 결국 안썼었는데, 아마 비슷한 문제였지 않았나 싶다. 



미분과 적분, 줄여서 미적분...

미적분이 중요하다고는 하지만 과연 얼마나 많은 이들이 미분 적분의 의미를 제대로 이해하면서 사용하고 있을지 모르겠다.


이 글은 미분 적분에 대한 가장 기본적인 개념에 대한 내용이다. 하지만, 이 글의 내용만 잘 이해하고 알고 있어도 미분 적분은 더 이상 암호학이 아니게 될 것이라 생각한다. 무슨 미분 적분에 대한 문제 풀이법을 설명하려는 게 아니다. 그런 건 차후의 문제이다. 미분 적분이 무엇인지 이해해 보자는 것이고 최소한 이 정도는 알고 문제를 풀자는 것이다.


1. 적분의 이해


적분하면 아마도 다음과 같은 식이 떠오를 것이다.



그럼 이게 무슨 뜻인지 하나 하나 해부해 보도록 하자. 이게 무슨 뜻인지만 다 알아도 사실 적분을 거의 이해한 것이나 마찬가지다.


그 뜻은, "x를 a부터 b까지 변화시키면서 f(x)에 dx를 곱한 것을 전부 합쳐라"라는 의미이다. 결국 다음과 같은 의미이다 (수학적으로 완벽한 수식은 아니다. 단지 개념을 이해하기 위한 것이다).



먼저, 적분기호 는 인티그랄(integral)이라고 읽는데, 잘 보면 영어의 s자를 땡겨 놓은 거랑 비슷하다. 왠지 sum이 떠오르지 않는가? 그렇다. 바로, sum(합치다)의 s를 길게 늘어뜨린 게 적분기호 이다. 참고로, integral의 영어적 의미도 '합치다' 이다.


다음, f(x)dx가 남았는데, f(x)에다가 dx를 곱하라는 말이다. 먼저, f(x)가 의미하는 것을 함수 그래프를 통해 살펴보자


함수값 f(x)는 y = f(x) 그래프에서 x가 x일때의 y값, 즉, 위 그림에서 빨간색 선의 높이(길이)이다.


마지막, dx는 미분에서 나오는 dx랑 같은 말인데, x의 순간적인 변화량이다. dx와 관계된 표현으로 △x ('델타엑스'라고 읽는다)가 있는데 △x는 어떤 구간에서의 x의 변화량을 나타낸다.  만일, x가 x1에서 x2로 값이 변했다면 △x = x2 - x1이다. dx는 △x를 무한히 작은 값으로 보낸 극한에서의 개념이다. 예를 들어, 어떤 직사각형이 있고 이 직사각형의 밑변의 길이가 △x라 하자. 이제 이 직사각형을 세로방향으로 잘라서 둘로 나누자. 그럼 밑변의 길이가 △x/2가 된다. 그런데 이 사각형을 무한히 계속 나눈다면 하나의 기다란 선처럼 될 것이고, 이 선의 밑변의 길이는 0은 아니지만 0에 무한히 가까운 값이 될 것이다. 상상속에서만 존재하는 이 선의 밑변의 길이가 바로 dx이다 (편의상 dx를 길이라고 했지만 dx는 +, - 부호를 갖는 값이다. x가 증가하면 +, 감소하면 -이다. dx의 정확한 표현은 x의 순간변화량이다).


그렇다면, f(x)dx가 의미하는 것은 빨간색 선의 넓이(면적)라는 것이다 (f(x)가 높이, dx가 밑변).


그럼, 이제 다시 원래 적분 식으로 돌아가서 아래 식과 그림을 찬찬히 감상해 보자.





x를 a부터 b까지 변화시키면서 f(x)에다가 dx를 곱해서 합친다...


정적분 식을 보면서 자연스럽게 함수의 면적(그래프 아랫부분 넓이)이 연상된다면 성공이다^^

(만일 그래도 잘 모르겠다면 수학책에서 구분구적법 설명하는 부분을 찬찬히 읽어본 다음에 이 글을 다시 한번 읽어보기 바란다)



혹자는 이런거 굳이 알아서 머하냐 할 수도 있겠다. 천만의 말씀이다. 적분 계산하는 공식만 열심히 외워서 적분 계산만 잘하면 뭐할 것인가? 무슨 뜻인지도 모르고 어디에 써먹는지도 모른다면 말이다.


예를 들어, 위 그림에 나오는 함수 그래프(a부터 b까지 부분)를 x축을 중심으로 회전시켰을 때 나오는 입체도형의 부피를 구하라는 문제가 있다고 하자.




적분의 개념이 잘 잡혀 있다면 위 회전체의 부피를 다음과 같이 계산할 수 있음을 알 수 있을 것이다.



좀 전에는 빨간색 막대 선들을 합치면 되었지만, 이제는 빨간색 원판들을 합치면 원하는 회전체의 부피가 나온다. 이제는 f(x)가 반지름이 되기 때문에 빨간색 원의 넓이는 πf(x)2이고, 여기에 dx를 곱하면 아주 얇은 원판(원기둥)의 부피가 나온다. 이것들을 a에서 b까지 모두 합하면 회전체의 부피 V가 나오는 것이다.


참고로, 고교수학에 보면 무한급수를 정적분으로 고치는 단원이 있는데(적어도 내가 학교 다닐땐 있었다), 겉보기는 무척 복잡하지만 적분의 개념을 이해하고 찬찬히 보면 당연한 얘기임을 알 수 있다.



2. 미분의 이해


적분의 반대말이 미분이다. 적분이 쌓는 거라면 미분은 미세하게 쪼개는 거다. 등등 미분에 대한 여러 가지 말들이 있지만 미분의 가장 정확한 표현은 순간변화율이다 (아마도 순간변화율을 구하는 방법이 나누기라서 미분이라고 부르는 것 같다).


그렇다면 순간변화율이 무엇인지만 이해하면 미분도 꿰뚫을 수 있다는 말이 된다.


우선, 변화율이 무엇인지 살펴보자. 변화율을 이해하기 위해서는 먼저 변화율이라는 말이 상대적인 개념이라는 것을 알아야 한다. 예를 들어, 'f의 변화율이 3이다'라는 말은 온전한 표현은 아니다.


왜?


무엇에 대한 변화율인지가 빠졌기 때문이다. 예를 들어, 우리가 알고 있는 속도(력)는 시간에 대한 위치변화(이동거리)의 변화율이고, 중학교 때 배우는 직선의 기울기는 x값에 대한 y값의 변화율이다.

즉, 변화율을 말하려면 변화율의 기준이 되는 놈이 있어야 한다는 말이고 이 기준이 뭐냐에 따라서 변화율 값이 의미하는 바가 완전히 달라진다 (속도에도 초속, 분속, 시속이 있음을 상기하자).


이 시점에서, '어라, 미분은 x로 나누는 것 아닌가?' 하는 님도 있을 것이다. 대답은 NO. 우리가 고등학교에서 배우는 대부분의 미분이 x에 대한 y의 변화율이기 때문에 dy/dx를 그냥 y'으로 쓰고는 암묵적으로 'x에 대한 미분이다'라고 하는 것이지, 미분 자체는 어떤 것도 대상으로 할 수 있다. 예를 들어, 얼굴에 느는 주름살의 개수를 나이로 미분하면 노화 진행율이 나온다.


아래 식이 미분을 설명하는 가장 근본적인 식이다. 꼭 암기(?)하자!!!



그럼 이제 고교 수학으로 돌아가서 도형의 변화율을 살펴 보자.




먼저, 왼쪽 그림은 기울기가 2인 직선이다. 기울기가 2라는 말은 dy/dx = 2라는 말로서, y 변화량이 x 변화량의 2배라는 말이다. 즉, x가 1 증가하면 y는 2 증가하고, x가 5 증가할 때 y는 10 증가한다는 말이다.


그런데, 오른쪽 곡선 y = f(x)의 경우는 변화율이 어떻게 될까? 직선처럼 변화율이 항상 일정한 것이 아니라 곡선의 경우는 변화율 자체가 계속 변화한다. 순간 순간의 변화율은 계속 변하지만, 어떤 구간에서의 평균적인 변화율은 정의할 수 있다. 여기서 평균변화율 개념이 나온다. 함수 f(x)의 구간 [a, b]에서의 평균변화율은 다음과 같이 주어진다.



△x는 구간에서의 x의 변화량을 나타낼 때 쓰는 표현으로 적분파트에서 이미 설명하였다. 그냥 우리가 보고 느끼고 수치화할 수 있는 x의 변화량은 △x로 표현하고, 상상속의 극한에서의 순간적인 변화량은 dx로 표현한다고 생각하자. 위 평균변화율 예에서, x는 a에서 b로 변했으므로 x의 변화량 △x는 △x = b - a이다.


이제 미분의 원래 정의인 순간변화율에 대해 얘기할 시점이 되었다.


우리는 위 곡선 예에서 구간의 평균변화율이 아닌 모든 x 점에서의 순간변화율을 구하는 것이 목적이다. 즉, x = a일때의 변화율, x = b일때의 변화율, ... 등과 같이 한 점 한 점에서의 변화율을 구하고 싶은 것이다. 곡선상의 어떤 한 점 부분을 무한히 확대한다고 해 보자. 어떤 곡선도 무한히 확대하다 보면 부분적으로는 직선이 된다. 이 직선의 기울기가 바로 해당 점에서의 순간변화율이다.



위 곡선 예에서 x = a에서의 순간변화율 f'(a)는 다음과 같이 구할 수 있다.



그런데, x = a 한점에서가 아니라 모든 점에서의 순간변화율을 구하고 싶으면 어떻게 하는가?


그냥 x를 특정 값으로 국한시키지 않고 x 자체에 대해 일반적으로 순간변화율을 구하면 된다 (사실 이러한 대수적 개념이 처음에는 쉽지 않지만 수학에서 꼭 익숙해져야할 부분이다. x에 대해 순간변화율을 구한다는 것은 비록 x가 어떤 값이 될 수도 있지만 지금은 하나의 대표값으로서 x라는 값 하나에 대해 순간변화율을 구한다는 말이다).



이상으로 미분에 대한 기본적인 개념은 설명은 다 했다.


참고로, 미분의 표현식인 dy/dx는 분수이고 나누기이다. 즉, dy를 dx로 나눈 값이다. 다만, y가 x에 종속되어 변하기 때문에 dy에는 dx에 대응되는 y 변화량이 올 뿐이다. 또한, y를 x로 미분하면 dy/dx지만 반대로 x를 y로 미분하면 dx/dy이다. 이 때, dy/dx와 dx/dy는 서로 역수관계가 성립한다. 예를 들어, 어떤 도형이 (1, 3)을 지난다고 하자. 만일 (1, 3)에서 y' = dy/dx = 2라면, (1, 3)에서 x' = dx/dy = 1/2이 된다. 다만, 주의할 것은 y' = 2라는 것은 x = 1일때 변화율이지만, x' = 1/2라는 것은 y = 3일때 변화율이다. 결국 한 점에서의 변화율이지만 보는 관점이 다를 뿐이다.


고교수학에서는 합성함수의 미분이라는 것을 배운다.

y = 2x를 x로 미분하면 dy/dx = 2이다. 이 말은 x가 1 증가하면 y는 2배로 2 증가한다는 말이다.

그렇다면 y = 2x를 2x로 미분하면 어떻게 될까? 답은 dy/d(2x) = 1이다. 즉, y와 2x의 변화속도가 같다는 말이다.

적분에 치환적분이 있듯이 미분에서도 2x를 하나의 새로운 변수 t로 놓고 생각해 보자. 그러면 y = t, t = 2x이므로 dt/dx = 2이고, dy/dt = 1이다. 즉, t의 변화량은 x의 2배이고 y의 변화량은 t와 같다는 말이다. 그렇다면 결국 y의 변화량은 x의 변화량의 2배라는 말이 된다.



즉, 처음부터 y를 x로 직접 미분하는 것 보다는 중간에 다리를 두어서 단계적으로 미분을 구하는 것이 합성함수 미분법이다. 예를 들어, y = (2x + 1)4인 경우 dy/dx = 4(2x + 1)3*2 = 8(2x + 1)3이 된다. 한 가지 유념해야 할 사실은 위 합성함수 미분법 식에서, dt/dx의 dt는 dx에 종속된 값이고 이 dt에 종속되어 dy/dt에서의 dy가 결정된다는 점이다.



3. 미분과 적분


미분은 쌀가루요 적분은 분노를 쌓는다라는 말이 있다. 이것도 일견 맞는 말이지만 미분 적분 관계에 대해 수학적으로 좀더 살펴보자.


적분에는 정적분과 부정적분이 있는데 미분과 반대말 관계에 있는 건 정확히 말하면 부정적분이다. 부정적분의 정의가 '미분해서 f(x)가 되는 함수를 f(x)의 부정적분이라 정의한다'이다. 예를 들어, f(x) = 2의 부정적분은 F(x) = 2x + C이다 (C는 임의의 상수). 그러니, 미분과 부정적분은 완전히 서로 반대말 관계이다.


반면에 정적분은 미분과는 직접적인 관계는 없으며, 구분구적법과 관계된 말이다. 앞서 1. 적분의 이해에서 설명한 바와 같이, 정적분은 어떤 정해진 구간에서 함수값을 미세하게 나누어 합친 값으로 적분(積分)의 한자 의미에 보다 가까운 말이다. 부정적분이 하나의 함수인 반면에 정적분은 어떤 수치 또는 값임에 주의하자.


정적분과 부정적분은 계산상의 연관 관계를 갖는다. 정적분 값을 곧이 곧대로 정의대로 구하지 않고 손쉽게 구하는 한 방법은 먼저 부정적분을 구한 후에 부정적분의 차를 이용해서 정적분 값을 계산하는 것이다. 즉, f(x)의 한 부정적분을 F(x)라 할 때,

와 같이 정적분 값을 부정적분을 이용해서 손쉽게 계산할 수 있다. 이 관계식은 미적분학에 있어서 가장 기본적인 정리 (fundamental theorem) 중 하나이다.


정리해 보면, '미분과 부정적분은 서로 반대말 관계에 있다. 정적분은 미분이나 부정적분과는 별개의 개념으로서 구분구적법, 면적, 부피 등에 관계된 개념이다. 정적분을 계산하는데 부정적분이 활용된다'이다. 참고로, 정적분의 수학적 정의는 구분구적법의 극한값이다.



☞ 이상으로 미분 적분의 개념에 대한 나름의 설명을 해 보았습니다. 제가 학교 다닌 지가 하도 옛날 일이라 요즘에는 교과서에 이런 내용들이 다 있을지도 모르겠네요. 요즘같이 바쁜 시대에 이 긴 글을 읽을 사람들이 많지는 않겠지만 조금이라도 도움이 되었길 바랍니다. 글의 재미를 위해 가끔 과격한 표현도 썼습니다 :) => 요즘 교과서에 다 나와있는 내용이라는군요.. OTL ^^;


☞ 긴 글을 읽으신 분들을 위한 팁입니다 ^^. 미분, 적분을 포함한 왠만한 거의 모든 수학 공식들은 여기에 다 정리되어 있습니다. => http://www.tug.org/texshowcase/cheat.pdf


☞ 가끔 영어 표현 때문에 들어오는 분들이 있어서 적어봅니다. 미분(differential), 미분학(differential calculus), 미분하는것(differentiation), 미분한결과(derivative), 변화율식{f(a+h)-f(a)}/h(difference quotient), 순간변화율(instantaneous rate of change), 평균변화율(average rate of change), 적분(integral), 적분학(integral calculus), 부정적분/결과(indefinite integral 또는 antiderivative), 정적분/결과(definite integral), 적분하는것(integration)


☞ 제 글은 미분, 적분에 대한 나름의 해석, 이해를 적은 글이기 때문에 일부 수학적 정의와는 차이가 있을 수 있습니다. 아래의 2014/08/20일자 댓글 내용을 참고하시기 바랍니다.


by 다크 프로그래머


http://darkpgmr.tistory.com/45



scenario: 오픈소스를 분석하다가 erwin으로 DB에 테이블 생성을 했는데 삑사리가 나서 테이블이 꼬여버렸다. , 그래서 사용자내 모든 DB를 삭제하고 다시 만들고자 하였음.


solutions:(아래)


begin

for c in(select table_name from user_tables)loop

execute immediate('drop table '||c.table_name||' cascade constraints');

end loop;

end;

purge recyclebin;


select table_name from user_tables;


ps. 계정아이디 같은거 안넣어줘도 된다. 처음에 소스를 분석해보는데 (PL/SQL을 잘모름) 왜 계정이름 넣는 칸이없지?? 하고 고민함.


('drop table '||c.table_name||' cascade constraints'); 이 구문에서 띄어쓰기 조심할것, 오타율 심하면 그냥 복붙해서 사용할 것.


안녕하세요 블로거를 읽고 계시는 많은분들 ( 많은분들이 읽어주셨으면 참 좋겠습니다.)


최근 치킨값도 비싸서 치킨도 못먹고,,, 돈도없어서 배달음식도 잘 못먹고 있는데요.


배달의 민족어플이 쿠폰이 많기로 유명하죠?? 근데 최근에 또 쿠폰을 뿌리는 이벤트를 하고 있네여,,,


일명 배민 지니어스라고 해서 알쏭달쏭한 문제를 풀면 쿠폰을 주는 것 입니다.


아무튼 오늘 또 난해한 문제가 나왓는데요.


아무튼 지금부터


2017-01-09 최신일자 배민지니어스 답입니다.


아 처음에 이 문제를보고 많이 당황했는데요. 친구한테 물어봣더니 친구도 찾고있다고 하더라구요.


정답을 알고보니 배달의민족콜센터 라고 하더라구요.. 정말 진지하고 심각하게 고민한 제가 한심스럽습니다.


저는 맨처음에 배달의 민족 콜센터번호가 1644로 시작하는데 무슨상관있지?? 라고 생각해봤는데


그냥 친구가 배달의민족콜센터 라고 쓰라고 화내더군요 ;;;


배달의 민족을 이용해본적은 없지만 오늘 이 쿠폰으로 한번 이용해 봐야겠습니다. ㅎㅎㅎ


많은 이 글을 보는 분들도 어서 등록하셔서 1000분안에 드시길 빌겠습니다.


현재 시각이 4:40인데 아직 끝났는지 아닌지는 잘 모르겠지만 . 어여어여 등록하세요




배민 지니어스

문제: 다음 답을 완성하시오


1,619 = ㅁ


답은 


"배달의민족콜센터" 입니다.


많이많이 이용하세여



PS 아아 친절하게 팁도 써있는데요


1. 쿠폰함>쿠폰 등록하기를 눌러서 쿠폰을 등록하셔요


2.정답을 입력하면 쿠폰함에 쿠폰이 들어온다네여,, 만약 오답을 입력할경우 등록할 수 없다네요


3.가장 중요합니다! 쿠폰을 등록했다고해서, 쿠폰을 쓰지 않으면 안됩니다!! 선착순으로 사라지니까 빨리 남이쓰기전에 어서 시켜드세요




+ Recent posts