<NHN은 이렇게 한다! 자바스크립트 UI 개발과 Jindo 프레임워크>는 NHN의 축적된 기술 정보와 사례를 공유하는 NHN 기술 서적 시리즈인 TECH@NHN의 두 번째 시리즈이다.

이 책은 NHN에서 자체적으로 개발한 자바스크립트 프레임워크인 'Jindo 프레임워크'를 주제로 자바스크립트 UI 개발의 원리와 구현 방법을 설명한다. Jindo 프레임워크가 주제이지만 웹 개발자들이 UI 개발에 친숙해지도록 기본적인 원리에 초점을 맞춰 설명했기 때문에 Jindo 프레임워크를 사용하지 않아도 괜찮다. 예제의 원리를 이해한다면 다른 프레임워크를 사용하거나 프레임워크를 사용하지 않아도 실제 UI 개발에 응용할 수 있을 것이다.

자바스크립트 UI 개발은 다른 개발 분야와 마찬가지로 경험에 좌우되는 면이 많다. 수년간 네이버의 UI를 설계하고 개발한 저자들의 경험과 지식을 엮은 이 책으로 UI 개발에서 생길 수 있는 수많은 시행 착오를 줄일 수 있기를 바라며, 더불어 자바스크립트 UI 개발에 관심이 있다면 누구에게나 도움이 되어 더 많은 개발자들이 UI 개발에 흥미를 갖게 되기를 바란다.

이 책에서는 다음과 같은 내용을 다룬다.

  • UI 개발 시 자주 접하는 사례를 통해 Jindo 프레임워크의 주요 객체와 메서드의 사용 방법 설명
  • 웹 애플리케이션의 대표적 UI인 레이어, 드래그 앤드 드롭, 타이머, 애니메이션의 원리와 구현 방법 설명
  • 네이버의 실시간 급상승 검색어에 사용하는 롤링 UI의 원리와 구현 방법 설명
  • AJAX 및 크로스 도메인의 기본 개념과 할용 방법을 예제를 바탕으로 설명
  • AJAX와 미투데이 오픈API를 이용한 웹 애플리케이션 개발 예제
  • 코드 최적화, 디버깅, 정규 표현식 등 자바스크립트 개발의 효율성을 높일 수 있는 방법과 도구 소개
  • NHN에서 자체적으로 만들어 지키고 있는 코딩 컨벤션 소개

 

책속으로

네이버의 UI 웹 페이지 가운데 대부분은 ‘Jindo’라는 자바스크립트 프레임워크를 사용합니다. 다양하고 복잡한 웹 UI를 포함하는 포털 사이트에서 수년간의 UI 개발로 다져진 탄탄한 API와 컴포넌트들은 여러분들이 귀찮아하고 어려워하는 호환성 문제를 말끔히 해결해 줄 수 있으며 개발 생산성을 높여줄 것입니다. 또한 네이버 개발자센터에서 Jindo 프레임워크 개발자와 이 책의 저자들의 직접적인 지원을 받을 수도 있습니다.

이 책은 네이버의 UI 개발을 담당하는 개발자들이 지금까지 경험한 지식을 일반화한 것입니다. 이 책에서는 갖은 브라우저 호환성 이슈를 해결하기 위해 노력하고 메일이나 지도 같은 대형 AJAX 서비스를 만드는 과정에서 축적한 지식을 풀어서 설명합니다. 네이버의 UI는 대부분 이 책에서 제시하는 코드 및 패턴과 크게 다르지 않습니다.

또한 이 책에서는 언어적인 문법을 자세히 설명하지 않지만 실무에서 바로 활용할 정도의 수준으로 실용성을 높이게끔 구성돼 있습니다. 프레임워크의 API만 나열하는 참고서 역할을 벗어나 책의 절반에 해당하는 분량을 예제 위주로 구성했습니다. 심지어 2부의 프레임워크의 설명에서도 많은 예제를 바탕으로 실제 사용법에 관해 자세히 설명합니다. 이처럼 예제 위주로 책을 구성하면 독자가 프로그래밍 서적을 읽고 나서 ‘이제 내가 실전에 활용하려면 어떻게 해야 할까?’라는 고민을 덜 수 있습니다.

아울러 이 책에서는 처음부터 끝까지 원리를 잘 설명하고 있습니다. 예제를 모두 따라 해보거나 암기 위주로 책을 보지 않아도 순간순간 다른 책에서는 보기 어려운 원리 설명이 분명히 크게 도움될 것입니다. 이 책의 저자들은 수년간 네이버의 UI를 설계하고 개발해 온 UI 개발의 최고 전문가로 인정받고 있습니다. 그뿐 아니라 웹 서비스의 프런트엔드 성능 교육을 전담하며 HTML5와 하이브리드 애플리케이션 같은 최신 기술에 대해서도 전문가로 활동하고 있습니다.

