1) 학습한 내용

css 제어

• jQuery는 태그의 css를 제어할 수 있는 함수를 제공

• addClass : clss class를 설정

• removeClass : css class를 제거

• toggleClass : 지정된 클래스가 없으면 설정하고 있으면 제거

• css : css 속성을 가져오거나 설정

태그 탐색

• jQuery는 선택자를 통해 선택한 후 선택된 태그를 기준으로 다른 태그들을 탐색 할 수 있다.

• 태그 탐색은 html 문서를 탐색할 경우 사용하지만 xml 문서를 탐색하는 용도로 사용하기도 한다.

부모 태그 탐색

• parent : 선택된 태그의 부모 태그를 선택

• parents : 선택된 태그의 모든 부모 태그를 선택

• parents(선택자2) : 선택된 태그으 ㅣ모든 부모 태그 중 선택자2에 해당하는 태그들이 선택

• parentsUntil(선택자2) : 선택된 태그에서 선택자2 태그까지의 모든 부모태그들이 선택

자식 태그 탐색

• children : 선택된 태그의 자식 태그들을 선택

• children(선택자2) : 선택된 태그의 자식 태그들 중 선택자2에 해당하는 태그들이 선택

• find(선택자2) : 선택된 ㅐㅌ그의 하위 태그들 중 선택자2에 해당하는 태그들이 선택

같은 계층의 태그 선택

• siblings : 선택된 태그와 같은 계층의 모든 태그들이 선택

• siblings(선택자2) : 선택된 태그와 같은 계층의 모든 태그 중 선택자2에 해당하는 태그들이 선택

• next : 선택된 태그 다음 태그가 선택

• nextAll : 선택된 태그의 다음 태그들이 모두 선택

• nextUntil(선택자2) : 선택된 태그 다음 태그들 중 선택자2 까지의 모든 태그들이 선택

• prev : 선택된 태그 이전 태그가 선택

• prevAll : 선택된 태그 이전의 모든 태그가 선택

• prevUntil(선택자2) : 선택된 태그의 이전 태그들 중 선택자2 까지의 모든 태그들이 선택

jQuery 효과

• jQuery는 선택자로 선택된 태그르 사라지게 하거나 나타나게 할 수 있다.

hide/show

• hide : 선택된 태그를 사라지게 함

• show : 선택된 ㅐㅌ그를 나타나게 함

• toggle : 사라지거나 나타나는 상태를 전환

• hide(시간), show(시간), toggle(시간) : 지정된 시간만큼 애니메이션 효과가 나타남

• 시간은 "slow"라는 문자열을 넣어주면 적당히 느린 시간, "fast"를 넣어주면 적당히 짧은 시간이 선택됨.

fade in, fade out

• fadein : 페이드 효과를 통해 나타나게 한다.

• fadeout : 페이드 효과를 통해 사라지게 한다.

• fadeToggle : 페이드 효과를 통해 사라지거나 나타나는 상태를 전환한다.

• fadeTo : 지정된 투명도 만큼 페이드 아웃한다.

slide down/slide up

• slidUp : 위로 슬라이드 되면서 사라진다.

• slideDown : 아래로 슬라이드 되면서 나타난다.

• slideToggle : 슬라이드 효과를 통해 사라지거나 나타나는 상태를 전환한다.

callback 함수

• 앞서 살펴본 효과가 종료되면 자동으로 호출되는 함수를 등록 할 수 있다.

애니메이션

• jQuery는 개발자가 직접 애니메이션을 만들어 사용할 수 있도록 지원
• 선택된 태그에 css 값을 새롭게 설정해 주면 중간의 애니메이션을 모두 만들어 주고 태그에 변화를 줌.

애니메이션 사용

• Animate : 지정된 css 속성을 애니메이션 효과와 함께 지정

• Animate({}) : 지정된 객체의 css 속성들을 애니메이션 효과와 함께 지정

