Today Yurim Learned

# 2021.03

# 3/1

# 리액트 리렌더 최적화하기 (memo, pureComponent, shouldComponentUpdate 없이!)

https://kentcdodds.com/blog/optimize-react-re-renders

  1. 계산이 비싼 컴포넌트를 최대한 덜 렌더되게 상위로 올리고
  2. 이를 아래로 prop으로 내린다.

# 리액트 성능 프로파일링하기

https://moood.dev/reactjs/performance-profiling-your-react-app/

  1. DevTools profiler: commit(변경사항을 DOM에 적용하는 리액트 기능)별로 성능을 그룹화해서 각 변경사항이 얼마나 비싼지 알려줌
  2. 매 리렌더
    1. Commit chart: 우상단 바그래프. 비싼건 노란막대, 싼건 파란막대. 선택하면 검정막대.
  3. 리렌더 상세정보
    1. Flame chart: 커밋 누르면 나오는 상세 차트. 노란색은 오래걸림, 파란색은 덜걸림, 회색은 렌더x.
    2. Ranked chart: 컴포넌트별로 렌더링 오래걸린 순위 매겨줌.
  4. 컴포넌트 렌더링 상세정보
    1. Component chart: 컴포넌트 더블클릭하거나 컴포넌트 클릭하고 오른쪽 아이콘 클릭하면 나옴. 프로파일링 진행 동안에 컴포넌트가 어떤 주기로 렌더링되었나?

# 3/3, 3/8, 3/9

# State of frontend 2020 리뷰

https://tsh.io/State-of-Frontend-2020-by-TSH.pdf

  1. 프레임워크
    1. 뷰 3.0의 딜레이, 앵귤러의 Ivy(컴파일러) 딜레이로 리액트가 더 승승장구.
    2. Svelte, Stencil, Dojo 같은 리액티브 프레임워크들이 부상하고 있음. 레거시를 가져갈 필요 없어서 가벼움. 그리고 모던 스탠다드랑 언어 기능 가지고있음.
    3. 설문조사에서 77%가 TS써봤고 대부분 선호함.
  2. 호스팅
    1. Netlify나 Vercel처럼 쉽고 프론트위주 팀을 위한 플랫폼이 프론트엔드의 미래다
    2. 아직 44%는 웹서버 직접 셋업함(AWS도 아니고!). AWS(38%)는 GCP(14%)랑 애저(11%) 합친것보다 더 큼.
  3. 잼스택 (Js + APIs + Markup)
    1. Next.js: 걍 SSR해주는 목적만 있는게 아니었다. Jamstack을 위해 만들어진 React framework라 말하는게 더 적합.
    2. Jamstack: 매 req마다 서버에서 렌더링하는게 아닌, SSG해서 미리 다 그려놓고 CDN에 올려서 좋은퍼포먼스/적은비용/제로유지비용.
  4. 마이크로 프론트엔드
    1. 아래에 섹션 따로 뺌
  5. 검색 엔진 최적화
    1. 43%의 트래픽이 organic search에서 오지만, 52%의 개발자가 SEO를 신경 안 씀.
    2. 구글이 js를 잘 render하도록 신경써야함(robot.txt를 블록하는 스크립트가 없어야함)
  6. 접근성
    1. 거창한게 아니고.. 일단 작은 폰트크기+약한 대비부터 impaired vision인 사람들을 힘들게 함.
    2. img alt, ARIA attribute, keyboard navigation, color contrast
  7. 개발팀
    1. 옛날에는 프론트 배포하려면 백엔드에 의존했어야 함. 이젠 의존 없이 따로 배포 가능.
    2. 배포마다, 커밋마다 preview url 만들 수 있어서 디자이너나 PO랑 협업도 좋아짐. 스크린샷이나 gif공유보다 편함.
  8. 디자인
    1. 소프트웨어 개발에서 제일 기본적인 디자인 타입: UX design, UI design, Product design. 최근에는 User-focused UI/UX디자이너, Product-focused Product designer 두개로 나뉘는중.
    2. Hadoff tools(zeplin > invision > Figma 등) 71%가 써봤다.
  9. Quality assurance
    1. Capybara, RSpec, Ember CLI, QUnit
  10. FE의 미래
    1. 3년안에 죽을 것 같은 트렌드/솔루션은?: Redux, CSS in JS, Web components, Micro frontens, Atomic design, CSS modules, JAMStack, PWA, REST API, QraphQL, TypeScript <-인간들아~~ 그냥 다 적어놓으면 어떡해!

# 3/4

# Micro Frontend

https://mobicon.tistory.com/572

  1. 마이크로서비스처럼, 전체 화면을 작동가능한 단위로 나눠 개발한 후 서로 조립. 앵/리/뷰/바닐라 등 상관 안하고 조합 가능.
  2. 어떻게 조립하냐?
    1. 서버 템플릿 통합: 서버에서 최종 화면을 조합
    2. 빌드타임 통합

# 3/16

# 지연초기화

https://reactjs.org/docs/hooks-reference.html#lazy-initial-state

  1. initialState은 초기렌더에만 일어나고, 그다음부턴 무시된다(연산은 하지만 무시한단 말인듯). 비싼 연산이 필요한 값이면 바로 값을 넘기는 대신 함수를 넘겨라.
  2. e.g. 로컬스토리지에서 아이템 가져와서 초기화하는 코드에 사용.

# Mark & Sweep

  1. 가비지 컬렉션시 사용할 1bit의 플래그 공간 사용.
  2. 마크 스테이지: Root set에서 접근가능한 플래그를 'in use'로 마크함.
  3. 스윕 스테이지: 모든 메모리 공간 순회하며 'in use'아닌애들 메모리 해제
  4. 끝나면 다음 가비지 컬렉션 위해 모든 객체의 flag 초기화

# 3/23

# 자바스크립트의 메모리관리

https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management

  1. C와같은 저수준 언어는 메모리관리 위해 malloc() / free()를 사용하는데 js는 객체 생성시 자동으로 메모리 할당하고 쓸모없어졌을때 자동으로 해제함(가비지 컬렉션)

← 2021.02 →