DIL: 모던 리액트 딥 다이브, 0주차-1

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 스터디 OT
시간 및 위치: 2024년 2월 29일 8시~8시 20분, 디스코드

---

DIL-week0-1_2024-02-29

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ------ | ------------------------------ | ----------- | | 0주차 | 1, 2장 | 리액트 핵심요소와 자바스크립트 | ~19p |

오늘 읽은 내용을 markdown으로 간단히 메모
ebook 구매 후 "들어가며"까지 읽음(1~19p)
읽은 시간: 10시 15분~12시 5분

서문

• CRA는 사실상 끝 => Next.js Remix
• 책에서는 React 17~18 비교, NextJS는 13.4까지
• 2018 기점으로 JQuery를 역전
• 메타의 지원

명시적 상태 변경

• React는 단방향 바인딩만 지원 <-> Angular 양방향 바인딩
  • React의 명시적 상태 변경? setName() 처럼 "명시적"으로 호출된 상태 변경점을 찾을 수 있다.
  • 간단함과 유연성 (like recoil)
  • 데이터의 흐름을 읽기 쉬움 (비교적 변화가 단순하기 때문)

JSX, JavaScript XML

• Angular는 string template을 사용 ex) ngIf 등의 전용 문법
• React는 HTML, JS 문법에 몇 가지 특징을 가미한 수준
  • 초기 이해가 쉽다. 배우기 쉽고 간결함
  • 성능 최적화 등, 프레임워크의 깊은 이해에는 상대적으로 난이도가 있는 편(Vue, Svelte와 비교)

역사

React.js:The Documentary

• 2010년 이전
  • LAMP 스택 (Linux, Apache, MySQL, PHP)
  • MPA, HTML 페이지를 수동적으로 보여주던 FE
• IE 8: 로컬 스토리지의 등장
• JQuery: js 비공식 표준으로 자리 잡기 시작, 플러그인 다수
• 2011년: WebSocket, Canvas, SVG, Geolocation, ES5
  • 적극적으로 DOM 수정, Ajax로 Client 서버 통신 시작
  • AngularJS와 CoffeeScript, Backbone.js가 등장 (MVVM, MVC 패턴)
• 페이스북의 상황
  • 2011년에 처음 페이스북 타임라인 생김
  • 자바스크립트 번들을 줄이고자 했으나, 실시간성이 강조된 기능과 MPA의 뚜렷한 한계가 있음
• 페이스북의 <스파르탄 프로젝트>
  • 애플의 강력한 iOS 앱 규제
  • HTML5로 하이브리드 페이스북 앱을 만들고자 함
  • 프로젝트 실패: 네이티브 앱이 훨씬 빠르고 안정적, => 18개월 동안 재개발

BoltJS

• 페이스북의 새로운 프레임워크 구축 시도
• 깃허브 소스코드의 공개와 삭제
• FBolt, Functional Bolt => 함수형을 지향하는 Bolt
• 기존 양방향 바인딩 구조와 문제점
  • 모델과 뷰가 밀접 관계
  • 변경된 DOM 추적이 어렵고, 많은 버그 발생
  • FBolt에서 영감을 얻은 개선 방향: DOM을 새로 랜더링

페이스북의 대안, 응애 React

• 리액트 첫 프로젝트: 댓글/공유 버튼이 있는 UFI, Universal Feedback Interface를 구현 (즉각적 반응 속도, 모든 포스트에 존재)
  • JSX 구문과 Flux 패턴
• 페이스북이 인스타그램을 인수: 리액트로 개발 시작
• JSConf US 2013에서 React와 JSX를 공개~! 오픈소스!

당시 회의적인 의견과 비판

• SoC 원칙에 위배되어 보인다 => 서로 다른 방식으로 관심사를 분리하기 때문
  • 기존: HTML, CSS, JS
  • React: 역할에 따른 관심사 분리
• 새로운 문법과 관점을 전달할 방법 모색

빛빛 리액트

• 오픈소스 컨트리뷰터! => 외부 개발자, 원동력, 커뮤니티
• 커뮤니티 소식지를 올림: 페이스북 팀 밖에서 일어나는 리액트 글 공유/팀 인터뷰
• Using React to speed up the Khan Academy question editor
  • 최초 리액트 외부 프로젝트
  • 리액트의 선언적 인터페이스로 (1)컴포넌트 트리 간단작성, (2)컴포넌트 랜더링 필요성 결정, (3)필요한 영역 DOM 변경
• Why did we build React?
  • 리액트 개발자가 작성
  • 이미 타 MVC 프레임워크가 있음에도 React를 개발한 이유
  • 시간에 흐름에 따라 변경되는 데이터를 효율적으로 나타내는 재사용 가능한 컴포넌트
• The Future of JavaScript MVC Framework
  • shouldComponentUpdate를 활용, 불필요한 랜더링 생략이 주는 성능적 이점, MVC 패턴보다 -> 리액트 대세 예견
• 라이브러리 등장: 커뮤니티의 지지를 받으며 성장한다.
  • 상태 관리, 라우터, 서버 사이드 랜더링
• 리액트를 채택
  • 야후! 메일: C++, HTML => PHP, JS => React, Flux
  • 넷플릭스(30일 동안 리액트와 백본으로 프로토타입을 만든 후 결정)
    • 코드 줄음, 완만한 학습 곡선, 빠른 기능 추가
    • 2015년 6월에 리액트로 제작한 홈페이지 공개

현재와 미래

• 리액트 버전
  • 2013년 5월: 최초 공개, 0.3.0
  • 0.14.7 이후에 => 15.0.0으로 버전 업 (실수가 아닐까?)
  • 1.0.0~15.0.0 사이 버전이 없지만, semantic versioning 하고 있음
• Angular, Vue와 달리 "웹 개발"을 위한 프레임워크를 지향하지 않으므로, 다양한 라이브러리와 함께 사용할 수 있다.
• 국내 IT
  • 토스 / slash 라이브러리
  • 카카오
  • 네이버의 PC 메인, 지도 메인

---

영어공부
e.g. (Latin)exempli gratia, 예시
i.e. (Latin)id est, 다시 말하자면