자바스크립트 UI 개발은 점점 복잡하고 어려워지고 있으며 전문 개발자 또한 매우 부족한 상황입니다. 이 책으로 더 많은 국내 개발자들이 UI 개발에 대한 기술력을 향상시키고 조금 더 쉽게 지식과 경험을 습득해서 이 분야의 전문가로 성장하기를 기대합니다.

“자, 이제 주저하지 마시고 이 책을 얼른 펼쳐서 읽어 나가시길 바랍니다.”

-- 추천사 중에서

이 책은 자바스크립트를 이용한 UI 개발 원리와 Jindo 프레임워크를 다루며 총 4부로 구성했다.

“1부 자바스크립트 프레임워크와 Jindo 프레임워크”에서는 AJAX의 등장 이후 변화한 웹 애플리케이션 개발 모델과 UI 개발의 정의, UI 개발에 필수 도구가 된 자바스크립트 프레임워크를 설명한다. 그리고 NHN에서 개발한 Jindo 프레임워크의 개발 배경과 기본 구조, 준비 사항을 살펴본다.

“2부 Jindo 프레임워크”에서는 Jindo 프레임워크에서 제공하는 객체와 사용법을 UI 개발 시 자주 접하는 사례와 원리를 중심으로 설명한다.

“3부 자바스크립트 UI 개발 실전 사례”에서는 네이버에서 볼 수 있는 대표적인 UI인 레이어와 드래그 앤드 드롭, 타이머, 애니메이션 UI, 롤링 UI, AJAX에서의 크로스 도메인과 히스토리 문제에 대해 원리와 구현 방법을, 예제를 토대로 설명한다. 마지막으로 미투데이 오픈 API와 AJAX를 이용한 도서 관리 웹 애플리케이션을 만들면서 이 책에서 설명한 내용을 종합적으로 살펴본다.

부록에서는 자바스크립트 개발의 효율성을 높이는 코드 최적화 방법과 디버깅 도구를 설명하고, 자바스크립트 개발 시 유용하게 활용할 수 있는 정규 표현식을 설명한다. 또한 NHN에서 자체적으로 만들어 준수하고 있는 코딩 컨벤션을 소개한다.

박재성

건국대학교 컴퓨터공학과를 졸업했으며, 다양한 웹 프로젝트에 참여했다. SK커뮤니케이션즈에서 자바 개발자로 일하던 중 프런트 엔드 개발에 흥미를 느껴 NHN으로 이직했다. NHN에서는 지식iN, 카페, 블로그 등 다양한 네이버 서비스 개발에 참여했고, 현재는 AjaxUI팀에서 자바스크립트 기술 지원/분석과 교육 업무 등을 담당하고 있다. HTML5를 이용한 신기술과 더 나은 자바스크립트 개발에 관심이 많다.

손병대

