Top

프레임워크 없는 프론트엔드 개발 [자바스크립트 프레임워크 뜯어보기]

  • 원서명Frameworkless Front-End Development: Do You Control Your Dependencies Or Are They Controlling You? (ISBN 9781484249666)
  • 지은이프란세스코 스트라츨로(Francesco Strazzullo)
  • 옮긴이류영선
  • ISBN : 9791161754895
  • 25,000원
  • 2021년 01월 21일 펴냄
  • 페이퍼백 | 268쪽 | 188*235mm
  • 시리즈 : 웹 프로페셔널

책 소개

소스 코드 파일은 여기에서 내려 받으실 수 있습니다.
https://github.com/AcornPublishing/frameworkless-front-end

요약

프레임워크 없이 효과적으로 작업하는 방법과 프로젝트에 적합한 프레임워크를 선택하는 방법의 두 가지 주제를 다룬다. 프레임워크나 서드파티 라이브러리를 사용하지 않고 프론트엔드 애플리케이션을 개발하는 방법을 알아보고 이에 따르는 자유도 알아본다. 또한 기술 부채 개념을 분석하고, 프레임워크가 프로젝트 수명에 어떤 영향을 주는지 분석한다. 이 책으로 프레임워크 없이 효과적으로 코딩하는 데 필요한 포괄적이고 명확한 가이드뿐만 아니라 기술적 의사 결정의 원칙도 배울 수 있다.

이 책에서 다루는 내용

프레임워크나 서드파티 라이브러리를 사용하지 않고 프론트엔드 애플리케이션을 개발하는 방법을 알아본다. 또한 새 프로젝트에 '프레임워크 없는' 접근 방식을 선택할 때 필요한 기술을 제공하고 그에 따른 자유도 알아본다.
실용적 방법과 도구를 사용해 비기능적 요구 사항을 이해한 후 명확하고 합리적인 방식으로 중요한 문제들을 해결해 나간다. 상태 관리, 라우팅 시스템 만들기, fetch를 사용한 REST 클라이언트 생성 같은 중요한 주제들의 질문에 대한 답변과 함께 지속 가능한 기능적 대안을 제공한다. 또한 프로젝트에서 잘못된 프레임워크나 도구를 선택하면 발생할 수 있는 장단점과 위험 요소를 알아본다.
그리고 기술 부채 개념을 분석하고, 프레임워크가 프로젝트 수명에 어떤 영향을 주는지 분석한다. 프레임워크 없이 효과적으로 코딩하는 데 필요한 포괄적이고 명확한 가이드뿐만 아니라 기술적 의사 결정의 원칙도 배울 수 있다.

프레임워크 없는 운동

