공부하는블로그

useState에 대한 정리가 아닌 어떻게 사용했었는지에 대해 정리.

프로젝트를 진행하면서 useState를 통해 한개의 데이터만을 관리하기도 했지만 여러개의 데이터가 들어가있는 객체 또는 배열을 관리해야 했다.

예를들어 페이징 기능을 수행하기 위해 pageNum을 관리한다고 하면 간단하게 setPageNum(2) 이런 식으로 처리하고 관리하기 쉬웠으나 객체 또는 배열을 관리하는건 다르게 처리해야 했기에 정리.

//pageNum. 단일 데이터 초기값을 1로 설정
const [pageNum, setPageNum] = useState(1);

//게시글 input 값 관리
//title, content를 담고 있는 객체 구조. 초기값은 둘다 '' 로 설정
const [values, setValues] = useState({
    title: '',
    content: '',
});

//게시글 리스트 값 관리
//페이지 접근 시 리스트를 담아 처리.
//기본값으로 [] 빈 배열로 설정.
const [boardData, setBoardData] = usetState([]);


//단일 데이터 set
setPageNum(2);

//객체 데이터 set
setValues({
    title: 'setTitle',
    content: 'setContent',
});

//객체 데이터 중 하나의 데이터만 set
setValues({
    ...values,
    title: 'setTitle2',
});

//위 하나의 객체 데이터를 수정하는 set 활용
//onChange가 발생할 때 state를 set
setValues({
    ...values,
    [e.target.name]: e.target.value,
});

//리스트 데이터 set
setBoardData(response.data.content);

//배열 데이터 set
const boardArray = [];
boardArray.push({data: data1, ...});
boardArray.push({data: data2, ...});
//...
setBoardData(boardArray);

//boardData에 객체를 추가하는 경우
const boardArray = [...boardData];
boardArray.push({data: data10, ...});
//...
setBoardData(boardArray);

프로젝트를 진행하면서 useState는 이렇게 사용했다.

가장 간단한 단일 데이터는 React를 학습하면서 배운 useState 사용법 그대로 사용.

객체까지도 학습한 내용만으로 해결이 가능했다.

객체의 경우 단순하게 모든 데이터를 직접 작성해 set을 해주는 방법이 있고, 그 객체 안에서 하나의 값만 수정하고자 한다면 다르게 처리해야 했다.

위 코드처럼 title, content 중 title 하나만 값을 변경하고자 한다면 content의 값은 유지되어야 한다.

이때 사용할 수 있는 방법이 전개 연산자(Spread Operator)를 사용하는 것이다.

전개연산자는 ES6 문법으로 배열 또는 객체를 넘기는 용도로 사용된다.

...values의 의미는 기존에 values에 담겨있는 값을 그대로 담아준다고 볼 수 있다.

그럼 위 코드에서 ...values를 통해 title: 'setTitle1', content: 'setContent1'이 담기게 될 것이고 그 이후 title을 setTitle2로 바꾸게 되면서 set 되는 데이터는 title: 'setTitle2', content: 'setContent2' 가 된다.

이걸 input에서 onChange 핸들링으로 처리하도록 하는 것으로 입력이 끝난 후 submit이 발생했을 때 values값을 확인하는 것으로 input 들의 값을 알아낼 수 있다.

...values로 다른 input 데이터는 다시 담아 유지할 수 있도록 하고 e.target.name 과 e.target.value로 input에 작성해둔 name값, 작성한 value 값을 가져와 set 해주게 된다.

그럼 입력창의 value를 좀 더 수월하게 관리할 수 있게 된다.

그리고 마지막 배열.

axios 요청에 대한 응답으로 리스트 데이터를 받는 경우 간단하게 res.data를 set 해주는 것으로 배열형태로 담을 수 있다.

문제는 배열을 직접 제어해야 하는 경우다.

배열을 직접 제어하는 것이 가장 처음 렌더링 될때만 수행하게 되는 경우도 있지만 매번 직접 제어해야 하는 경우도 있다.

예를들어 이미지 파일 업로드에서 업로드할 파일과 중간에 사용자가 삭제 버튼을 눌러 사진을 제거했을때의 경우가 있다.

사용자가 파일 5개를 업로드 하고자 선택을 하면 가장 먼저 배열에 파일들을 담아 setImageData 같이 처리하게 될 것이다.

근데 3번째 파일을 지우려고 삭제 버튼을 눌렀다면?

set 된 데이터들 중 3번째 파일 데이터를 삭제하고 나머지 데이터만 남겨야 한다.

하지만 useState는 readOnly로 수행된다.

그래서 imageData 라는 state에서 특정 데이터를 삭제하고 나머지를 set 해주기 위해서는 배열을 사용해야 했다.

이때 처리한 방법이 가장 마지막 코드와 같은 방법이다.

삭제 버튼의 onClick이 발생했을 때 handleOnClick에서는 비어있는 새로운 배열에 전개 연산자로 state 값을 그대로 담아준다.

그리고 3번째 파일이니 2번 인덱스에 대한 값을 찾는다.

그리고 그 파일을 배열에서 제거한 뒤 setState를 통해 set을 해주게 되면 사용자의 요청대로 특정 위치의 데이터만 삭제할 수 있게 된다.

마지막으로 useState를 사용하며 주의해야 할 점.

React 학습에서는 보통 초기값을 설정하지 않고 처리하는 경우가 많았다.

그리고 초기값을 잘못 설정하는 경우 재 렌더링 될때마다 의도하지 않은 값이 설정될 수 있기 때문에 잘 고민해서 초기값 설정을 해야 한다고도 들었다.

프로젝트를 진행하면서 문제가 발생한 부분들은 대부분 초기값에 대한 문제가 많았다.

대부분의 컴포넌트에서 서버에 데이터를 요청한 뒤 setData 에 담아주도록 하고 있는데 이 axios 요청은 useEffect에서 보내도록 해두었다.

거의 첫 렌더링에서만 수행하면 되는 요청이기 때문이라는 생각이었기 때문에 useEffect를 사용해 호출하도록 했는데 문제는 useEffect는 렌더링 후에 수행된다는 점이었다.

해당 컴포넌트가 하위 컴포넌트를 갖지 않고 처리한다면, 또는 해당 값이 null이라도 렌더링에서 오류가 발생하지 않는다면 초기값은 이상하게 설정하지만 않으면 문제가 되지 않았다.

하지만 리스트와 같이 하위 컴포넌트를 두고 그 하위 컴포넌트를 map을 통해 반복 하도록 했다면 얘기가 다르다.

반복문을 통해 처리하라고 했으면 '얘는 배열 타입이야' 라고 알려줘야 한다.

근데 state의 초기값을 아무것도 설정하지 않고 얘로 반복문 돌려서 처리해줘 라고 하면 오류가 발생하는 것.

'단일 객체를 반복문을 왜 돌림?' 이런 느낌이다..

그래서 state의 초기값을 [] 로 빈 배열로 초기화를 해둬야 한다.

혹은 배열이 아니더라도 하위 컴포넌트에서 해당 state 값으로 무언가를 처리하는데 오류가 발생할 여지가 있다면 초기값을 설정해 오류가 발생하지 않도록 해야 한다.

배열 state 코드가 게시글 리스트 코드를 예로 들었으니 게시글 리스트를 예로 들어본다.

리스트 페이지 접근 -> 렌더링 -> useEffect 수행 -> axios 요청, 응답 후 setData -> state가 변경되었으니 재렌더링.

이 순서로 발생하기 때문에 1차 렌더링 시에 오류가 발생해 useEffect가 제대로 수행되지 않거나 수행되더라도 재 렌더링이 수행되지 않게 된다.

주의!!

이 문제에 대한 참고 블로그

https://velog.io/@gyutato/%ED%8A%B8%EB%9F%AC%EB%B8%94%EC%8A%88%ED%8C%85React-useEffect-%EC%9D%98%EC%A1%B4%EC%84%B1-%EB%B0%B0%EC%97%B4%EC%97%90-props-%EB%84%A3%EA%B8%B0

React 학습 후에 처음으로 프로젝트를 진행해보면서 axios를 처음 사용해보게 되었다.

처음 axios는 아래와 같이 사용했었다.

//board list component

import axios from 'axios';
//....

