개발감성

div 두개의 영역이 외부 내부로 있고 각각에 마우스 이벤트를 달아 차이점을 비교해본다. mouseover & out 마우스 이벤트 중 over와 out은 부모와 자식의 노드를 따로 분리된 영역으로 판단한다. 이벤트 정보가 담길 info에 이벤트 횟수와 해당 이벤트가 일어난 타겟의 위치를 표시한다. 바깥의 parent영역만 들어갔다 나왔을 시 over와 out이 출력된다. 이번엔 parent영역에서 child영역까지 들어갔다가 나왔다. 3번에서 parent 에 들어갔고 여기서 child로 들어갈 때 parent out이 뜨고 child over이 뜬다. 이말인 즉 child로 들어갈 때는 parent에서 나가는 것으로 판단되는 것이며 child는 parent하위 개체임에도 불구하고 독립된 영역으로 취급받..

추가 버튼을 누르면 li태그가 추가되며 해당 내용이 output div태그에 기록되도록 해본다. li태그 추가 add 버튼을 클릭하면 newItem 객체를 생성하고 ul태그에 추가하는 이벤트를 생성했다. 사용자 정의 이벤트 정의 addItem이라는 이벤트를 생성하여 event변수에 담았다. 또한 위에서 생성한 $newItem의 정보들을 event에 담고 해당 객체를 트리거로 넘겨줬다. 트리거로 전달된 addItem이벤트는 ul태그에 prepend로 event내용을 출력한다. 추가 버튼을 누르면 li태그가 추가되면서 트리거를 통해 사용자가 정의한 addItem이벤트 또한 함께 실행된다. 사용자 정의 이벤트 정의2 data변수에 newItem의 속성을 담아 배열로 만들어 트리거로 전달할 수도 있다. 같은 효..

버튼 두개가 있고 버튼 B에 클릭했을 시 알림창을 띄우는 이벤트를 등록했다. 역시나 B를 클릭하면 버튼B의 알림창이 뜨는 이벤트가 실행된다. 이번엔 버튼 A에 이벤트를 걸어주는데 그 내용은 버튼B를 호출해 클릭에 트리거를 걸어준다. 그러자 버튼 A를 클릭했는데 버튼 B의 이벤트가 실행되는 것을 볼 수 있다. 버튼 A의 이벤트 자체가 버튼 B의 클릭 이벤트를 실행시키는 것이다. 이런 식으로 버튼 자체에 다른 태그의 이벤트를 걸어둔다면 해당 이벤트를 대신 실행시킬 수 있다. 까만 화면 속 숫자를 클릭해도, 버튼을 클릭해도 이벤트가 실행된다.

우선 이벤트의 단계중 버블링의 개념에 대해 알아야한다. 이벤트의 마지막 단계인 버블링은 타게팅 이후 document로 돌아가는 과정인데 버블링을 활용해서 이벤트를 등록하는 방법을 알아본다. stopPropagation( ) - 버블링 중단 div안에 버튼 두개를 만들고 세 개의 노드에 클릭 시 콘솔을 띄워주고 bubbles값이 true가 나오는지 확인해 버블링이 발생하는지 알아보는 이벤트를 등록한다. 버블링 처리 버튼을 누르면 btn1과 panel에서 반응이 온다. 이는 btn1에서 클릭이벤트의 타게팅이 이뤄지고 다시 돌아가는 버블과정에서 panel을 지나치기 때문이다. 이번엔 버블링 중지 버튼을 눌렀고 #btn2에 등록된 이벤트내용중 stopPropagation메소드로 인해 버블링이 중단되어 panel..

one( ) - 한번만 실행되는 이벤트 등록 on()대신 one()을 사용하면 단 한번만 실행되는 이벤트를 등록할 수 있다. 버튼을 클릭하면 알림창이 뜨고 그 뒤로는 버튼을 눌러도 아무 효과가 나타나지 않는다. preventDefault( ) - 기본 이벤트 효과를 해제 a태그는 보통 링크를 걸기 위해 자주 사용되는 태그다. 이처럼 몇몇 태그는 기본적인 효과를 가지고 있는데 이러한 효과를 해제하고 다른 이벤트로 대체할 수 있다. a태그를 클릭했을 때 알림창을 뜨게 하고 콘솔에 cancelable을 이용해 해당 이벤트객체에 기본행동이 존재하는지 확인한다. 없다면 false가 뜬다. 만약 기본행동이 있다면 preventDefault메소드를 이용해 기본행동을 지워줄 수가 있다. 원래라면 a태그를 클릭하면 해당..

