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

[목 차]

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

★ 이 책에서 다루는 내용 ★

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

★ 프레임워크 없는 운동 ★

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

★ 옮긴이의 말 ★

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

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