[독서] 프레임워크 없는 프론트엔드 개발

교보문고 링크

8월의 두번째 독서는 프레임워크 없는 프론트엔드 개발 이다.

리엑트가 없는 세상에서는 어떻게 프론트엔드 개발을 할 수 있을까에 대한 고민으로 찾아본 책입니다.

금년도 나온 최신 책으로 저자인 프란세스코 스트라츨로는 프레임워크 없이 개발하기 캠페인을 주도적으로 기획하고 이끌고 있습니다.

저자는 어플리케이션 코드를 어떻게 구성해야 하는지에 대한 특별한 형식이 존재한다면 해당 도구는 프레임워크라고 정의하고 있습니다.

lodash, axios, date-fns와 같은 패키지들은 코드 구성에 대한 특별한 형식이 존재하지 않으나,

angular ,react, vue는 특정한 코드 구성 형식을 가지고 있기에 프레임워크라고 말합니다.

프론트엔드 개발을 하며 필수적으로 구현해야할 요소들을 챕터로 나누어 직접 구현해보는 형식으로 책이 구성되어있습니다.

다음은 이 책에서 주로 다루는 내용들입니다.

렌더링

DOM 이벤트 관리

웹 구성 요소

HTTP 요청

라우팅

상태관리

가상돔에 대해 매우 간략하게 나마 구현해보기도 하며
웹 구성요소 챕터에서는 프레임워크를 사용하면 별로 사용해볼 기회가 없을 template 태그를 사용해 바닐라 자바스크립트로 동적인 콘텐츠를 어떻게 생성하는지에 대해 설명해줍니다.

요 근래에는 쉽게 보지 못하는 XMLHTTPRequest 객체를 가지고 http-client 래퍼를 만들어보고,
fetch, axios를 가지고 동일한 인터페이스에서 어떻게 구현해보는지 알아봅니다.

상태관리 챕터에서는 MVC, 옵저버블, 이벤트 버스 패턴으로 각각 어떻게 내부상태를 관리하는지 알아봅니다.

리엑트를 맨 처음 배울떄 상태관리 툴로 리덕스를 배웠었는데, 리덕스가 이벤트 버스 패턴을 따르고 있는지는 이번 책을 통해 새로 배웠습니다.

최신 기술들을 빨리 배워서 접목하고자 왜 이런 기술들이 나왔는지에 대해 먼저 이해하기보다, 산업에서 많이 쓰일 유력기술이기에 급하게 배워서 사용하는 경우가 종종 있습니다.

이 책은 그렇게 급하게 지어올린 건물의 지지대를 뒤늦게라도 보수공사할 수 있게 도와주는 책입니다.

아쉬운 점은 책의 많은 부분이 예제코드로 이루어져 있는데, 각 코드가 어떤 파일명을 가지고 있는지 나타나있지 않아 이 코드가 어디에서 임포트되어서 사용되었고 어떤 역할을 하는지 파악하는데 혼란이 있을 수 있습니다.

깃허브 레포를 통해 책에 있는 모든 예제 코드를 제공해주고 있지만 항상 책과 노트북을 번갈아가며 읽는 것은 굉장히 번거롭고 고통스러운 일이 될 수 밖에 없습니다.