프레임워크 없이 효과적으로 작업하는 방법과 프로젝트에 적합한 프레임워크를 선택하는 방법의 두 가지 주제를 다룬다. 이 주제를 제대로 연구하고자 동료인 안토니오 델아바(Antonio Dell’Ava) 및 알레산드로 바이올리니(Alessandro Violini)와 함께 프레임워크 없는 운동(Frameworkless Movement)을 만들었다. 이 운동의 선언문은 공식 웹 사이트(http://frameworklessmovement.org)에 게시돼 있다.
이 운동의 목적은 ‘프레임워크 없는’이라는 주제에 대한 인식을 고취하고 이 주제를 논의할 커뮤니티를 만드는 것이다. 주요 관심사 중 하나는 사람들이 프레임워크 없이 작업하는 것이 진정으로 가능하다는 것을 이해하게 돕는 것이다. 이 책은 사람들이 기술적 의사 결정의 중요성을 이해하게 돕는 노력 중 하나다.

저자/역자 소개

지은이의 말

프레임워크 없이 프론트엔드 애플리케이션을 효과적으로 개발하는 방법에 관한 책을 읽어야 하는 이유는 무엇일까? 때로는 프레임워크만으로 작업을 수행하기가 충분하지 않기 때문이다. 이 책은 프레임워크 없이 애플리케이션을 개발하는 전략을 이해하는 데 도움을 주고 적합한 작업에 맞는 적합한 도구를 선택하는 방법도 알려줄 것이다.

지은이 소개

프란세스코 스트라츨로(Francesco Strazzullo)

경험 많은 프론트엔드 엔지니어, 자바스크립트 트레이너이자 마르카 사용자 그룹(MUG, Marca User Group)의 공동 설립자다. 유럽 전역의 콘퍼런스와 미트업 행사에서 발표했고 여러 기술 서적의 기술 감수자며 블로그에 기술 기사를 게재하고 있다. 새로운 API의 시험에 항상 열정적이며 새로운 것을 배우는 가장 좋은 방법은 다른 사람들에게 설명하고 가르치는 것이라고 확신한다. 프레임워크를 사용하지 않고 소프트웨어를 개발하는 데 관심이 있는 사람들의 그룹인 프레임워크 없는 운동(Frameworkless Movement)을 공동 설립했다.

옮긴이의 말

‘프레임워크 없는 운동(Frameworkless Movement)’을 들어본 적이 있는가? 이 운동의 목적은 ‘프레임워크 없는’이라는 주제를 논의할 커뮤니티를 만들고, 사람들이 프레임워크 없는 프론트엔드 애플리케이션 개발이 가능하다는 것을 이해하도록 돕는 데 있다.
처음 제이쿼리가 등장했을 때만 해도 브라우저 간 호환성이 보장되지 않았기 때문에 이런 프레임워크가 제공하는 표준화된 API와 다양한 도구의 지원은 프론트엔드 애플리케이션 개발자에게 날개를 달아주는 역할을 했다. 그러나 앵귤러JS, 리액트, 앵귤러에 이르기까지 자바스크립트 프레임워크 전성시대라고 불릴 만큼 고성능의 다양한 프레임워크가 등장하면서 오히려 개발자가 공부해야 할 주제는 많아지고 어떤 프레임워크를 사용해야 할지 모르게 되는 소위 ‘자바스크립트 피로(javascript fatigue)’가 점점 커지게 됐다.
이 책은 프레임워크나 서드파티 라이브러리를 사용하지 않고 프론트엔드 애플리케이션을 개발하는 방법을 알아본다. 현재 브라우저 간 호환성이 잘 보장되고 있고 표준 ECMAScript의 지원 범위가 넓어짐에 따라 대부분의 프론트엔드 애플리케이션을 프레임워크 없이 작성할 수 있게 됐다. 그러나 이 책은 프레임워크 없는 옵션만 옳다고 주장하지는 않는다. 때에 따라서는 적절한 프레임워크의 선택이 개발 시간의 단축과 프로젝트의 성공에 큰 도움이 된다는 사실을 인정하고 체계적인 분석과 의사 결정 기법에 따라 ‘적합한’ 프레임워크를 선택하는 방법도 설명한다.

옮긴이 소개

류영선

소프트웨어 엔지니어로서 오랫동안 웹 브라우저와 웹 서버를 개발했다. 그 경험을 바탕으로 현재는 W3C와 다양한 국제 표준화 단체에서 웹과 관련된 표준화 업무를 담당하고 있다. 최근에는 웹 기술을 PC에서 벗어나 모바일이나 스마트TV, 디지털 사이니지(Digital Signage), 웨어러블(Wearable), 오토모티브(Automotive) 등 다양한 IoT 디바이스에 접목하는 오픈 웹 플랫폼(Open Web Platform)에 관심을 갖고 관련 기술을 연구 중이다. 아울러 워크숍이나 세미나 강연과 학술 기고를 통해 오픈 웹 플랫폼과 웹 기술의 전파에 힘쓰고 있다.
옮긴 책으로 에이콘 출판사에서 펴낸 『반응형 웹 디자인』(2012)과 『HTML5 웹소켓 프로그래밍』(2014), 『WebRTC 프로그래밍』(2015), 『자바스크립트 디자인 패턴』(2016), 『자바스크립트 언락』(2017), 『객체지향 자바스크립트 3/e』(2017), 『사물인터넷 자바스크립트 프로그래밍』(2018), 『모던 C++ 프로그래밍 쿡북』(2019), 『산업인터넷 애플리케이션 개발』(2020), 『리액트 머티리얼 UI 쿡북』(2020) 등 다수가 있다.

목차

목차
  • 1장. 프레임워크에 대한 이야기
    • 프레임워크란?
      • 프레임워크와 라이브러리 비교
      • 프레임워크 방식
    • 자바스크립트 프레임워크 연혁
      • 제이쿼리
      • 앵귤러JS
      • 리액트
      • 앵귤러
    • 기술 부채
      • 프레임워크 비용
    • 기술 투자
    • 요약

  • 2장. 렌더링
    • 문서 객체 모델
    • 렌더링 성능 모니터링
      • 크롬 개발자 도구
      • stats.js
      • 사용자 정의 성능 위젯
    • 렌더링 함수
      • TodoMVC
      • 순수 함수 렌더링
    • 동적 데이터 렌더링
      • 가상 DOM
    • 요약

  • 3장. DOM 이벤트 관리
    • YAGNI 원칙
    • DOM 이벤트 API
      • 속성에 핸들러 연결
      • addEventListener로 핸들러 연결
      • 이벤트 객체
      • DOM 이벤트 라이프사이클
      • 사용자 정의 이벤트 사용
    • TodoMVC에 이벤트 추가
      • 렌더링 엔진 리뷰
      • 기본 이벤트 처리 아키텍처
    • 이벤트 위임
    • 요약

  • 4장. 웹 구성 요소
    • API
      • 사용할 수 있을까?
      • 사용자 정의 요소
    • TodoMVC에 웹 구성 요소 사용
    • 웹 구성 요소와 렌더링 함수
      • 코드 스타일
      • 테스트 가능성
      • 휴대성
      • 커뮤니티
    • 사라지는 프레임워크
    • 요약

  • 5장. HTTP 요청
    • 간단한 역사: AJAX의 탄생
    • todo 리스트 REST 서버
      • REST
    • 코드 예제
      • 기본 구조
      • XMLHttpRequest
      • Fetch
      • Axios
      • 아키텍처 검토
    • 적합한 HTTP API를 선택하는 방법
      • 호환성
      • 휴대성
      • 발전성
      • 보안
      • 학습 곡선
    • 요약

  • 6장. 라우팅
    • 단일 페이지 애플리케이션
    • 코드 예제
      • 프래그먼트 식별자
      • 히스토리 API
    • Navigo
    • 올바른 라우터를 선택하는 방법
    • 요약

  • 7장. 상태 관리
    • ToDoMVC 애플리케이션 리뷰
    • 모델-뷰-컨트롤러
      • 옵저버블 모델
    • 반응형 프로그래밍
      • 반응형 모델
      • 네이티브 프록시
    • 이벤트 버스
      • 프레임워크 없는 구현
      • Redux
    • 상태 관리 전략 비교
      • 모델-뷰-컨트롤러
      • 반응형 프로그래밍
      • 이벤트 버스
    • 요약

  • 8장. 적합한 작업을 위한 적합한 도구
    • 자바스크립트 피로
    • ‘적합한’ 프레임워크
    • 안티패턴
      • 노후화에 대한 두려움
      • 하이프 곡선 따르기
      • 일반적인 경로
      • 전문가
      • 분노 주도 결정
    • 프레임워크 없는 운동 선언문
      • 첫 번째 원칙
      • 두 번째 원칙
      • 세 번째 원칙
      • 네 번째 원칙
    • 도구
      • 마테오 바카리의 도구
      • 트레이드오프 슬라이드
      • 프레임워크 나침반 차트
      • 다른 도구
    • 요약

도서 오류 신고

도서 오류 신고

에이콘출판사에 관심을 가져 주셔서 고맙습니다. 도서의 오탈자 정보를 알려주시면 다음 개정판 인쇄 시 반영하겠습니다.

오탈자 정보는 다음과 같이 입력해 주시면 됩니다.

(예시) p.100 아래에서 3행 : '몇일'동안 -> 며칠동안

정오표

정오표

[p.140 : 9행]
const deleteTodo = i`d => {

->

const deleteTodo = id => {