선행으로 REST방식으로 데이터 전송하는 방법에 대해 [Back-end] flask로 Rest API 구현 REST (REpresentational State Transfer) Rest API는 REST기반 서비스 API 이다. HTTP는 서버/클라이언트 모델로써 서버와 컴퓨터가 서로 Response(요청)과 Request(응답)으로 통신을 한다. 여기서 통신을 할 때,.. developefeel.tistory.com url주소로 데이터를 전달하는 방법에 대해 참고한다. [Back-end] 라우팅 기법으로 데이터 전달, 주소창의 문자 화면으로 출력 선행으로 flask로 서버를 열어주는 내용이 필요하면 아래 링크로 [Back-end] Flask로 웹 서버 만들기, flask 시작하기 우선 플라스크를 사용하..

각 태그에 이벤트를 등록하고 해제해본다. 이벤트 등록 - on( ) 이벤트는 on()메소드를 이용해 등록한다. 모든 이벤트는 on을 통해 등록되고 어떤 태그에 어떤 이벤트를 등록할지 적어준다. btn아이디를 가진 버튼 태그에 click이벤트를 걸어주고 이벤트 내용을 function안에 적어준다. 버튼을 클릭했을 때 일반 이벤트 알림창이 나타난다. 두 번째처럼 단축형태로 이벤트 등록이 가능하다. on대신 이벤트 형식을 사용하는 방식인데 결국 on메소드를 통해 실행된다. 버튼을 클릭하면 두 알림창 모두 나타난다. 이벤트 다중등록 두 가지 이상의 이벤트를 한번에 걸어주는 것도 가능하다. div태그에 마우스가 들어오는 mouseenter와 마우스가 나가는 mouseleave이벤트 두개를 걸어주었다. div태그를..

DOM이란, HTML의 DOM 트리구조 DOM (Document Object Model) 말 그대로 문서 객체 모델인 DOM은 문서를 나타내기 위해 객체로 모델링한 것이다. html문서를 작성하다보면 , 등등의 태그를 볼 수 있는데, 이러한 태그들을 노드라 하고 해 developefeel.tistory.com 이벤트의 흐름을 알기 위해서 웹 문서의 DOM형식에 대해 먼저 알면 좋다. 웹 문서의 DOM트리구조에 따라 제일 상위의 document영억이 맨 바깥에 위치하고 그 아래로 body영역이 위치하며 안쪽으로 div영역들이 구성된 것을 확인 할 수 있다. eventPhase( ) - 이벤트의 진행 단계 이벤트는 총 세 단계로 이뤄지 있으며 eventPhase는 그 단계를 알려준다. eventPhase =..

태그를 정의할 때 태그에 여러 속성을 줄 수 있는데 jQuery로 이 속성을 가져와서 다루는 방법을 알아본다. attr( ) - 단일 속성 가져오기 콘솔창에 content클래스의 div태그안의 img태그의 src속성과 a태그의 href속성을 각각 가져온다. img태그의 이미지소스와 a태그의 링크소스가 각각 콘솔에 찍힌다. data( ) - 'data-' 로 시작하는 모든 속성값 가져오기 data는 태그의 속성 중 data-로 시작하는 모든 속성을 가져온다. 그 속성들 중 특정 속성인 data-name을 가져오려면 data-뒤의 이름을 지정해준다. attr로는 data-를 같이 붙여줘서 가져와야한다. data-name속성은 data('name') 아니면 attr(data-name)으로 가져올 수 있다. d..

코테를 풀면 처음에 입력값이 주어지는 경우가 대부분이다. 주어지는 입력값을 잘 가공하는 것도 문제를 푸는 과정 중 중요한 부분이다. 위 처럼 데이터가 주어졌을 때 파이썬으로 받는 기본적인 방법에 대해서 알아본다. input( ) - 입력 함수 input은 한 줄로 입력되는 모든 값을 해당 변수에 저장한다. 문장으로 입력되는 값도 a 변수에 입력되어 저장된다. 한 줄로 입력받는걸로 보아 입력값의 변수형은 문자열로 짐작이 가능하다. type( ) - 변수형 출력 함수 type 메소드는 변수형을 리턴한다. input으로 받는 모든 한줄의 입력값은 string형태로 받는다. 변수형( ) - 형변환 함수 ex) int( ), float( ), str( ) 변수형( ) 메소드는 파이썬의 형변환 함수로 위에선 int..