숭실대학교 미디어학부 졸업과 동시에 AjaxUI랩에서 인턴으로 시작해 지금까지 같은 랩에서 열심히 코딩을 즐기고 있다. 네이버 메인, 네이버 지도 개편 및 거리뷰 프로젝트에 참여했으며, 네이버 재팬 서비스를 지원하기도 했다. 현재는 자바스크립트로 할 수 있는 모든 것에 관심이 있으며, NodeJS와 하이브리드 앱 개발에 열정을 쏟고 있다.

  • Part 01 자바스크립트 프레임워크와 Jindo 프레임워크
    •  
    • 01_ 자바스크립트 프레임워크와 UI 개발
      • AJAX 기술의 등장과 UI 개발의 시작
      • 웹 애플리케이션과 UI 개발
      • 자바스크립트 프레임워크
      •  
    • 02_Jindo 프레임워크
      • Jindo 프레임워크의 역사
        • Jindo 프레임워크의 시작
        • Jindo 프레임워크의 변화
      • Jindo의 특징
      • Jindo 프레임워크의 구조
      • Jindo 프레임워크 사용
        • 프레임워크 다운로드
        • 프레임워크 포함
      •  
  • Part 02 Jindo 프레임워크
    •  
    • 03_요소 선택과 조작
      • 문서 객체 모델(DOM)과 요소 선택
        • 문서 객체 모델과 브라우저
        • 문서 객체 모델의 구조
        • 요소의 선택과 생성
      • CSS 선택자(Selector)와 요소 선택
        • CSS 선택자
        • CSS 선택자를 이용한 요소 선택
      • 요소 조작
        • 단일 요소 조작
        • 다수의 요소 조작
      •  
    • 04_ 브라우저와 문서 영역 조작하기
      • 브라우저 창과 문서 영역
      • 브라우저와 문서 영역 조작
        • 브라우저 조작하기
        • 문서 영역 조작하기
      •  
    • 05_이벤트와 이벤트 처리
      • 이벤트와 이벤트 처리
        • 이벤트의 역사
        • 이벤트 모델 - 캡처링과 버블링
        • 이벤트 핸들링
        • 이벤트와 기본 동작 중단
      • Jindo의 이벤트 핸들링과 함수 바인딩
        • 이벤트 정보 활용하기
        • 함수 활용하기
      •  
    • 06_데이터 다루기
      • 데이터 타입과 래퍼 객체
        • 기본 데이터 타입과 복합 데이터 타입
        • 객체
        • 기본 데이터 타입과 래퍼 객체
      • Jindo의 데이터 래퍼 객체
        • Jindo 래퍼 객체의 구조
        • $S( ) 객체 - 문자열
        • $A( ) 객체 - 배열
        • $H( ) 객체 - 해시 테이블
        • $Json( ) 객체 - JSON
      •  
    • 07_폼 데이터 검증
      • 이벤트를 활용한 폼 데이터 검증
        • onsubmit 이벤트를 활용한 폼 데이터 검증
        • onsubmit 이벤트를 발생시키는 여러 가지 방법
        • submit( ) 메서드를 이용한 폼 검증
        • Jindo의 $Form( ) 객체
        • 입력 요소의 값을 구하거나 설정하기
        • 폼 요소에 접근하기
        • 입력 요소 활성/비활성화하기
        • 입력 데이터로 쿼리스트링 만들기
      • 간단한 데이터 검증
        • 입력 요소에 값을 입력했는지 검증하기
        • 입력 값이 유효한 범위 안에 있는지 확인하기
        • 정규 표현식을 이용한 특정 형태의 값 검증
      •  
    • 08_서버와 통신하기
      • XHR 객체 이해하기
        • XHR 객체의 역사
        • XHR 객체의 속성, 메서드, 이벤트
        • XHR 객체의 한계
      • XHR 객체로 통신하기
        • XHR 객체 생성
        • 요청하기
        • setRequestHeader( ) 메서드를 이용한 요청 헤더 설정
        • send( ) 메서드를 이용한 요청 보내기
        • 응답 데이터 처리하기
      • $Ajax( ) 객체 기본 사용법
        • 객체 생성 및 초기화
        • 옵션 지정
        • 요청하기
        • 응답받기
        • 콜백 함수 실행
        • 오류 처리
      • $Ajax( ) 객체 실습하기
        • 환경 설정
        • 데이터 받기
      • 그 외의 $Ajax( ) 객체 사용법
        • 요청 취소 및 재요청하기
        • 헤더 설정하기
    • 09_클래스와 템플릿
      • 객체지향적으로 설계하기
        • 일반적인 객체지향 프로그래밍 언어와 자바스크립트의 차이
        • 간단한 클래스 구현
        • 프로토타입
        • 클래스의 인스턴스와 정적 클래스
        • 클래스 생성하기
      • 템플릿을 활용한 DOM 구성
        • 반복적인 DOM 구성 작업의 문제점
        • 템플릿 사용법
    • 10_ 그 밖의 유용한 객체
      • 날짜 조작하기
        • $Date( ) 객체 사용법
        • 형식 문자열을 이용한 날짜 출력
      • 쿠키 사용하기
        • 쿠키의 동작 원리
        • $Cookie( ) 객체 사용법
      • 브라우저 정보 확인
        • $Agent( ) 객체 사용법
        • 브라우저별 예외 처리
        • 새롭게 추가된 브라우저 정보 - 위치 정보
      •  
  • Part 03 자바스크립트 UI 개발 실전 사례
    •  
    • 11_레이어 다루기
      • 레이어 보이기와 숨기기
        • 레이어를 보이거나 숨기는 두 가지 방법
        • 안 보이는 요소의 크기 구하기
      • 레이어 배치하기
        • static - 문서의 흐름대로 배치하기
        • relative - 요소의 상대 위치를 계산해 배치하기
        • fixed - 스크롤과 관계없이 화면의 특정 위치에 배치하기
        • absolute - 문서의 절대 위치에 배치하기
        • position 속성의 특징을 이용한 예제
      • 영역 크기 구하기
        • client 영역과 offset 영역
        • scroll 영역
      • 레이어 응용하기
        • 화면 중앙에 레이어 나타내기
        • 모달 레이어 만들기
        • 공지 사항 레이어 만들기
      •  
    • 12_드래그 앤드 드롭
      • 드래그 앤드 드롭 과정
        • 요소의 이동과 위치
        • 이벤트
      • 기본 구현
        • onmousedown 이벤트 핸들러 구현
        • onmousemove 이벤트 핸들러 구현
        • onmouseup 이벤트 핸들러 구현
        • onmousemove 이벤트 영역 조정
        • 마우스 포인터의 위치 조정
      • 고급 구현 및 문제 해결
        • 드래그 영역 제한하기
        • 드래그 요소에 효과주기
        • 드롭 영역 판별하기
        • 인터넷 익스플로러 문제 해결
        • 클래스로 구현하기
      • HTML5의 드래그 앤드 드롭
        • 드래그 앤드 드롭 구현 과정
        • 드래그 앤드 드롭 구현하기
      •  
    • 13_타이머
      • 기본 사용법
        • 일반적인 활용법
        • 콜백 함수의 this 키워드 참조 문제 해결
      • 응용 패턴 익히기
        • 실시간으로 글자 수 세기
        • 자동으로 콘텐츠 교체하기
        • 이벤트 지연시키기
      •  
    • 14_애니메이션 UI
      • 구현방법
      • CSS 속성을 이용한 애니메이션
        • transition 속성을 이용한 애니메이션
        • animation 속성을 이용한 애니메이션
      • 타이머를 이용한 애니메이션
        • 페이드 효과
        • 아코디언 메뉴
        • 스크립트 기반 애니메이션의 고려사항
      •  
    • 15_AJAX 고급 응용
      • 크로스 도메인 문제
        • 프록시(Proxy)를 이용한 전통적인 해결 방법
        • JSONP를 이용한 해결 방법
        • 플래시 객체를 이용한 해결 방법
      • AJAX 히스토리
        • 브라우저 뒤로 가기 버튼의 동작
        • URL 해시값의 이해
        • AJAX 히스토리의 동작 원리
        • 간단한 AJAX 히스토리 구현
        • iFrame을 이용한 AJAX 히스토리 구현
        • HTML5를 이용한 AJAX 히스토리 구현
      •  
    • 16_실시간 급상승 검색어의 롤링 UI
      • UI 요구사항
        • 원리
      • 롤링 동작 구현
        • 표시할 목록 작성
        • CSS 스타일 작성
        • 항목 변경 함수 구현
        • 애니메이션 처리
      • 마우스 오버 동작 처리
        • CSS 스타일 추가
        • 변수 추가
        • 목록 및 롤링 함수 수정
        • 이벤트 핸들러 작성
      • 재사용 가능한 클래스 객체로 만들기
        • 롤링 UI 객체화
        • 롤링 UI 객체 생성 및 실행
      •  
    • 17_ 도서 관리 웹 애플리케이션 만들기
      • 웹 애플리케이션 기획
      • 요구사항
        • 핵심 기능 추출하기
        • UI 정의하기
      • 인터페이스 만들기
        • HTML 코드 만들기
        • HTML 코드에서 템플릿 분리하기
      • 애플리케이션 설계
        • 자바스크립트와 MVC 패턴
        • MVC 패턴 적용을 위한 고민
      • 모델 만들기
        • 미투데이 오픈API
        • 책 정보 만들기
        • 사서 만들기
      • 컨트롤러 만들기
        • 데이터 모델과 컨트롤러 연동
        • 도서 목록 데이터 출력하기
      • 이벤트 적용
        • CSS 클래스를 이용한 이벤트 처리
        • 기능 버튼 구현
      • 기능 개선
        • 상태 정보에 완료 날짜 추가하기
        • 지속적인 기능 개선을 위한 준비
      •  
  • Part 04 부록
    •  
    • 부록 A _코드 최소화를 통한 성능 향상
      • 최소화(Minification)의 원리
        • 주석 및 공백 제거
        • 변수명 축약
        • 문법적 특성을 이용한 축약
      • 최소화 도구 – YUI Compressor
      • 최소화 코드 복원 – 코드 포매팅
      •  
    • 부록 B _디버깅
      • 브라우저 개발 도구
        • 개발 도구
      • HTTP 트래픽 정보를 활용한 디버깅
      •  
    • 부록 C _정규 표현식
      • 정규 표현식과 문자열
      • 정규 표현식 선언하기
      • 캡처링(Capturing) 사용하기
      • 비캡처링(Non-Capturing) 활용
      • test( ) 메서드와 exec( ) 메서드의 성능 차이
      • lastIndex 속성과 g플래그 옵션
      •  
    • 부록 D _자바스크립트 코딩 컨벤션
      • 네이밍 규칙
        • 공통 네이밍 규칙
        • 네임스페이스 명명 규칙
        • 클래스 이름
        • 함수 이름
        • 변수 이름
        • 상수 이름
      • 코드 작성 규칙
        • 들여쓰기
        • 중괄호
        • 공백
        • 빈 줄
        • 새 줄
        • 줄 바꿈
      • AJAX 응답 포맷 작성 규칙
        • AJAX 통신 시 응답 포맷
      • 소스 코드 표기법

예제코드 관련 GitHub 페이지

관련 글