한빛출판네트워크

IT/모바일

Head First Ajax : 자꾸 가고 싶은 웹 사이트의 비밀

한빛미디어

번역서

절판

Head First Ajax : 자꾸 가고 싶은 웹 사이트의 비밀
좋아요: 19
  • 저자 : 레베카 리오단
  • 역자 : 홍승표 , 김은희
  • 출간일 : 2009-09-17
  • 페이지 : 536쪽
  • ISBN : 9788979146936
  • 물류코드 :1693

합계 : 22,500

  • 빠르고 재미있는 웹 애플리케이션 개발 가이드

    Head First Ajax는 동적으로 사용자와 상호 작용하는 웹 애플리케이션 프로그래밍을 완벽하게 학습할 수 있도록 돕는다. 새롭고 획기적인 웹 애플리케이션 개발을 위한 다양한 기법인 자바스크립트, XHTML, 비동기식/동기식 서버 요청, DOM 등 여러분이 원했던 모든 지식을 섭렵할 수 있다. 이제 단순히 다른 사람이 만들어 놓은 프레임워크를 답습하거나 툴킷에서 위젯을 끌어다 쓰는 것에 만족하지 말고 자꾸 머물고 싶어지는 웹 사이트를 위한 나만의 프로그래밍 기법을 익혀보자. 여러분이 이 책을 마칠 때쯤이면 페이지 새로 고침 없이 서버와 통신하거나 사용자의 행동에 반응하여 작동하는 유용한 애플리케이션 기법을 알 수 있을 것이다.

  • [저자] 레베카 리오단

    20여 년의 실무경험으로 Rebecca M. Riordan은 안정적이며, 고객의 요구를 효과적으로 충족시켜주는 컴퓨터 시스템 설계 및 구축에 있어 국제적 명성을 쌓았습니다. 그녀의 전문 분야는 데이터베이스 설계이며, 5년간 MVP로 활동하고 있습니다. Rebecca는 데이터베이스 관련 책을 다수 집필했으며, Microsoft 데이터베이스 솔루션의 기술 지원 엔지니어로 활약했습니다.

    [역자] 홍승표

    현재 삼성 SDS 정보기술연구소에서 사용자 경험(UX)을 극대화할 수 있는 IT기술을 연구하고, 집에서는 한 가정의 가장으로 곧 태어날 아기의 아빠로서 가정의 행복을 극대화 할 수 있는 방법을 연구하고 있습니다.

    [역자] 김은희

    역자는 삼성SDS 정보기술연구소에서 차근차근 내공을 쌓고 있는 UX 연구원입니다. 요즘은 모바일 UX를 연구 중이라며 스마트폰에 센서 게임들을 잔뜩 깔아 놓고 살고 있습니다.

  • 1. Ajax 사용하기: 새 시대를 위한 웹 애플리케이션
    지금까지의 웹 페이지
    개선된 웹 페이지
    그럼 무엇이 "Ajax"페이지를 만들어 줄까요?
    '롭'의 로큰롤 기념전
    Ajax와 로큰롤 5단계 
    1단계: XHTML수정하기 
    2단계: 자바스크립트 초기화 하기 
    3단계: 요청 객체 만들기 
    4단계: 상품의 상세 정보 얻기 
    상품의 상세 정보를 요청하기 위한 코드를 작성해 봅시다 
    작업 전에 요청 객체가 잘 만들어 졌는지 항상 확인하세요 
    요청 객체도 하나의 객체입니다. 
    서버야! 답을 보내줄 때 displayDetails()함수를 호출할 수 있도록 꼭 알려줘야 해. 알았지?
    요청을 보낼 때는 send() 함수를 사용하세요
    서버는 보통 데이터를 Ajax 요청에 반환해 줍니다
    Ajax는 서버기술을 의식하지 않습니다
    5단계: 상세 정보 보여주기
    요청 객체의 responseText 속성에서 서버의 응답을 얻어냅니다
    옛날 방식의 웹 애플리케이션은 안녕…
     
    2. Ajax 애플리케이션 설계하기: Ajax하는 사람의 고민
    박중운의 구닥다리 방식의 웹 사이트
    Ajax를 사용해서 비동기식으로 등록 요청을 해봅시다
    회원 등록 페이지 갱신하기
    이벤트 핸들러를 밝힌다
    프로그래밍 방침에 맞추어 windows.onload 이벤트 핸들러 설정하기
    함수 밖에 있는 자바스크립트 코드들은 해당 스크립트가 읽혀질 때 실행됩니다
    언제 실행되어야 할까요?
    그렇다면 서버는…
    Ajax 설계에서 어떤 부분들은 항상 반복됩니다
    createRequest()는 항상 같습니다
    요청 객체 만들기… 다양한 브라우저에서 동작하도록 Ajax 애플리케이션 설계는 웹 페이지와 서버단 프로그래밍 모두를 포함합니다
    요청 객체는 당신의 코드를 웹 브라우저에 연결시켜 줍니다
    당신은 서버가 아닌 브라우저와 통신합니다
    브라우저는 서버에서 응답이 오면 콜백 함수를 호출합니다
    박중운에게 Ajax 회원 등록 페이지를 보여주세요
    웹 폼이 서버에게 요청을 보내는 방법은 현재 두 가지입니다
    진생 상황을 보여주는 CSS클래스들을 만들어 봅시다
    …그리고 자바스크립트에서 CSS클래스를 명시하는 부분을 변경합니다
    더 이상 성가신 수정 작업은 없을 것입니다
    회원 등록은 무든 준비가 완료된 후에 가능합니다
     
    3. 자바스크립트 이벤트: 사용자에게 즉각 반응하세요
    요가의 첫 번째 단계는 '아래를 보는 강아지 자세'입니다
    Ajax 애플리케이션은 단순한 부품의 조합, 그 이상입니다
    이것이 옥주영씨의 XHTML입니다
    웹 페이지의 이벤트와 자바스크립트의 이벤트 핸들러를 연결해 주세요
    window.onload 이벤트를 사용해서 웹 페이지의 상호 작용 기능을 초기화합니다
    왼쪽 이미지를 클릭할 수 있도록 바꿔 주세요 
    XHTML이 보여주는 페이지의 구조와 내용을 사용하세요 
    hideHint() 함수도 추가해 보세요 
    탭: 시각적(시각 그래픽적)인 착각을 이용합니다 
    for 반복문을 사용해서 이미지들을 살펴보세요
    CSS 클래스가 (다시 한번) 핵심입니다 
    엇… 하지만 탭이 태그는 아니었잖아요! 
    이제는 자바스크립트가 작동하지 않는걸요? 
    요청 객체를 사용해서 클래스의 상세 설명을 서버로부터 가져오세요
    서로 다른 두 개의 함수가 페이지의 어떤 하나의 부분을 갱신 수 있다면 조심스럽게 살펴봐야 합니다
    스크립트를 사용해서 이미지를 변경하고 싶다면 'CSS 클래스 변경'을 고려해 보세요 
    XHTML의 링크들은  태그로 나타냅니다 
    활성화 상태의 이미지를 보여주는 함수와 이 이미지를 감수하는 함수가 필요합니다
     
    4. 복수 이벤트 핸들러: 하나보다는 둘이 낫지
    한 개의 이벤트에는 한 개의 이벤트 핸들러만 등록할 수 있습니다(또는 그렇게 보입니다)
    이벤트 핸들러는 속성값이죠
    하나의 속성은 단 하나의 값만 가질 수 있어요
    addEventListener()로 하나 이상의 이벤트 핸들러 등록하기
    객체들은 DOM 레벨 2로 하나의 이벤트에 여러 개의 이벤트 핸들러를 등록할 수 있습니다
    익스플로러에 무슨 일이 있는 거죠?
    익스플로러는 완전히 다른 이벤트 모델을 사용합니다
    기능상으로는 attachEvent()와 addEventListener()가 동일하네요
    addEventHandler()는 옥주영의 요가 페이지 뿐 아니라 모든 웹 페이지에서 동작합니다
    initPage()에 새 유틸리티 함수를 적용해 봅시다
    문제점 공략에는 alert() 경고 메시지를!
    이번에는 뭐가 또 잘못됐다는 거죠?
    익스플로러의 이벤트 핸들러들은 활성된 객체가 아니라 익스플로러의 이벤트 처리 프레임워크가 소유하고 있습니다
    attachEvent()와 addEventListener()는 이벤트 핸들러에 또 다른 인수를 제공합니다
    이벤트 인수에 이름을 지어줘야 이벤트 핸들러가 이를 활용할 수 있습니다
    target이라 외치면, srcElement라고 말하죠
    이벤트를 발생한 객체를 어떻게 얻어올까요
     
    5. 비동기식 애플리케이션: 면허증 갱신하는 것과 같아요
    비동기식이란 말이 대체 뭔가요?
    지금까지 비동기식 애플리케이션을 작성해왔습니다
    그렇지만 전혀 눈치채지 못할 때도 있습니다
    서버단 작업에 대해 좀 더 알아본다면…
    (덤) 세 단계로 익히는 비동기식 프로그래밍
    표지 이미지를 위한 
     태그와 2개의 비밀번호 태그가 필요합니다
    새로운 작업이 수행되어야 한다면 새로운 이벤트 핸들러 함수가 필요합니다
    요청 객체 하나만으로도 하나의 비동기식 요청을 안전하게 주고 받을 수 있습니다
    비동기식 요청은 아무것도 기다리지 않습니다. 자기가 요청한 것도 마찬가지로…
    만약 2개의 분리된 요청 작업을 수행한다면, 2개의 독립적은 요청 객체들을 사용하세요
    비동기식이란 요청과 응답 순서에 의존하여 작업할 수 없다는 뜻입니다
    모니터 함수는 당신의 프로그램을 관찰합니다. 바깥에서 말이죠
    어떤 동작이 이루어져야 할 것 같으면 모니터 함수를 호출합니다
    모니터 함수는 상태 변수들을 통해 현재 상황을 확인합니다
    이제 마지막 단계입니다…
    동기식 요청은 코드 전체가 다른 일을 수행할 수 없게 합니다
    당신의 코드 대신 자바스크립트로 프로세스를 수행시키는 setInterval()을 사용합시다
     
    6. DOM(Document Object Model): 도큐먼트 객체 모델: 웹 페이지 숲속 헤매기
    페이지 내의 콘텐츠를 변경할 수도 있고…
    페이지의 구조를 변경할 수도 있습니다
    브라우저는 DOM을 사용하여 페이지를 표현합니다
    당신이 작성한 XHTML은…
    …브라우저가 이렇게 이해하고 있지요
    페이지는 관련된 객체들의 집합입니다
    동적 애플리케이션 작성 시 DOM을 사용해 봅시다
    XHTML로 시작하시죠
    appendChild()는 노드에 새로운 자식 노드를 추가합니다
    객체 이름이나 id를 사용하여 태그객체의 위치를 지정할 수 있습니다
    새 부모님과의 인터뷰
    클릭된 숫자판을 움직일 수 있나요?
    가족 관계를 활용한 DOM 트리 주변을 움직일 수 있습니다
    DOM 트리는 웹 페이지의 '모든 것'을 나타내는 노드들을 지니고 있습니다
    문자 노드의 nodeName은 "#text"
    제가 이겼나요? 제가 이겼죠?
    정말 진지하게 말하는데요… 제가 이겼나요?
     
    7. DOM 다루기: 시키는 대로 할께요
    Webville Puzzles사의 사업확장 
    Woggle은 문자판을 만들 때 테이블 태그를 사용하지 않습니다
    XHTML의 문자판들은 CSS를 이용해서 자리를 잡습니다
    문자판을 완전히 무작위로 선택하지는 않습니다
    페이지의 디자인은 CSS가 담당합니다
    문자판에 대한 새로운 클릭 이벤트 핸들러가 필요합니다
    각각의 문자판에 대해 클릭 이벤트 핸들러를 만들어 봅시다 
    이 이벤트 핸들러를 randomizeTiles()에서 할당할 수 있습니다
    자바스크립트 속성 값은 문자열에 불과합니다
     'currentWord'를 식별자로 갖는 
     태그에 내용과 구조를 추가시켜야 합니다
    DOM을 사용해서 페이지의 구조를 바꿉니다
    DOM 엘리먼트를 만들려면 createElement()를 사용하세요
    당신이 만든 새로운 DOM엘리먼트를 어디에 넣어야 할지 브라우저에게 말해 주어야 합니다
    문자판을 비활성화시켜야 합니다. 즉, CSS 클래스를 바꿔주어야 하지요
    …그리고 addLetter() 이벤트 핸들러를 작동하지 않도록 합니다
    단어를 전송하는 것은 (또 다른) 요청입니다
    우리의 자바스크립트는 서버가 어떻게 요청에 대한 응답을 하는지 상관하지 않습니다
    사용성 확인: submitWord()는 언제 호출해야 할까요? 
     
    8. 프레임워크와 툴킷: 아무도 믿지 마세요
    프레임워크에는 어떤 것들이 있나요? 
    모든 프레임워크들은 제각기 기능을 구현합니다
    구문은 바뀌기 마련이지만… 자바스크립트는 여전히 동일합니다
    프레임워크를 사용할까요 말까요?
    선택은 여러분 몫입니다
     
    9. XML 요청과 응답: 이루다 말로 표현할 수 없어요
    고전 로큰롤이 21세기를 맞아 대대적인 보수작업에 들어갔습니다
    Rob wants 서버는 어떻게 여러 가지의 값을 응답해 줄까요?
    InnerHTML을 사용하면 웹 애플리케이션의 클라이언트단은 간단해집니다
    XML을 사용하기 위해서는 XHTML에서처럼, DOM을 이용하는 것이 필수입니다
    XML 스스로 자신에 대해 설명해 줍니다
     
    10. json: 엄친아 자바스크립트
    JSON은 문자 그리고 객체 하나
    JSON은 자바스크립트 객체처럼 다뤄집니다
    서버의 응답으로부터 JSON 데이터를 어떻게 획득할까요?
    자바스크립트는 문자열을 실행합니다
    eval()을 사용하여 수동적으로 문자열을 실행합니다
    JSON 데이터를 계산하면 해당 데이터를 나타내는 객체를 반환합니다
    자바스크립트 객체는 이미 동적이죠. 컴파일 된 객체가 아니니까요
    객체의 멤버에 접근할 수 있으며, 멤버를 사용하여 객체의 값들에도 접근할 수 있습니다
    서버의 응답을 바로 계산하는 것이 아니라 분리해야 합니다
     
    11 폼과 검증: 하려고 했던 말을 하세요
    검증은 웹 페이지로부터 서버에 이르기까지 전 과정에 걸쳐 동작해야 합니다
    데이터 포맷을 검증할 수도 있고, 콘텐츠를 검증할 수도 있습니다
    드라이(DRY: Don't Repeat Yourself) - 반복하지 말자!
    이벤트 핸들러들을 좀 더 작성해봅시다
    자바스크립트 아들래미의 귀환
    속성값은 또 하나의 자바스크립트 객체입니다
    입력 데이터에 문제가 발생했을 때는 옥주영의 고객들에게 경고 메시지를…
    경고 상황이 아니라면 경고 메시지를 철회해야겠죠?
    경고 메시지가 있다면 제거하세요
    데이터의 중복은 서버의 문제입니다
     
    12 포스트 요청: 편집증, 전 당신의 친구랍니다
    GET 요청은 요청 인수로서 문자열을 네트워크 상에 그대로 전송합니다
    POST 요청은 암호화되지 않은 문자열을 그대로 전송하지 않습니다
    POST 요청의 데이터는 서버에 도착할 때까지 인코딩되어 있습니다
    send()는 POST 요청 방식으로 데이터를 전송합니다
    항상 당신의 요청 데이터를 제대로 받았는지 확인하세요
    왜 POST 요청이 동작하지 않았을까요?
    서버는 POST 데이터를 디코딩합니다
    서버에 보내고 있는 것이 무엇인지 알려줘야 합니다
    요청 객체의 setRequestHeader()를 사용하여 요청 헤더를 설정하세요
     
    I 부록1: 아직 못다한 이야기들 - 알아두면 좋은 이야기
    Ii 부록2: 유틸리티 함수
  •  

  • 내용이 없습니다.
닫기

해당 상품을 장바구니에 담았습니다.
장바구니로 이동하시겠습니까?