react, nextjs 최신 기능 #
https://www.youtube.com/watch?v=xiMZZoNhLOI
react Activity
언마운트는 됐지만 상태는 유지하는거. mode를 visible/hidden으로 한다. useEffect 같은 마운트/언마운트 클린업은 실제로 동작한다.
컴포넌트는 불필요하게 렌더링 유지 안되고 값은 유지할 수 있다.
react compiler를 설정(next.config.ts에서 설정가능)하면 memo, useCallback 같은 최적화를 붙이지 않아도 자동으로 react compiler가 해준다.
useEffect에서 실제로 의존성은 아닌데 useEffect 콜백 내에서 사용할 때 최신값을 구독해야 하는 값에 대해서 useEffectEvent 내에서 쓸 수 있도록 한다. useEffectEvent에서는 useEffect에 의존성을 추가하지 않고도 특정 state나 props의 최신값을 참조할 수 있도록 해준다.
next.js의 use cache. next config에서 cacheComponent 설정을 하면 함수 컴포넌트에서 쓰는 함수 내에서 'use cache'를 하고 key, life(캐시 수명)을 설정하면 캐시 설정이 된다.
자세한 문서는 https://nextjs.org/docs/app/api-reference/directives/use-cache
서버 컴포넌트에서 캐시를 하고 싶다면 use cache를 써서 손쉽게 서버 컴포넌트를 캐시할 수 있다.
새로 나온 nextjs에서는 agents.md, claude.md가 자동으로 생긴다. agents.md를 보면 node modules의 next 폴더에 next 문서 경로를 명시해놓았고, 해당 문서를 읽어서 nextjs를 쓰도록 한다.
next mcp도 있음 https://nextjs.org/docs/app/guides/mcp
오류 분석, 로그 분석 등이 가능하다.
ADR #
보탄을 보고 있는데, 작중 개발자로 인턴 생활을 하고 있는 인물이 나온다. 그 장면에서 ADR이라는 게 언급되어 무엇인지 알아보았다.
https://swalloow.github.io/feat-adr/
ADR을 쓰는 이유에 관해 https://github.blog/engineering/why-write-adrs/
ADR은 Architectural Decision Records로 아키텍처 결정 과정과 해결하는 문제, 결정 맥락을 기록하는 문서다. 마크다운으로 보통 작성한다.
- 문서 작성 과정에서 저자도 더 합리적으로 생각할 수 있고, 문서의 독자도 문제를 쉽게 이해할 수 있다.
- 새로운 팀원에게 히스토리 공유가 쉽다
- 팀원들이 늘어날수록 점점 늘어나는 커뮤니케이션 라인(2명이면 1개, 3명이면 3개, 4명이면 6개... 완전 그래프 간선 수를 생각해 보자)들을 ADR 문서만 보여주면 되도록 줄일 수 있다
템플릿과 예시 문서는 https://github.com/architecture-decision-record/architecture-decision-record 에서도 확인 가능
대부분 다음과 같은 내용을 작성한다
- 현재 문서 상태(proposal, accepted, deprecated...)
- 해결하고자 하는 문제
- 제안 및 해당 결정의 이유. 고려했던 대안과 장단점
- 결정을 통해 사용자가 받는 영향. 마이그레이션이라면 다운타임이 있는지, 이 결정을 시행했을 때 나타나는 효과는 무엇인지, 프레임워크 업데이트가 필요한지 등
ADR은 해당 결정이 내려진 당시의 상황과 고려들을 기록하는 것