2024-04-27.md

DIL: 모던 리액트 딥 다이브, 8주차-4

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부

DIL-week6-4_2024-04-27

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ---------- | -------------------------------------------------------- | ----------- | | 8주차 | 14장, 15장 | 웹사이트 보안을 위한 리액트와 웹페이지 보안 이슈, 마치며 | 903~917p |

오늘 읽은 내용을 markdown으로 간단히 메모

마치며

리액트 애플리케이션 고려사항

레거시 유지보수 시

최소 16.8.6에서 가능하다면 17 버전
레거시 클래스 컴포넌트는?
- 기존 코드와 함께 동작하므로 Hooks을 점진적 채택 / 대규모 재작성을 피하자
- 리액트는 클래스 컴포넌트를 계속 지원할 예정 https://legacy.reactjs.org/docs/hooks-intro.html#gradual-adoption-strategy

인터넷 익스플로러 11 지원 시

인터넷 익스플로러 11을 지원하지 않는 대표적 라이브러리
- 리액트 18 이후
- Next.js 13 이후
- query-string 6.x 버전 이후
문제가 없는지 판단 후 라이브러리 설치 필요

서버 사이드 랜더링 애플리케이션 고려하기

자바스크립트 코드의 실행 속도에 의존적일수록, 평균적으로 우수한 성능을 지닌 웹사이트를 제공하기 어렵다.
- 사용자별 모바일 기기의 성능은 천차만별
대부분의 싱글 페이지 어플리케이션은 Lighthouse, WebPageTest, Chrome Devtools에서 좋은 결과를 얻기 어렵다.
- 관리자 페이지, 이벤트 페이지, 혹은 서버 준비가 여의치 않은 상황을 제외하면 (여유가 된다면) 시작부터 서버 사이드 랜더링을 고려하는 것이 좋다.
- Next.js, Remix, Hydrogen(Shopify에서 만듦)

상태 관리 라이브러리는 필요할 때만

추세
- 옛날에 리액트+리덕스를 세트로 쓸 때가 있었음
- 현재 다양한 상태 관리 라이브러리가 있고, Context API로 상태 주입도 가능
상태 관리 라이브러리가 필요한가?
- 애플리케이션에서 관리해야할 상태가 많은가?
  - 문서 편집기, 상태 합성

리액트 의존성 라이브러리 설치 조심

react-**
- peerDependencies의 리액트 버전을 확인해야 한다.
- 리액트 16.8버전 이상(훅), 리액트 18(외부 상태관리 방법 변경)

리액트

리액트는 지금 가장 널리 쓰이는 프런트엔드 라이브러리, 완벽하지 않음
- 클래스 컴포넌트 -> 함수 컴포넌트 짬뽕 자료들
  - Svelte, Vue 공식문서가 깔끔함

리액트 규칙들(useEffect 콜백에 async 안됨, 변수와 useState, 의존성 배열, 클린업)

Svelte 코드 예시: 더 직관적으로 이해할 수 있음

<script>
  import {getFruits} from './service';
  import {onMount, onDestory} from 'svelte';

  let fruits = []
  let interval

  onMount(async () => {
    fruits = await getFruits()

    interval = setInterval(() => {
      fruits = [...fruits, 'banana']
    })
  })

  onDestory(() => clearInterval(interval))
</script>

<ul>
  {#each fruits as fruit}
  <li>{fruit}</li>
  {/each}
</ul>

방대한 자유: 파편화된 리액트 기술

파편화
- 스타일: 외부 스타일 시트 Import, inline, CSS Module, styled-components, emotion
- 상태관리: Redux, MobX, Jotai, Zustand, React Tracked, Valtio
- 데이터 fetch
단점
- 비직관적인 JSX
- 급진적으로 변화하는 API
리액트를 De facto standard로 여긴다면, 급진적으로 변화하는 프론트엔드 생태계의 새로운 변화를 받아들이고 유연하게 적응하기 어려워질 것

오픈소스 생태계의 명암

페이스북 라이선스 이슈

오픈소스 라이센스 중 가장 널리는 라이센스 MIT
- 상업적 이용, 배포, 개인적 이용에 대한 제약 없이 소프트웨어를 취급할 수 있는 자유로운 라이센스
이슈
1. 페이스북의 React, Immutable, Jest 등에 BSD+Patents 사용
- https://github.com/facebook/react/blob/d63249d03488fec1ea92a81ba29f0e87a82feeae/PATENTS#L14-L26
  
  여기서 부여된 라이선스는 자동으로 그리고 통지 없이 종료될 것입니다. 당신이나 당신의 계열사, 법인 계열사 또는 대리인 중 어느 하나가 특허 주장을 직접 또는 간접적으로 개시하거나 직접적인 금전적 이해를 갖는 경우: (i) 페이스북이나 그 계열사 중 어느 하나에 대한 특허 주장, (ii) 특허 주장이 전체 또는 일부가 페이스북이나 그 계열사의 소프트웨어, 기술, 제품 또는 서비스에서 발생한 경우, 또는 (iii) 소프트웨어와 관련된 어떠한 당사자에 대한 특허 주장. 그러나 페이스북이나 그 계열사 중 어느 하나가 처음에 당신에 대한 특허 침해를 주장하는 소송을 제기하고, 당신이 그 소프트웨어와 관련이 없는 그 당사자에 대해 그 소송에서 특허 침해 반소송을 제기하는 경우, 본 단락의 (i)에 따라 이러한 반소송으로 인해 여기에 부여된 라이선스는 종료되지 않을 것입니다.
1. 2017년 7월 아파치 재단에서 BSD+Patents 금지
2. 페이스북의 BSD+Patents 라이센스 유지
3. 찬반 논란
4. 워드프레스 진영에서 3의 이유로 자사 소프트웨어에 리액트를 사용하지 않을 것으로 밝힘
5. 페이스북이 MIT 라이센스로 바꿈
오픈소스로 만든 소프트웨어의 권리를 잃어버릴 수 있다는 경각심을 갖게 하는 사례

오픈소스는 무료로 계속 제공되는가?

바벨
- 오픈소스로 이루어져 있고, 풀타임 개발자를 고용하고 있지만, 재정난을 겪고 있다
  - 연간 330,000달러가 필요하며 이를 위한 모금 진행
colors.js => 1.4.1 고의적 무한 루프 삽입
faker.js => 6.6.6 빈 소스코드
- Pay Me or Fork This
오픈소스를 당연히 무료로 쓰는 현상에 대한 비판 진영
- color.js 여파는 아마존 웹서비스 CLI까지 영향을 주었음 링크
만약 바벨이 패키지 관리를 중단한다면...?
오픈 소스가 무슨 일을 하고 있는 지 알 필요가 있다

제이쿼리, AngularJS, 리액트, ...

웹 프레임워크의 역사
state of js 2022
- usages: React, Angular, Vue.js
- interest: Svelte Ember Vue React

웹 개발

WASM: https://tech.kakao.com/2021/05/17/frontend-growth-08/
Rome: https://biomejs.dev/blog/annoucing-biome/

Programming idiom
- 프로그래밍 관용구(Programming idiom)는 코드를 작성하는 방식이나 코드를 구성하는 패턴