function BoardPage() {
    const [params] = useSearchParams();
    const pageNum = params.get('pageNum') == null ? 1 : params.get('pageNum');
    const [data, setData] = useState([]);
    //...
    
    useEffect(() => {
        getBoardList(pageNum);
    }, [pageNum]);
    
    const getBoardList = async (pageNum) => {
        await boardAxios.get(`http://localhost:9096/board?pageNum=${pageNum}`)
            .then(res => {
                setData(res.data.content);
            }
            .catch(err => {
                console.error('boardList axios error : ', err);
            }
    }
    
    //....
}


//imageBoard list component

import axios from 'axios';
//....

function imagePage() {
    const [params] = useSearchParams();
    const pageNum = params.get('pageNum') == null ? 1 : params.get('pageNum');
    const [data, setData] = useState([]);
    //...
    
    useEffect(() => {
        getImageBoardList(pageNum);
    }, [pageNum]);
    
    const getImageBoardList = async (pageNum) => {
        await boardAxios.get(`http://localhost:9096/image-board?pageNum=${pageNum}`)
            .then(res => {
                setData(res.data.content);
            }
            .catch(err => {
                console.error('imageBoardList axios error : ', err);
            }
    }
    
    //....
}

이렇게 일단 작성해두고 테스트를 진행 해 정상적으로 동작하는 것을 확인하고 나니 좀 불편한게 눈에 들어왔다.

가장 먼저 눈에 들어온것이 axios를 요청하는 url 작성이었다.

이걸 어쩔까 하다가 생각난 방법이 .env에 기본 url과 크게 분류되어있는 기능의 url을 작성해 두고 가져다 사용하는 방법이었다.

//.env
REACT_APP_API_URL=http://localhost:9096
REACT_APP_API_BOARD=/board/
//...



//board list component

import axios from 'axios';
//....

const default_url = process.env.REACT_APP_API_URL;
const board_default_url = process.env.REACT_APP_API_BOARD;
function BoardPage() {
    const [params] = useSearchParams();
    const pageNum = params.get('pageNum') == null ? 1 : params.get('pageNum');
    const [data, setData] = useState([]);
    //...
    
    useEffect(() => {
        getBoardList(pageNum);
    }, [pageNum]);
    
    const getBoardList = async (pageNum) => {
        await boardAxios.get(`${default_url}${board_default_url}?pageNum=${pageNum}`)
            .then(res => {
                setData(res.data.content);
            }
            .catch(err => {
                console.error('boardList axios error : ', err);
            }
    }
    
    //....
}

이전보다는 url 관리도 쉽겠구나 하긴 했지만 컴포넌트 몇개 더 작성하다보니 계속 env 파일에서 불러와야 한다는 점이 너무 불편했다.

만약 env 파일에 작성한 변수명이 달라지면 그건 그거대로 일이 커질 것이라는 생각도 들었다.

그리고 가장 큰 문제는 JWT 토큰을 모두 쿠키에 담아 저장하다보니 withCredentials 옵션을 설정해야 하고 headers 역시 매번 작성해야 했다.

테스트 코드는 이런 문제를 다 배제하고 단순하게 연결만 테스트 했기 때문에 문제가 없었지만...

그래서 방법을 알아보다 axios를 모듈화 할 수 있다는 것을 알게 되었다.

처음에는 간단하게 기본적인 설정에 대한 인스턴스만 생성했지만 이미지 파일에 대한 처리도 해야 했고 컴포넌트에서 기능별로 크게 분리되어있는 url 역시 작성하지 않도록 하기 위해 좀 세분화해서 모듈화를 하게 되었다.

//customAxios.js

import axios from 'axios';

/*
* axios list
* board
* image_default
* image_multipart
* image_blob
* ...
*/

const default_url = process.env.REACT_APP_API_URL;
const board_default = process.env.REACT_APP_API_BOARD;
const image_default = process.env.REACT_APP_API_IMAGE;
const comment_default = process.env.REACT_APP_API_COMMENT;
const member_default = process.env.REACT_APP_API_MEMBER;

const default_header = {
    'Content-Type': 'application/json',
}

export const boardAxios = axios.create({
    baseURL: `${default_url}${board_default}`,
    headers: default_header,
    withCredentials: true,
});

export const imageAxios = axios.create({
    baseURL: `${default_url}${image_default}`,
    headers: default_header,
    withCredentials: true,
});

export const imageDisplayAxios = axios.create({
    baseURL: `${default_url}${image_default}`,
    headers: default_header,
    withCredentials: true,
    responseType: 'blob',
});

export const imageInsertAxios = axios.create({
    baseURL: `${default_url}${image_default}`,
    headers: {
        'Content-Type' : 'multipart/form-data',
    },
    withCredentials: true,
});

export const axiosErrorHandling = (err) => {
    const err_code = err.response.status;
    
    if(err_code === 403) {
        window.location.href = '/error';
    }//...
    
}

//...

header의 경우 딱히 여러가지를 사용할 만한것 없이 Content-Type 만 사용하는 것으로도 괜찮았기 때문에 해당 설정 역시 변수화해서 기본 적인 header를 갖는 axios는 그대로 가져다 사용하도록 처리했다.

그리고 image의 경우 파일을 응답받는 경우와 파일을 담아 요청하는 경우 Content-Type이 다르기 때문에 이때만 직접 작성했다.

axios 요청 이후 오류 코드 응답이 오는 경우도 모듈화를 하기 위해 axiosErrorHandling 을 만들어두고 특정 오류코드에 대한 핸들링을 할 수 있도록 했다.

//board list component

import { boardAxios, axiosErrorHandling } from '../../../modules/customAxios';
//....

function BoardPage() {
    const [params] = useSearchParams();
    const pageNum = params.get('pageNum') == null ? 1 : params.get('pageNum');
    const [data, setData] = useState([]);
    //...
    
    useEffect(() => {
        getBoardList(pageNum);
    }, [pageNum]);
    
    const getBoardList = async (pageNum) => {
        await boardAxios.get(`?pageNum=${pageNum}`)
            .then(res => {
                setData(res.data.content);
            }
            .catch(err => {
                axiosErrorHandling(err);
            }
    }
    
    //....
}

모듈화를 하게 되면서 컴포넌트 코드가 엄청 간결해졌고 나중에 url 변경이나 header 등등 설정의 수정에 있어서도 대응하기 굉장히 좋아졌다.

아쉬운점으로는 대부분의 요청 헤더가 비슷한만큼 하나의 대표적인 기본 설정을 두고 그 설정에 set 해서 url만 수정한다거나 할 수 있도록 만든다면 더 좋지 않을까 싶긴 한데 방법을 찾지도, 딱히 생각나는 것도 없어서 일단은 보류..

프로젝트를 리펙토링하면서 JQuery에서 꼭 좀 개선하고 싶은 부분이 있었다.

중복되는 함수에 대해 하나의 js파일에 담아두고 필요한 곳에서 호출해 사용하게 하고 싶었다.

예를들어 jQuery를 통해 하나의 테이블을 만들어야 된다고 가정.

function tableStr(arr) {
    let str = "<table class=\"table\">" + 
                  "<thead>" +
                      "<tr>" +
                          "<th>header1</th>" + 
                          "<th>header2</th>" + 
                          "<th>header3</th>" +
                      "</tr>" +
                  "</thead>" + 
                  "<tbody>";
    
    $(arr).each(function(i, attach) {
        str += "<tr>" +
                   "<td>" + arr.body1 + "</td>" +
                   "<td>" + arr.body2 + "</td>" +
                   "<td>" + arr.body3 + "</td>" +
               "</tr>";
    }
    
    str += "</tbody>" +
           "</table>";
    
    return str;
}

이렇게 데이터를 받아 테이블을 파싱하는 코드가 여러곳에 존재한다고 하면, 각각의 js 파일에 중복되어 작성되게 된다.

그럼 가장 좋은 방법은 이 tableStr 이라는 함수를 하나의 js 파일에 분리하거나 필요한 곳 중 한군데에만 작성해두고 그 함수를 호출하는 것이 가장 좋은 방법일 것.

처리는 js 파일을 새로 만들고 그 안에 함수를 작성한 뒤 필요한 곳에서 호출하게 했다.

필요한 곳을 parent1.js, parent2.js 라고 가정하고 분리해서 작성한 곳을 child1.js로 가정한다.

//parent1.js
function setTable() {
    $.getJSON("/getTableData", function(arr) {
        let str = jQuery.tableStr(arr);
        $(".formDiv").append(str);
    }
}

//parent2.js
function setTable() {
    $.getJSON("/getBoardTableData", function(arr) {
        let str = jQuery.tableStr(arr);
        $(".formDiv").append(str);
    }
}


//child1.js
jQuery.tableStr = function(arr) {
    let str = "<table class=\"table\">" + 
                  "<thead>" +
                      "<tr>" +
                          "<th>header1</th>" + 
                          "<th>header2</th>" + 
                          "<th>header3</th>" +
                      "</tr>" +
                  "</thead>" + 
                  "<tbody>";
    
    $(arr).each(function(i, attach) {
        str += "<tr>" +
                   "<td>" + arr.body1 + "</td>" +
                   "<td>" + arr.body2 + "</td>" +
                   "<td>" + arr.body3 + "</td>" +
               "</tr>";
    }
    
    str += "</tbody>" +
           "</table>";
    
    return str;
}

방법은 위와 같다.

호출되는 함수는 jQuery.함수명 = function() { } 이런 구조로 작성하면 되고, 호출할때는 jQuery.함수명 으로 호출하면 된다.

여기서 주의사항.

해당 html 혹은 jsp 파일에 parent, child가 모두 들어가있어야 한다.

<html>
....
<script type="text/javascript" src="/js/parent1.js"></script>
<script type="text/javascript" src="/js/child1.js"></script>
....

이렇게 되어있다면 정상적으로 호출해서 사용할 수 있다.

Ajax란?

  비동기방식의 Javascript와 XML을 가리킨다.

  동기방식은 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있고 비동기 방식은 그와 반대로

  신호를 보냈을때 응답 상태와 상관없이 다음 동작을 수행할 수 있다는 점이 다르다.

  Ajax를 이용하는 이유는 화면 전환 없이 클라이언트와 서버간에XML, JSON(JavaScript Object Notation), 텍스트,

  HTML등의 정보를 교환하기 위해서이다.

  다시말해, Ajax를 이용하면 사용자가 서버에 자료를 요청할 때 화면전환없이 요청한 자료를 전송받을 수 있다.

  또한 자료를 요청할 경우 어느정도 시간이 소요되는데 반해 Ajax를 이용하면 사용자가 기다릴 필요 없이

  다른 작업을 바로 수행할 수 있다.

Ajax 관련 메소드

load() 메소드

  사용자가 지정한 URL주소에 데이터를 전송하고 외부 컨텐츠를 요청하여 가져올 때 사용한다.

  요청한 컨텐츠를 이용해 선택한 요소의 내용을 바꿀 수 있다.

  기본형은 다음과 같다.

$(요소 선택).load(url, data, 콜백 함수)

  다음 URL주소에는 외부 컨텐츠를 요청할 외부 주소를 입력하고, data에는 전송할 데이터를 입력한다.

  그리고 전송이 완료되면 콜백함수에 저장된 코드가 실행된다. 이때 전송할 데이터와 콜백함수의 입력은 생략할 수

  있다.

  다음은 load() 함수를 사용하여 외부파일(jquery_ajax_news.html)의 일부요소를 불러오는 예제이다.

jquery_ajax_news.html

<body>
  <p id="news_1">Contrary to popular belief, Lorem Ipsum is not simply random text.
    It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
  <p id="news_2">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.</p>    
</body>

<script>
  $(function(){
    $("#newsWrap_1")
    .load("jqeury_ajax_news.html #news_1");

    $("#newsWrap_2")
    .load("jquery_ajax_news.html #news_2");
  });
</script>
</head>
<body>
  <h1>LOAD 1</h1>
  <div id="newsWrap_1"></div>
  <h1>LOAD 2</h1>
  <div id="newsWrap_2"></div>
</body>

$.ajax() 메소드

  사용자가 지정한 URL 경로에 파일의 데이터를 전송하고 입력한 URL 경로 파일로부터 요청한 데이터를 불러온다.

  이때 불러올 수 있는 외부 데이터로는 텍스트, HTML, XML, JSON 형식 등이 있으며, 선택한 요소에 Ajax를 이용해

  요청한 외부 데이터를 불러온다.

  다음은 $.ajax() 메소드의 기본형이다.

  중괄호 내에 다양한 옵션을 입력할 수 있다. 옵션은 속성과 값으로 이루어진다.

$.ajax({
  1. url:"전송 페이지"(action url),
  2. type:"전송 방식"(get, post 방식),
  3. data:"전송할 데이터",
  4. data Type:"요청한 데이터 형식"("html", "xml", "json", "text", "jsonp"),
  5. success:function(data){
     전송에 성공하면 실행할 코드;
     },
        error:function(){
        전송에 실패하면 실행할 코드;
        }
     });

  1의 url에는 데이터 전송 및 요청할 외부 주소를 입력한다.

  2의 type에는 전송방식을 입력한다.

  3의 data에는 전송할 데이터를 입력한다.

  4의 dataType은 서버로부터 받아올 데이터 형식을 지정한다. 데이터가 HTML일 경우에는 "html", XML일 경우에는

   "xml", JSON일 경우에는 "json"이라고 입력한다.

  5는 데이터 전송 및 요청이 정상적으로 이루어지면 함수가 실행된다. 이때 매개변수(result)에는 요청한 데이터가 저장

   된다.

  다음은 $.ajax()메소드의 옵션 종류이다.

  또한 비동기 통신 방식으로 데이터를 전송하거나 요청하려면 데이터를 가공해야 한다.

  다음은 비동기 통신 방식으로 데이터를 전송하거나 요청할 때 사용하는 Ajax 전송 데이터 가공 메소드이다.

 JSON.parse() 메소드는 입력하는 자료형이 '객체형태'일 뿐 '문자열'의 데이터를 입력하여 객체를 반환한다.

Ajax로 JSON 데이터 바인딩하기

  바인딩(binding)은 '묶다'라는 의미이다. 비동기 통신 기술을 이용하여 서버 데이터베이스(DB)에 데이터를 요청하고,

  데이터베이스에 요청한 데이터를 받아와 HTML 문단태그에 결합하는 것을 바인딩이라고 한다.

  HTML에서 $.ajax() 메소드로 가상회원 데이터(JSON)를 불러온다.

  그런 다음 가상 회원 데이터를 표(Table)로 가공하여 class값이 "wrap"인 문단 태그에 결합하여 출력한다.

<script>
  $(function(){
    $.ajax({
      url:"js/MOCK_DATA.json",
      dataType:"json",
      success:function(data){ //data는 MOCK_DATA.json이 참조된다.
        if(data.lenth > 0){
          var tb=$("<table/>");
          for(var i in data){
            var $id = data[i].id;
            var $first_name = data[i].first_name;
            var $last_name = data[i].last_name;
            var $email = data[i].email;
            var $gender = data[i].gender;

            var row= $("<tr/>").append(
                    $("<td/>").text($id),
                    $("<td/>").text($first_name),
                    $("<td/>").text($last_name),
                    $("<td/>").text($email),
                    $("<td/>").text($gender)
            );

            tb.append(row);
          }
          $(".wrap").append(tb);
        }
      }
    });
  });
</script>
</head>
<body>
  <div class="wrap"></div>
</body>

  각각의 배열 객체(JSON)의 데이터가 테이블(<tr>...</tr>)에 한 행씩 출력된다.

Ajax로 XML 데이터 바인딩하기

  xml(eXtensible Markup Language, 확장성 마크업 언어)란?

    XML은 확장 가능한 언어이므로 태그명을 사용자가 임의로 작성할 수 있다.

    이렇게 사용자가 임의의 태그명을 만들어 사용할 수 있기 때문에 많은 지식이 없어도 된다. 즉, 서버의 데이터를

    XML데이터로 가공하는것은 어렵지 않다. 그래서 XML은 주로 데이터를 배포할 목적으로 사용한다.

    XML의 기본형은 다음과 같다. 상단에는 버전과 인코딩 방식을 선언하고 사용자가 임의로 시작 태그와 종료 태그를

    사용하여 구조화된 데이터를 만든다.

<?xml version="1.0" encoding="UTF-8"?>
<tag1>
<tag2>내용</tag2>
</tag1>

  HTML에서 $.ajax()메소드를 사용하여 외부데이터(XML)를 불러온다. 그런다음 불러온 가상회원 데이터를 표(Table)로

  가공하여 class 값이 "wrap"인 문단 태그에 결합시켜 출력한다.

<script>
  $(function(){
    $.ajax({
      url:"js/dataset.xml",
      dataType="xml",
      success:function(data){
        var $data = $(data).find("record");//dataset.xml에서 find()메소드를 사용해 얻어낸
                                           //<record>객체를 참조한다.
        if($data.length>0){
          var tb = $("<table/>");
          $.each($data, function(i, o){
            var $id=
            $(o).find("id").text();

            var $first_name =
            $(o).find("first_name").text();

            var $last_name =
            $(o).find("last_name").text();

            var $email =
            $(o).find("email").text();

            var $gender =
            $(o).find("gender").text();

            var row = $("<tr/>").append(
              $("<td/>").text($id),
              $("<td/>").text($first_name),
              $("<td/>").text($last_name),
              $("<td/>").text($email),
              $("<td/>").text($gender)
            );

            tb.append(row);
          });
          $(".wrap").append(tb);
        }
      }
    });
  });
</script>
</head>
<body>
  <div class="wrap"></div>
</body>

 각각의 <record>...</record>의 개수만큼 테이블(<tr>..</tr>)에 한 행씩 출력된다.

자바스크립트의 보안정책과 외부 데이터 바인딩하기

  자바스크립트의 보안정책은 자바스크립트로 A 사이트의 데이터를 B사이트로 불러오는것을 허용하지 않는다.

  이 정책을 동일 출처 원칙(Same-origin policy)이라 한다. 즉, ajax()메소드로는 서로 다른 도메인의 데이터를 전송할 수 

  없을 뿐만 아니라 교차 도메인(Cross-Domain)도 허용하지 않는다.

  서로 다른 사이트에서 데이터를 서로 주고 받으려면 서버 언어를 사용해 데이터를 가져오거나 JSONP를 사용하는 

  방법이 있다.

  서버 언어를 사용하는 방법은 서로 다른 사이트에서 데이터를 요청하고 이를 ajax로 가공하면 된다.

  이 방법은 주로 관리자가 직접 접근할 수 없는 외부 서버의 데이터를 가져올 때 사용한다.

  JSONP를 사용하는 방법은 '동일 출처 보안 정책'을 피해야 하고 관리자의 외부 서버 접근이 가능해야 한다는 

  전제조건이 필요하다. 이 방법은 교차 도메인으로 데이털르 불러올 때 사용한다.

  아예 다른 서버로는 관리자가 직접 접근할 수 없기 때문에 서버 언어를 사용해서 데이터를 가져오는 방법은

  사용할 수 없다.

  하지만 관리하는 사이트가 2개이면 관리자가 서버에 접근할 수 있기 때문에 JSONP를 사용하면 된다.

RSS(신문사 새 소식)연동하기

  신문사 사이트에 접속하여 RSS(Really Simple Syndication)를 불러오는 방법을 알아볼것이다.

  자바스크립트는 동일 출처 원칙에 따라 도메인이 다른 사이트느 서로 데이터를 요청할 수 없다.

  RSS란 '초 간편 배포'라는 의미앋. 즉, 새로운 읽을거리가 자주 갱신되는 블로그나 뉴스에서 주로 사용하는 XML

  기반의 컨텐츠 배급 포맷이다. RSS를 사용하면 뉴스나 블로그의 관심있는 읽을거리만 모아서 볼 수 있다는 장점이

  있다. 또한 사이트 연동이 가능하다. 사이트에 RSS를 연동하면 자신이 운영하는 사이트의 내용이 풍부해져

  설치하기 전보다 방문자가 늘어나는 효과를 얻을 수 있다.

신문사 RSS(오늘의 주요뉴스) XML URL 경로 복사하기

  신문사를 방문하여 '오늘의 주요 뉴스'RSS를 클릭한 다음 XML URL경로를 복사한다.

  그런 다음 $.ajax() 메소드를 사용해 신문사 RSS를 사져온다. 하지만 동일 출처 원칙에 따라 RSS를 불러오지 못하고

  오류가 발생할 것이다.

<script>
  $(function(){
    $.ajax({
      url:"http://myhome.chosun.com/rss/www_section_rss.xml",
      dataType:"xml",
      success:function(data){
        console.log(data);
      }
    });
  });
</script>
</head>
<body>
  <div class="wrap"></div>
</body>

서버언어(PHP)로 교차 도메인 데이터(XML)불러오기

  PHP언어는 서버가 서로 통신할 수 있는 cURL(Client URL Library Functions)메소드를 지원한다.

  이 메소드를 사용하면 교차 도메인 데이터(XML)를 불러올 수 있다. PHP 언어를 사용하기 위해 먼저 PHP 선언문을

  작성하는 방법과 변수를 정의하는 방법을 알아보자.

  다음은 PHP 선언문과 변수 선언문의 기본형이다.

1. PHP 선언문
<?php
  php코드
?>

2. 변수 선언문
<?
  $변수 이름=값;
?>

  PHP선언문을 작성했으니 cURL 메소드를 사용해 교차 도메인 데이터를 불러와야 한다.

  다음은 cURL메소드의 기본형이다.

1. curl_init() : cURL을 사용하기 위해 초기화 하는 메소드로, cURL 세션을 생성한다.
2. curl_setopt(세션, 옵션, 값) : 생성된 cURL 세션의 옵션을 설정한다.
   옵션에 적용 가능한 값
   CURLOPT_URL:접속할 url 주소 설정
   CURLOPT_SSL_SERIFYPEER:SSL인증서 검사 여부 결정
   CURLOPT_RETURNTRANSFER:결과값을 받을 것인지의 여부 설정
   CURLOPT_HEADER:헤더 정보 출력 여부 설정
3. curl_exec():cURL 세션을 실행한다.
4. curl_close():cURL 세션을 종료한다.

  다음은 웹 호스팅에서 PHP언어의 cURL 메소드를 사용해 오늘의 주요뉴스 데이터(XML)를 불러오는 예제이다.

<?php
  $ch = curl_init();
  curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($ch, CURLOPT_HEADER, 0);
  curl_setopt($ch, CURLOPT_URL,
    "http://myhome.chosun.com/rss/www_section_rss.xml");
  $url_source = curl_exec($ch);
  curl_close($ch);
  
  echo $url_source;
?>

  다음은 위의 예제에서 가져온 데이터(XML)를 $.ajax()메소드를 사용하여 HTML 문서로 불러오는 예제이다.

<script>
  $(function(){
    $.ajax({
      url:"news.php",
      dataType:"xml",
      success:function(data){
        var $items = $(data).find("item");

        if($items.length > 0){//<item>요소가 1개 이상인 경우 실행한다.
          $items = $items.slice(0, 10);//$items 배열에 <item> 요소를 10개 가져온다.
          var $ulTag = $("<ul/>");
          $.each($items, fuction(i,o){
            var $title = $(o).find("title").text();
            var $link = $(o).find("link").text();

            var$aTag=$("<a/>")
            .attr({
              "href":$link,
              "target":"_blank"
            })
            .text($title);

            var $liTag=$("<li/>")
            .append($aTag);

            $ulTag.append($liTag);
          });
          $(".wrap").append($ulTag);
        }
      }
    });
  });
</script>
</head>
<body>
  <div class="wrap"></div>
</body>

  위 예제를 실행하면 10개의 오늘의 주요 뉴스 데이터가 출력된다. 기사 제목을 클릭하면 기사의 상세 페이지로

  이동한다.

JSONP로 교차 도메인 데이터(XML)불러오기

  1. 가상회원데이터(json)을 만들어 서버에 업로드하고 다음과 같이 PHP코드를 작성한다.

     여기서 $_GET["callback"]은 이후에 작성할 HTML문서에서 get 방식으로 전송한 데이터를 받을 매개변수이다.

<?php
  $data='[
   {"id","1","name":"Choldcroft","email":"dcroft@hibu.com"},
   {"id","2","name":"Levi","email":"wlev1@blogger.com"},
   {"id","3","name":"Axcell","email":"laxcellc@ebay.co.uk"}
  ]';
  echo $_GET["callback']."(".$data.")";
?>

   php에서 . 연산자는 문자열 결합 연산자이다.

  2. 교차 도메인 환경에서 실행하기 위해 HTML파일은 PHP파일과 서로 다른 서버에 저장한다.

<script>
  $(function(){
    var href="http://localhost/9장/member_2.php?callback=myFnc";
    $.ajax({
      url:href,
      dataType:"jsonp"
    }).done(function myFnc(data){
       console.log(data)
    });
  });
</script>

  파일을 실행하면 교차 도메인 서버 간 요청한 데이터를 정상적으로 불러올 수 있다.

  먼저 데이터를 요청한 교차 도메인서버에서 함수(myFnc())를 실행한다. 그런다음 객체가 담긴 배열(json)을

  인자값으로 전달한다. 마지막으로 done에 작성한 함수를 호출하고 매개변수(data)에 인자값(json)을 할당한다.

  3. $.ajax()메소드를 사용하여 JSONP 방식으로 불러온 데이터(json)를 HTML 문단 태그에 결합한다

<script>
  $(function(){
    var href="http://localhost/9장/member_2.php?callback=myFnc";
    $.ajax({
      url:href,
      dataType:"jsonp"
    }).done(function myTest(data){
      if(data.length > 0){
        var $table=$("<table/>");
        data.forEach(function(o){
        $id=o.id;
        $name=o.name;
        $email=o.email;

        var trTag=$("<tr/>");
        trTag.append(
          $("<td/>").text($id),
          $("<td/>").text($name),
          $("<td/>").text($email)
        );

        $table.append(trTag);
      });

      $(".wrap").append($table);
      }
    });
  });
</script>
</head>
<body>
    <div class="wrap"></div>
</body>

  파일을 실행하면 데이터(json)가 테이블에 삽입된다.

Ajax로 로그인 프로그램 만들기

  Ajax로 로그인하는 프로그램을 만들것.

  아이디와 비밀번호를 입력하고 로그인 버튼을 누르면 비동기 통신 방식으로 서버에 아이디와 비밀번호가 전송된다.

  만약 아이디와 비밀번호가 일치하면 문단태그에 환영 메시지가 나타난다.

<script>
  $(function(){
    var $frm=$(".login_f");
    $frm.on("submit", function(e){
      e.preventDefault();
      //[submit]버튼을 눌러도 action페이지로 이동하지 않는다.
      var myData=$frm.seralize();
      //사용자가 폼 입력 요소에 작성한 값을 쿼리 스트리아 형식의
      //데이터로 변환하여 myData에 대입한다.

      $.ajax({
        type:"POST",
        url:$frm.attr("action"),
        data:myData,
        success:function(res){
          if(res){
            var jsonData=JSON.parse(res);
            //res에 요청한 데이터를 받아온다. 그런다음
            //res를 json 형식으로 변형하여 jsonData에 대입한다.
            var message=jsonData.user_name+
            "("+jsonData.user_id+")"
            +"님 반갑습니다";
            $(".login_wrap").html(message);
          }
        }
      });
    });
  });
</script>
</head>
<body>
    <div class="login_wrap">
      <h1>로그인</h1>
      <form class="login_f" method='post' action='member_login_ok.php'>
        <p>
          <label for="user_pw">비밀번호</label>
          <input type="password" name="user_pw" id="user_pw" value="12345"/>
        </p>
        <p><input type="submit" value="로그인" class="login_btn"/></p>
      </form>
    </div>
</body>

  다음은 사용자가 입력한 아이디와 비밀번호가 일치하는지를 검사하는 PHP페이지이다.

  사용자가 전송한 아이디와 비밀번호가 일치하면 JSON 데이터를 반환한다.

<?php
  if(!isset($_POST['user_id'])||
  !isset($_POST['user_pw']) exit;
  
  $user_id=$_POST['user_id'];
  $user_pw=$_POST['user_pw'];
  
  $members=array(
    'korean'=>array('pw'=>'12345',
    'name'=>'박부장'),
    'seoul'=>array('pw'=>'56789',
    'name'=>'홍대리')
  );
  
  if(isset($members[$user_id])&&
  $members[$user_id]['pw']==$user_pw){
    echo'{"user_id":".$user_id'",
    "user_name":".$members[$user_id]['name'].'"}';
  }
?>

(참고 : do it 자바스크립트+제이쿼리 입문)

애니메이션 효과 제어 메소드란?

  '효과' 또는 '애니메이션'이 적용된 요소의 동작을 제어하는 메소드이다.

애니메이션 적용 원리와 큐의 개념

  애니메이션 메소드는 함수가 적용된 순서대로 큐(queue)라는 저장소(memory)에 저장된다.

  큐는 ATM기기를 통해 은행 일을 보는 사람들을 생각하면 쉽다.

  사람들이 줄을 서있고 일을 먼저 마친 사람은 먼저 나온다.

  큐도 마찬가지로 큐에 저장된 애니메이션 대기열이 있다면 먼저 들어간 애니메이션이 먼저 실행된다.

  다음은 애니메이션을 적용한 요소의 동작을 제어하는 메소드를 정리한 표이다.

stop() / delay() 메소드

  stop() 메소드는 요소에 적용한 애니메이션을 정지시키고, delay() 메소드는 요소에 적용한 애니메이션을 지정한

  시간만큼 지연시킨다.

  다음은 stop()메소드의 기본형이다.

1. $("요소 선택").stop();
2. $("요소 선택").stop(clearQueue, finish);

  1은 진행중(inprogress)인 첫 번째 애니메이션만 정지시킨다. 큐에 대기중인 애니메이션은 계속해서 실행한다.

  2는 clearQueue, finish는 true나 false의 값을 입력할 수 있다(기본값은 false).  clearQueue가 true면 큐에서

  대기중인 애니메이션을 모두 제거한다. finish가 true면 진행중인 애니메이션을 강제로 종료한다.

1. 진행중인 애니메이션만 정지시키는 경우
   $(".txt1").animate({opacity:0.5}, 1000)
   .animate({marginLeft:"500px"}, 1000};
   $(".txt1").stop();
   
2. 대기중인 애니메이션은 제거하고 진행중인 애니메이션은 강제로 종료하는 경우
   $(".txt2").animate({opacity:0.5}, 1000)
   .animate({marginLeft:"500px"}, 1000);
   $(".txt2").stop(true, true);

  stop() 메소드는 첫번째, 두번째 인자값(clearQueue, finish)에 따라 메소드 적용방식이 달라진다.

  모든 인자값을 생략한 stop()메소드는 진행중인 애니메이션만 정지시키낟.

  모든 인자값에 true를 적용하면 대기중인 애니메이션은 제거되고 진행중인 애니메이션은 강제로 종료된다.

  그래서 실제로는 애니메이션이 아닌 css메소드를 적용한 것 처럼 보인다.

  다음은 애니메이션 실행을 지연시키는 delay()의 기본형이다.

$("요소 선택").delay(지연시간).애니메이션 효과 메소드();

  애니메이션 함수 앞에 delay(3000)메소드를 적용하면 3초 후에 애니메이션이 적용된다.

$(".txt1").delay(3000).animate({marginLeft:"500px"}, 1000);

  다음은 delay()메소드와 stop()메소드를 적용한 예제이다.

<script>
  $(function(){
    $(".txt1")
    .animate({marginLeft:"300px"}, 1000);

    $(".txt2").delay(3000) //3초후에 애니메이션이 적용
    .animate({marginLeft:"300px"}, 1000);

    $(".btn1").on("click", moveElement);

    function moveElement(){
      $(".txt3")
      .animate({marginLeft:"+=50px"}, 800);
      //[버튼1]을 누를때마다 class값이 "txt3"인 요소가
      //0.8초간 50px씩 이동한다.

      $(".txt4")
      .animate({marginLeft:"+=50px"}, 800);
      $(".txt4").stop();
      //stop()이 실행되면 [버튼1]을 눌러도 애니메이션이 동작하지 않는다.

      $(".txt5")
      .animate({marginLeft:"+=50px"}, 800);
      $(".txt5").stop(true, true);
      //stop(true, true)가 실행되면 [버튼1]을 눌러도 애니메이션이
      //바로 종료 시점응로 이동한다.
      //그래서 애니메이션 없이 css()메소드를 적용한 것 처럼
      //50px씩 이동한다.
    }
  });
</script>
<style>
  p{width:110px;text-align: center;}
  .txt1{background-color:aqua;}
  .txt2{background-color:pink;}
  .txt3{background-color:orange;}
  .txt4{background-color:green;}
  .txt5{background-color:gold;}
</style>
</head>
<body>
  <p class="txt1">효과1</p>
  <p class="txt2">효과2<br>delay(3000)</p>
  <p><button class="btn1">50px 전진</button></p>
  <p class="txt3">효과3</p>
  <p class="txt4">효과4<br>stop()</p>
  <p class="txt5">효과5<br>stop(true, true)</p>
</body>

queue() / dequeue() 메소드

  queue()메소드는 큐에 적용된 애니메이션 함수를 반환하거나 큐에 지정한 함수를 추가한다.

  queue()메소드를 실행하면 실행 이후의 모든 애니메이션이 취소된다.

  dequeue()메소드는 queue()메소드 실행 이후에 적용된 애니메이션 메소드가 취소되지 않게 연결해 준다.

  다음은 queue()메소드와 dequeue()메소드의 기본형이다.

1. 큐(Queue)의 함수 반환
   $("요소 선택").queue();
2. 큐(Queue)에 함수 추가
   $("요소 선택").queue(function(){자바스크립트코드});
3. dequeue()메소드
   $("요소 선택").dequeue();

  다음은 애니메이션이 적용된 요소에 queue(function(){...})를 사용하여 새로운 함수를 큐에 추가하는 예제이다.

<script>
  $(function(){
    $(".txt1")
    .animate({marginLeft:"200px"}, 1000)
    .animate({marginTop:"200px"}, 1000)
    .queue(function(){
      $(this).css({background:"red"});
      $(this).dequeue();
    })
    //queue()메소드를 실행하고 dequeue()메소드를 생략하면
    //queue()메소드 이후의 애니메이션이 적용되지 않는다.
    .animate({marginLeft:0},1000)
    .animate({marginTop:0}, 1000);
  });
</script>
<style>
  *{margin:0;}
  .txt1{
    width:500px;text-align:center;background-color:aqua;
  }
</style>
</head>
<body>
  <p class="txt1">내용1</p>
</body>

clearQueue()메소드

  진행중인(첫 번째) 애니메이션을 제외하고 큐에서 대기하는 모든 애니메이션 함수를 제거한다.

  다음은 clearQueue()메소드의 기본형이다.

$("요소 선택").clearQueue();

  다음은 clearQueue()의 사용법을 보는 예제이다.

<script>
  $(function(){
    $(".txt1")
    .animate({marginLeft:"110px"}, 1000)
    .animate({marginLeft:"300px"}, 1000)
    .animate({marginLeft:"400px"}, 1000);

    $(".txt2")
    .animate({marginLeft:"100px"}, 1000)
    .animate({marginLeft:"300px"}, 1000)
    .animate({marginLeft:"400px"}, 1000);
    $(".txt2").clearQueue();
    //clearQueue()를 실행하면 현재 진행중인 애니메이션을 제외하고
    //대기중인 애니메이션은 모두 제거된다.
  });
</script>
<style>
  .txt1, .txt2{width:50px; text-align:center; background-color:aqua;}
  .txt2{background-color:orange;}
</style>
</head>
<body>
  <p class="txt1">내용1</p>
  <p class="txt2">내용2</p>
</body>

총 정리

  animate() 메소드를 사용하여 슬라이드 요소를 만드는 예제이다.

  [Go]버튼을 누르면 요소가 오른쪽으로 이동하고 반대로 [Back]버튼을 누르면 요소가 왼쪽으로 이동한다.

<script>
  $(function(){
    var txt1=$(".txt1");
    var count=1;
    $(".btnWrap button").on("click", function(){
      if(!txt1.is(":animated")){ //[내용1]이 애니메이션 중이면 동작하지 않는다.
        if($(this).hasClass("backBtn")){
          count--;
          if(count<1){
            count = 1;
            return false;
          }
          txt1.animate({marginLeft:"-=10%"}, 300);
          //class값이 "backBtn"인 경우에 동작
        }else{
          count++;
          if(count>10){
            count=10;
            return false;
          }
          txt1.animate({marginLeft:"+=10%"}, 300);
          //class값이 "backBtn"이 아닌경우에 동작.
        }
      }
    });
  });
</script>
<style>
  .txt1, .txt2{width:50px; text-align:center; background-color:aqua;}
  .txt2{background-color:orange;}
</style>
</head>
<body>
  <p class="btnWrap">
    <button class="backBtn">Back</button>
    <button class="goBtn">Go</button>
  </p>
  <div class="wrap">
    <p class="txt1">내용1</p>
  </div>
</body>

(참고 : do it 자바스크립트+제이쿼리 입문)

문서 객체를 보이게 했다가 안보이게 하려면 css의 display 속성을 이용해야 한다.

단, css를 이용하는 방법은 객체를 단순하게 조절하는 정도의 효과만 기대할 수 있다.

효과(Effect)메소드를 이용하면 css를 이용하는 것 보다 좀 더 역동적으로 동작을 조절하여 객체를 화려하게 숨기거나 

보이게 만들 수 있다.

애니메이션 메소드까지 사용하면 선택한 요소에 다양한 동작(Motion)까지 적용 할 수 있다.

효과 메소드

  효과(Effect)메소드에는 선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능을 가진 메소드가 있다.

  다음은 효과 메소드의 종류를 간략히 정리한 표이다.

효과 메소드의 기본형

  효과 메소드는 효과 소요시간, 가속도, 콜백 함수를 인자값으로 전달 할 수 있다.  

  다음은 효과 메소드의 기본형이다.

$("요소 선택").효과 메소드(효과 소요시간, 가속도, 콜백함수);

  효과 소요시간은 요소를 숨기거나 노출할 때 소요되는 시간이다.

  효과 소요시간은 다음과 같이 적용할 수 있다.

방법 1: "show","nomal","fast"
방법 2: 1.000(1초), 500(0.5초)

  가속도은 숨기거나 노출하는 동안의 가속도를 설정한다.

  가속도에 적용할 수 있는 값은 다음과 같다.

방법 1: "swing"
시작과 끝은 느리게, 중간은 빠른 속도로 움직인다(기본값)

방법 2: "linear"
일정한 속도로 움직인다.

  콜백 함수는 노출과 숨김 효과가 끝난 후에 실행할 함수이다. 콜백함수는 생략 할 수 있다.

  다음은 id값이 'box'인 요소를 2초간 위로 올려 숨기는 예로, 가속도는 "inner"다. 요소가 숨겨지면 콜백 함수가 

  실행되어 "hello"라는 메시지가 나타난다.

$("#box").slideUp(2000, "linear", function(){
 alert("hello");
});

fadeTo()메소드

  다음은 fadeTo()메소드의 기본형이다.

$("요소 선택").fadeTo(효과 소요 시간, 투명도, 콜백 함수);

  투명도는 0~1까지의 값을 입력할 수 있다. 1에 가까울수록 선명하게 보인다.

  다음은 버튼을 누르면 다양한 효과가 적용되는 예제이다.

<script>
  $(function(){
    $(".btn2").hide();

    $(".btn1").on("click", function(){
      $(".box").slideUp(1000, "linear",
      function(){
        $(".btn1").hide();
        $(".btn2").show();
      });
    });
    //[slideUp]버튼을 클릭하면 class값이 "box"인 요소가 
    //위로 접히며 숨겨진다.
    //그런 다음 콜백 함수가 실행되어 [slideUp]버튼은
    //숨겨지고 [fadeIn]버튼이 나타난다.
    $(".btn2").on("click", function(){
      $(".box").fadeIn(1000, "swing",
      function(){
        $(".btn2").hide();
        $(".btn1").show();
      });
    });

    $(".btn3").on("click", function(){
      $(".box").slideToggle(1000,"linear");
    });
    //[toggleSlide]버튼을 클릭하면 class값이 "box"인 요소가 접히거나
    //펴진다.
    $(".btn4").on("click", function(){
      $(".box").fadeTo("fast", 0.3);
    });

    $(".btn5").on("click", function(){
      $(".box").fadeTo("fast", 1);
    });
    //fadeTo(0, 3)을 클릭하면 class값이 "box"인 요소가 70%투명해진다
    //다시 클릭하면 투명화를 취소한다.
  });
</script>
<style>
  .content{
    width:400px;
    background-color:#eee;
  }
</style>
</head>
<body>
  <p>
    <button class="btn1">slideUp</button>
    <button class="btn2">fadeIn</button>
  </p>
  <p>
    <button class="btn3">toggleSlide</button>
  </p>
  <p>
    <button class="btn4">fadeTo(0,3)</button>
    <button class="btn5">fadeTo(1)</button>
  </p>
  <div class="box">
    <div class="content">
      Lorem ipsum dolor sit amet. consectetur adipiscing elit. Ut...
      ...
    </div>
  </div>
</body>

동작을 불어넣는 애니메이션 메소드

  애니메이션 메소드를 적용하면 스타일을 적용한 요소를 움직이게 할 수 있다.

animate() 메소드

  선택한 요소에 다양한 동작(Motion)효과를 적용할 수 있다.

  예를들어 요소를 앞으로 이동시키거나 점차 커지게 하는 등 다양한 동작을 적용할 수 있다.

  다음은 animate() 메소드의 기본형이다.

$("요소 선택").animate({스타일 속성}, 적용 시간, 가속도, 콜백함수)

  스타일 속성은 애니메이션으로 적용할 스타일 속성이다.

  적용 시간은 동작에 반응하는데 소요되는 시간이며, 적용 시간의 옵션은 효과 함수에 적용한 것과 같다.

  다음은 버튼을 클릭하면 지정한 요소에 애니메이션이 적용되는 예제이다.

<script>
  $(function(){
    $(".btn1").on("click", function(){
      $(".txt1").animate({
        marginLeft:"500px",
        fontSize:"30px"
      },
      2000, "linear", function(){
        alert("모션 완료!");
      });
    });

    $(".btn2").on("click", function(){
      $(".txt2").animate({
        marginLeft:"+=50px"
      }, 1000);
    });
  });
</script>
<style>
  .txt1{background-color:aqua;}
  .txt2{background-color:pink;}
</style>
</head>
<body>
  <p><button class="btn1">버튼1</button></p>
  <span class="txt1">"500px"이동</span>
  <p><button class="btn2">버튼2</button></p>
  <span class="txt2">"50px"씩 이동</span>
</body>

(참고 : do it 자바스크립트+제이쿼리 입문)

그룹 이벤트 등록 메소드

  한번에 2개 이상의 이벤트를 등록할 때 사용한다.

  즉, 선택한 요소에 이벤트 등록 메소드를 한번만 적용하여 '마우스 포인터를 올렸을 때'와 '포커스가 생성되었을때'

  처럼 두 종류의 이벤트가 발생하도록 만들 수 있다.

  다음은 그룹 이벤트 등록 메소드를 간단히 정리한 표이다.

on()메소드

  선택한 요소에 이벤트를 등록한 이후에도 새롭게 생성되거나 복제된 요소에 이벤트를 적용할 수 있다.

  즉, 동적으로 생성되거나 복제된 요소에도 이벤트가 등록된다.

  다음은 동적으로 생성된 요소에도 이벤트가 등록되는 on() 메소드의 '라이브 이벤트 등록 방식'의 기본형이다.

$([document]"이벤트 대상의 상위 요소 선택"].on("이벤트 종류", "이벤트 대상 선택", function(){
  자바스크립트 코드;
});

  다음은 on()메소드에 '라이브 이벤트 등록 방식'을 사용하여 동적으로 생성된 요소에 이벤트를 등록하는 예제이다.

<script>
  $(function(){
    $(".btn_1.on").on("mouseover focus", function(){
      alert("HELLO!");
    });
    $(".btn_1").addClass("on");
    //이벤트를 등록하고 class값을 생성하면
    //이벤트가 정상적으로 등록되지 않는다.

    $(document).on("mouseover focus", ".btn_2.on", function(){
      alert("WELCOME!");
    });
    $(".btn_2").addClass("on");
    //라이브 이벤트 등록방식으로 이벤트를 등록한 다음
    //class값을 생성하면 이벤트가 정상적으로 등록된다.
  });
</script>
</head>
<body>
  <div id="wrap">
    <p><button class="btn_1">버튼1</button></p>
    <p><button class="btn_2">버튼2</button></p>
  </div>
</body>

delegate()/one() 이벤트 등록 메소드

  delegate() 메소드는 선택한 요소의 하위 요소에 이벤트를 등록한다.

  그리고 이벤트를 등록한 이후에도 동적으로 생성된 요소와 복제된 요소에도 이벤트를 등록한다.

  다음은 delegate()의 기본형이다.

$([document | "이벤트 대상의 상위 요소 선택"]).delegate("이벤트 대상 요소 선택", "이벤트 종류",
function(){
  자바스크립트코드;
});

  one() 메소드는 이벤트가 1회 발생하면 자동으로 등록된 이벤트가 제거된다.

  즉, 1회성 이벤트를 등록할 때 사용한다. one() 메소드도 등록 방식에 따라 '라이브 이벤트'의 등록이 가능하다.

  다음은 one()의 기본형이다.

1. one() 기본 이벤트 등록 방식
   $("이벤트 대상 선택").one("이벤트종류", function(){
     자바스크립트코드;
   });

2. one() 라이브 이벤트 등록 방식
   $([document | "이벤트 대상의 상위 요소 선택"]).one("이벤트 종류", "이벤트 대상 요소 선택",
   function(){
     자바스크립트코드;
   });

  다음은 delegate(), one() 메소드를 사용한 예제이다.

<script>
  $(function(){
    $(".btn_wrap").delegate(".btn_1.on",
    "mouseover focus", function(){
      alert("HELLO!");
    });
    $(".btn_1").addClass("on");
    //[버튼1]에 마우스 포인터(포커스)를 올리면 경고창에
    //"HELLO!"라는 메시지가 출력.
    //라이브 이벤트 방식으로 이벤트를 등록하기 때문에
    //새로 생성한 요소에도 이벤트가 적용된다.

    $(document).one("mouseover focus"
    ".btn_2.on", function(){
      alert("WELCOME!");
    });
    $(".btn_2").addClass("on");
    //[버튼2]에 마우스 포인터(포커스)를 올리면 경고창에
    //"WELCOME!"이라는 메시지가 출력
    //이벤트는 1회만 발생
  });
</script>
</head>
<body>
  <div id="wrap">
    <p><button class="btn_1">버튼1</button>
    </p>
    <p><button class="btn_2">버튼2</button></p>
  </div>
</body>

이벤트 제거 메소드

  이전에 등록된 이벤트를 제거할 때 사용한다.

  다음은 이벤트 제거 메소드의 종류를 정리한 표이다.

off() / unbind() / undelegate()로 이벤트 해제하기

  이벤트 등록 메소드에 따라 이벤트를 해제하는 방법도 달라진다.

  on()메소드는 off()메소드로, bind()메소드는 unbind()로, delegate()는 undelegate()로 이벤트를 해제한다.

  다음은 각 이벤트 해제 메소드의 기본형이다.

1. on()이벤트 해제를 위한 off()메소드
  - 기본 이벤트 제거 방식
     $("이벤트 대상 요소 선택").off("이벤트 종류");
  - 라이브 이벤트 제거 방식
     $([document | "이벤트 대상 상위 요소 선택"]).off("이벤트 종류", "이벤트 대상 요소 선택");
     
2. bind() 이벤트 해제를 위한 unbind()메소드
     $("이벤트 대상 요소 선택").unbind("이벤트 종류");
     
3. delegate() 이벤트 해제를 위한 undelegate() 메소드
  - 기본 이벤즈 제거 방식
     $("이벤트 대상 요소 선택").delegate("이벤트 종류");
  - 라이브 이벤트 제거 방식
     $([document | "이벤트 대상의 상위 요소 선택"]).undelegate("이벤트 대상 선택", "이벤트 종류");

  다음은 on() 메소드로 '기본 등록 방식'과 '라이브 이벤트 등록 방식'을 사용해 각각의 버튼에 이벤트를 등록하고,

  이벤트 해제 버튼을 클릭하면 이벤트가 해제되는 예제이다.

<script>
 $(function(){
   $(".btn_1").on("mouseover", function(){
     alert("HELLO!");
   });
   $(document).on("mouseover", "btn_2", function(){
     alert("WELCOME!");
   });
   var btn_2=$("<p><button class=\"btn_2\">버튼2</button></p>");
   $("#wrap").append(btn_2);

   $(".del_1").on("click", function(){
     $(".btn_1").off("mouseover");
   });
   $(".del_2").on("click", function(){
     $(document).off("mouseover", ".btn_2");
   });
 });
</script>
</head>
<body>
  <div id="wrap">
    <p><button class="btn_1">버튼1</button></p>
  </div>
  <p>
    <button class="del_1">버튼 1 이벤트 해제</button>
    <button class="del_2">버튼 2 이벤트 해제</button>
  </p>
</body>

(참고 : do it 자바스크립트+제이쿼리 입문)

이벤트 객체와 종류

  사용자가 이벤트를 발생시킬 때마다 이벤트 핸들러의 배개변수에는 이벤트 객체가 생성되며,

  이벤트 객체에는 이벤트 타입에 맞는 다양한 정보를 제공하는 속성과 메소드가 포함되어 있다.

  다음은 이벤트 객체를 생성하기 위한 기본형이다.

$("이벤트 대상 선택").mousemove(function(매개변수){
  매개변수(이벤트 객체), 속성;
});

  다음은 이벤트 객체의 속성과 메소드 종류를 정리한 표이다.

 scroll()이벤트 메소드

  scroll() 메소드는 대상 요소의 스크롤바가 이동할 때마다 이벤트를 발생시키거나 강제로 scroll 이벤트를 발생시키는데

  사용한다.

  기본형은 다음과 같다.

1. scroll 이벤트 등록
   $("이벤트 대상 선택").scroll(function(){자바스크립트 코드;});
   $("이벤트 대상 선택").on("scroll", function(){자바스크립트코드;});
   
2. scroll 이벤트 강제 발생
   $("이벤트 대상 선택").scroll();

  다음은 스타일을 사용하여 스크롤바를 생성한 다음 사용자가 스크롤바를 이동시킬 때마다 이벤트가 발생되도록

  만든 예제이다.

<script>
  $(window).on("scroll", function(){
    var sc_top=$(this).scrollTop();
    var sc_left=$(this).scrollLeft();

    $(".top").text(sc_top);
    $(".left").text(sc_left);
  });
</script>
<style>
  body{
    height: 10000px;
    width: 5000px;
  }
  #wrap{
    position: fixed;
    left: 10px;
    top: 10px;
  }
</style>
</head>
<body>
  <div id="wrap">
    <p>scrollTop:<span class="top">0</span>px</p>
    <p>scrollLeft:<span class="left">0</span>px</p>
  </div>
</body>

포커스 이벤트

  포커스는 마우스로 <a> 또는 <input> 태그를 클릭하거나 Tab 키를 누르면 생성된다.

  마우스 이벤트는 마우스가 없으면 사용할 수 없다. 마우스가 없다면 사용자는 키보드만 가지고 사용해야 하는데 이 때

  사용자가 키보드만으로 사이트를 이용해도 불편함이 없도록 제이쿼리가 잘 작동되어야 하는데, 이를 키보드 접근성

  이라 한다.

  키보드 접근성을 높이기 위해서는 마우스 이벤트를 등록할 때 될 수 있으면 <a> 또는 <input> 태그에 등록하고,

  키보드가 없을 경우를 고려하여 마우스 이벤트에 대응할 수 있는 키보드 이벤트까지 등록해야 한다.

focus() / blur() / focusin() / focusout() 이벤트 메소드

  focus() 메소드 : 대상 요소로 포커스가 이동하면 이벤트를 발생시킨다.

  blur() 메소드 : 포커스가 대상 요소에서 다른 요소로 이동하면 이벤트를 발생시킨다.

  focusin() 메소드 : 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트를 발생시킨다.

  focusout() 메소드 : 대상 요소의 하위 요소 중 입력 요소에서 외부 요소로 이동하면 이벤트를 발생시킨다.

  다음은 focus()와 blur() 메소드의 기본형이다

1. focus 이벤트 등록
   $("이벤트 대상 선택").focus(function(){자바스크립트코드;});
   $("이벤트 대상 선택").on("focus", function(){자바스크립트코드;});

2. focus 이벤트 강제 발생
   $("이벤트 대상 선택").focus();
   
3. blur 이벤트 등록
   $("이벤트 대상 선택").blur(function(){자바스크립트코드;});
   $("이벤트 대상 선택").on("blur", function(){자바스크립트코드;});
   
4. blur 이벤트 강제 발생
   $("이벤트 대상 선택").blur();

  다음은 focusin()과 focusout() 메소드의 기본형이다.

1. focusin 이벤트 등록
   $("이벤트 대상 선택").focusin(funcion(){자바스크립트코드;});
   $("이벤트 대상 선택").on("focusin", function(){자바스크립트코드;});
   
2. focusin 이벤트 강제 등록
   $("이벤트 대상 선택").focusin();
   
3. focusout 이벤트 등록
   $("이벤트 대상 선택").focusout(function(){자바스크립트코드;});
   $("이벤트 대상 선택").on("focusout", function(){자바스크립트코드;});
   
4. focusout 이벤트 강제 등록
   $("이벤트 대상 선택").focusout();

  다음은 focus(), blur(), focusin(), focusout()을 이용한 예제이다.

<script>
  $(function(){
    $("#user_id_1, #user_pw_1").on("focus",
    function(){
      $(this).css({
        "background-color":"pink"
      });
    });
    $("#user_id_1, #user_pw_1").on("blur",
    function(){
      $(this).css({
        "background-color":"#fff"
      });
    });
    //포커스가 입력 요소로 이동하면 배경색을 분홍색으로 변경하고
    //다른 요소로 이동하면 다시 배경색을 흰색으로 변경.

    $("#frm_2").on("focusin",
    function(){
      $(this).css({
        "background-color":"pink"
      });
    });
    $("#frm_2").on("focusout",
    function(){
      $(this).css({
        "background-color":"#fff"
      });
    });
    //포커스가 이벤트 대상 요소에서 입력 요소로 이동하면
    //이벤트가 발생한 요소(<form id="frm_2">)의 배경색을
    //분홍색으로 변경
  });
</script>
</head>
<body>
  <h1>focus / blur</h1>
  <form action="#">
    <p>
      <label for="user_id_1">ID</label>
      <input type="text" name="user_id_1" id="user_id_1">
    </p>
    <p>
      <label for="user_pw_1">PW</label>
      <input type="password" name="user_pw_1" id="user_pw_1">
    </p>
  </form>
  <h1>focusin / focusout</h1>
  <form action="#" id="frm_2">
    <p>
      <label for="user_id_2">ID</label>
      <input type="text" name="user_id_2" id="user_id_2">
    </p>
    <p>
      <label for="user_pw_2">PW</label>
      <input type="password" name="user_pw_2" id="user_pw_2">
    </p>
  </form>
</body>

키보드로 마우스 이벤트 대응하기

  키보드 접근성이란 어떤 대상 요소에 마우스 이벤트를 등록했을 때 마우스 없이 키보드 대상 요소를 사용할 수 있게

  하는 것을 말한다. 다음과 같이 마우스 이벤트가 등록되었을 때는 반드시 키보드로 작동할 수 있게 대응이벤트를

  함께 작성해야 한다.

  다음은 버튼에 마우스 포인터를 올리면 마우스 이벤트가 발생되어 '내용1'이 숨겨지는 예이다.

  이 예는 마우스가 없으면 동작하지 않는다.

  1. 키보드 접근성을 배려하지 않은 이벤트 예(비추천)

<button class="btn">버튼</button>
<p class="txt_1">내용1</p>

$(".btn").mouseover(function(){
  $(".txt_1").hide();
});

  2. 키보드 접근성을 배려한 이벤트 적용 예(추천)

<button class="btn">버튼</button>
<p class="txt_1">내용1</p>

$(".btn").on("mouseover focus", function(){
  $(".txt_1).hide();
});

  다음은 2개의 버튼에 마우스 이벤트를 등록하는데 하나는 키보드 접근성을 무시하고 나머지 하나는 키보드 접근성을

  고려하여 등록한 예제이다.

<script>
  $(function(){
    $("#btn1")
    .data({"text":"javascript"})
    .on({
      "mouseover":overFnc,
      "mouseout":outFnc
    });
    //[버튼1]에 마우스 포인터를 올리면 overFnc()메소드를 호출
    //반대로 [버튼1]에서 마우스 포인터를 내리면 
    //outFnc()메소드를 호출

    $("#btn2")
    .data({"text":"welcome!"})
    .on({
      "mouseover focus":overFnc,
      "mouseout blur":outFnc
    });

    function overFnc(){
      $(".txt").text($(this).data("text"));
    }
    function outFnc(){
      $(".txt").text("");
    }
  });
</script>
</head>
<body>
  <p><button id="btn1">버튼1</button></p>
  <p><button id="btn2">버튼2</button></p>
  <p class="txt"></p>
</body>

change() 이벤트 메소드

  선택한 폼 요소의 값(value)을 새 값으로 바꾼다. 그리고 포커스가 다른 요소로 이동하면 이벤트를 발생시킨다.

  기본형은 다음과 같다.

1. focus 이벤트 등록
   $("이벤트 대상 선택").change(function(){자바스크립트코드;});
   $("이벤트 대상 선택").on("change", function(){자바스크립트코드;});
   
2. focus 이벤트 강제 발생
   $("이벤트 대상 선택").change();

  다음은 선택상자에 change() 이벤트 메소드를 적용한 예제이다.

<script>
  $(function(){
    $("#rel_site").on("change", function(){
      $(".txt").text($(this).val));
    });
  });
</script>
</head>
<body>
  <select id="rel_site">
    <option value="www.google.com">구글</option>
    <option value="www.naver.com">네이버</option>
    <option value="www.daum.net">다음</option>
  </select>
  <p class="txt"></p>
</body>

키보드 이벤트

  키보드 이벤트는 사용자가 키보드로 입력을 하면 발생한다.

  예를 들어 키를 누르거나 키에서 손을 떼면 키보드 이벤트가 발생한다.

keydown() / keyup() / keypress() 이벤트 메소드

  keydown()과 keypress() 이벤트 메소드는 선택한 요소에서 키보드 자판을 눌렀을 때 이벤트를 발생시키거나

  해당 이벤트를 강제로 발생시킨다

  두 이벤트의 차이점을 보면 keydown()은 모든키(한글 키 제외)에 대해서 이벤트를 발생시키지만 keypress()는

  기능키(F1~F12, Alt, Ctrl, Shift 등)에 대해서는 이벤트를 발생시키지 않는다.

  또한 키보드 이벤트 핸들러에서 생성된 이벤트 객체의 속성을 이용하면 고유 키의 코드값을 구할 수 있다.

  그리고 이를 사용하여 단축키 기능을 만들수도 있다.

  keyup() 메소드는 자판의 키를 눌렀다 키에서 손을 떼면 이벤트를 발생시키거나 keyup 이벤트를 강제로 발생시킨다.

  다음은 keydown(), keyup(), keypress() 메소드의 기본형이다.

1. keydown 이벤트 등록
   $("이벤트 대상 선택").keydown(function(){자바스크립트코드;});
   $("이벤트 대상 선택").on("keydown", function(){자바스크립트코드;});
   
2. keydown 이벤트 강제 발생
   $("이벤트 대상 선택").keydown();
   
3. keyup 이벤트 등록
   $("이벤트 대상 선택").keyup(function(){자바스크립트코드;});
   $("이벤트 대상 선택").on("keyup", function(){자바스크립트코드;});
   
4. keydown 이벤트 강제 발생
   $("이벤트 대상 선택").keyup();
   
5. keypress 이벤트 등록
   $("이벤트 대상 선택").keypress(function(){자바스크립트코드;});
   $("이벤트 대상 선택").on("keypress", function(){자바스크립트코드;});
   
6. keydown 이벤트 강제 발생
   $("이벤트 대상 선택").keypress();

  다음은 HTML 문서(document)에 keydown 이벤트를 등록하는 예제이다.

<script>
  $(function(){
    $(document).on("keydown", keyEventFnc);
    fonction keyEventFnc(e){
      var direct="";

      switch(e.keyCode){
        case 37:
          direct="LEFT";
          break;
        case 38:
          direct="TOP";
          break;
        case 39:
          direct="RIGHT";
          break;
        case 40:
          direct="BOTTOM";
          break;
      }

      if(direct) $("#user_id").val(direct);
    }
  });
</script>
</head>
<body>
  <p><input type="text" name="user_id" id="user_id"></p>
</body>

이벤트가 발생한 요소 추적하기

$(this)선택자

  이벤트 핸들러에서 $(this)를 사용하면 이벤트가 발생한 요소를 선택하여 이벤트가 발생한 요소를 추적할 수 있다.

<ul id="gnb">
  <li><a href=""#">메뉴1</a></li>
  <li><a href=""#">메뉴2</a></li>
  <li><a href=""#">메뉴3</a></li>
  <li><a href=""#">메뉴4</a></li>
</ul>

$("#gnb>li>a").on("click", function(){
   $(this)
});

  위 예제에서 메뉴 3의 버튼을 클릭하면 이벤트 핸들러에 사용된 $(this)는 이벤트가 발생한 <a href="#">메뉴3</a>

  를 선택한다.

index() 인덱스 반환 메소드

  이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스값을 반환한다.

  다음은 인덱스 반환 메소드의 기본형이다.

$("이벤트 대상 선택").on("이벤트 종류", function(){
  $("이벤트 대상 선택").index(this);
});

<ul id="gnb">
  <li><a href=""#">메뉴1</a></li>
  <li><a href=""#">메뉴2</a></li>
  <li><a href=""#">메뉴3</a></li>
  <li><a href=""#">메뉴4</a></li>
</ul>

$("#gnb>li>a").on("click", function(){
  var idx=$("#gnb>li>a").index(this);
});

  위 예제에서는 인덱스 2에 해당하는 메뉴 3을 변수 idx에 대입하게 된다.

  다음은 이벤트 핸들러에 $(this)와 index() 메소드로 click 이벤트가 발생한 요소를 추적하여 배경색을 바꾸는 예제이다.

<script>
  $(function(){
    $(".menuWrap_1 a").on("click", function(e){
      e.preventDefault();

      $(".menuWrap_1 a").css({
        "background-color":"#fff"
      });

      $(this).css({
        "background-color":"#ff0"
      });
    });
    //class 값이 "menuWrap_1"인 요소의 하위요소 <a>의 배경을 흰색으로 변경
    //그 다음 선택한 <a>요소의 배경만 노란색으로 변경

    $(".menuWrap_2 a").on("click", function(e){
      e.preventDefault();

      $(".menuWrap_2 a").css({
        "background-color":"#fff"
      });

      var idx=$(".menuWrap_2 a").index(this);

      $(".menuWrap_2 a").eq(idx).css({
        "background-color":"#0ff"
      });

      $(".idxNum").text(idx);
    });
    //class 값이 "menuWrap_2"인 요소의 하위요소 <a>의 배경을 흰색으로 변경
    //그 다음 선택한 <a>요소의 배경만 아쿠아색으로 변경하고 인덱스값(1)을 반환
  });
</script>
</head>
<body>
  <h2>$(this)</h2>
  <ul class="menuWrap_1">
    <li><a href="#">메뉴1</a></li>
    <li><a href="#">메뉴2</a></li>
    <li><a href="#">메뉴3</a></li>
  </ul>
  <h2>index()</h2>
  <ul class="menuWrap_2">
    <li><a href="#">메뉴4</a></li>
    <li><a href="#">메뉴5</a></li>
    <li><a href="#">메뉴6</a></li>
  </ul>
  <p class="idxNum"></p>
</body>

(참고 : do it 자바스크립트+제이쿼리 입문)