프레임워크 없는 프론트엔드 개발 [자바스크립트 프레임워크 뜯어보기]
- 원서명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)에 게시돼 있다.
이 운동의 목적은 ‘프레임워크 없는’이라는 주제에 대한 인식을 고취하고 이 주제를 논의할 커뮤니티를 만드는 것이다. 주요 관심사 중 하나는 사람들이 프레임워크 없이 작업하는 것이 진정으로 가능하다는 것을 이해하게 돕는 것이다. 이 책은 사람들이 기술적 의사 결정의 중요성을 이해하게 돕는 노력 중 하나다.
목차
목차
- 1장. 프레임워크에 대한 이야기
- 프레임워크란?
- 프레임워크와 라이브러리 비교
- 프레임워크 방식
- 자바스크립트 프레임워크 연혁
- 제이쿼리
- 앵귤러JS
- 리액트
- 앵귤러
- 기술 부채
- 프레임워크 비용
- 기술 투자
- 요약
- 프레임워크란?
- 2장. 렌더링
- 문서 객체 모델
- 렌더링 성능 모니터링
- 크롬 개발자 도구
- stats.js
- 사용자 정의 성능 위젯
- 렌더링 함수
- TodoMVC
- 순수 함수 렌더링
- 동적 데이터 렌더링
- 가상 DOM
- 요약
- 3장. DOM 이벤트 관리
- YAGNI 원칙
- DOM 이벤트 API
- 속성에 핸들러 연결
- addEventListener로 핸들러 연결
- 이벤트 객체
- DOM 이벤트 라이프사이클
- 사용자 정의 이벤트 사용
- TodoMVC에 이벤트 추가
- 렌더링 엔진 리뷰
- 기본 이벤트 처리 아키텍처
- 이벤트 위임
- 요약
- 4장. 웹 구성 요소
- API
- 사용할 수 있을까?
- 사용자 정의 요소
- TodoMVC에 웹 구성 요소 사용
- 웹 구성 요소와 렌더링 함수
- 코드 스타일
- 테스트 가능성
- 휴대성
- 커뮤니티
- 사라지는 프레임워크
- 요약
- API
- 5장. HTTP 요청
- 간단한 역사: AJAX의 탄생
- todo 리스트 REST 서버
- REST
- 코드 예제
- 기본 구조
- XMLHttpRequest
- Fetch
- Axios
- 아키텍처 검토
- 적합한 HTTP API를 선택하는 방법
- 호환성
- 휴대성
- 발전성
- 보안
- 학습 곡선
- 요약
- 6장. 라우팅
- 단일 페이지 애플리케이션
- 코드 예제
- 프래그먼트 식별자
- 히스토리 API
- Navigo
- 올바른 라우터를 선택하는 방법
- 요약
- 7장. 상태 관리
- ToDoMVC 애플리케이션 리뷰
- 모델-뷰-컨트롤러
- 옵저버블 모델
- 반응형 프로그래밍
- 반응형 모델
- 네이티브 프록시
- 이벤트 버스
- 프레임워크 없는 구현
- Redux
- 상태 관리 전략 비교
- 모델-뷰-컨트롤러
- 반응형 프로그래밍
- 이벤트 버스
- 요약
- 8장. 적합한 작업을 위한 적합한 도구
- 자바스크립트 피로
- ‘적합한’ 프레임워크
- 안티패턴
- 노후화에 대한 두려움
- 하이프 곡선 따르기
- 일반적인 경로
- 전문가
- 분노 주도 결정
- 프레임워크 없는 운동 선언문
- 첫 번째 원칙
- 두 번째 원칙
- 세 번째 원칙
- 네 번째 원칙
- 도구
- 마테오 바카리의 도구
- 트레이드오프 슬라이드
- 프레임워크 나침반 차트
- 다른 도구
- 요약
도서 오류 신고
정오표
정오표
[p.140 : 9행]
const deleteTodo = i`d => {
->
const deleteTodo = id => {