표준 웹 통신

• 웹 브라우저는 서버에게 파일을 요청

• 이 때 서버는 요청한 파일이 있으면 파일의 내용을 읽어 응답결과로 클라이언트에게 전달

• 응답 결과를 받은 웹 브라우저는 데이터를 분석하여 자신이 스스로 처리

표준 웹 통신의 문제점

• 표준 웹 통신은 클라이언트 브라우저가 서버에게 응답 결과를 받게되면 브라우저가 스스로 처리하려고 함

• 브라우저가 처리할 수 있는 데이터면 스스로 처리하고 그렇지 않으면 다운로드가 됨.

• 만약 응답 결과가 html 코드이면 html 코드를 통해 화면을 변경하고 이미지, 사운드, 동영상 등 미디어 데이터면 미디어 데이터를 처리할 수 있는 화면으로 변경되어 처리, 즉 웹 브라우저는 처리할 수 있는 데이터를 받게되면 화면이 변경

Ajax 통신

• Ajax 통신은 서버와 통신시 서버로 부터 받은 응답 결과를 웹 브라우저에게 반영하지 않고 JavaScript 로 처리할 수 있도록 고안된 통신 방식

• 이를 이용하면 서버와의 통신은 정상적으로 이루어지며 화면은 변경되지 않기 때문에 화면의 일부분만을 변경하는 등의 작업이 가능

• 오늘날 웹 애플리케이션을 개발할 때 많이 사용한느 통신 기술

• Ajax 통신은 같은 도메인으로 요청할 수 있는 파일만 요청 가능

jQuery Ajax 통신

• Ajax 통신은 브라우저의 종류나 버전에 따라 작성한느 코드가 다르다.

• 이에 jQuery는 개발자가 손쉽게 Ajax 통신을 할 수 있도록 함수를 만들어 제공

• laod : 지정된 파일을 요청하고 받은 응답 겨로가를 태그 내부에 삽입

• get : get 방식으로 ajax 통신

http://www.naver.com/index.html

• post : post 방식으로 ajax 통신

• ajax : ajax 통신을 위한 종합적인 모든 기능을 제공하는 함수

2) 학습내용 중 어려웠던 점

이번 수업을 통해 기존에 프론트 엔드 방식이나 비주얼 스튜디오 코드가 아니라 이클립스라는 Java IDE 라고 불리는 통합 개발 환경으로 작업하는 것이다. 그 중에서 html, txt, xml, JSON을 통해서 글자를 불러내는 부분이 이번 수업에서 어려웠었다.

3) 해결방법

일단, 수업에 들었던 내용을 다시 한 번 보면서 복습하고 나중에는 스스로 작성해야 한다. 말로는 몇 번이나 할 수 있지만, 나중에 제이쿼리에 관한 자료를 보았는데 제이쿼리의 위상이 낮아진 것은 리액트의 등장이란 것으로 알게 되었다.

4) 학습소감

수업이 끝나고 난 뒤에 알게 된 것이지만 제이쿼리는 리액트가 등장하기 이전에 많이 사용되어졌었다가 리액트의 등장으로 사용 빈도가 줄어든 라이브러리이다. 자바스크립트는 ES6 이전에는 흔히 쉬운 언어라고 불릴 정도로 비중이 없었으나 ES6 이후 Node.js, React로 대표되는 Javascript 기반이 입지를 다지게 되면서 제이쿼리의 입지가 줄어들게 되었다. IT 분야의 기술의 위상이 바뀌는 것은 흔히 있는 일이다. 당장, 프로그래밍 언어 순위를 묻는 곳에도 설문조사 방법의 차이를 감안해도 1,2위가 바뀌는 일이 흔하다. 프로그래머는 인생을 공부와 학습이 함께 해야 하는 직업이란 것을 잊으면 안된다. 멈추는 순간, 뒤쳐지는 것은 당연하기 때문이다.