코드 품질 개선

• 코드 품질 개선 기법 7편: 새것을 들일 때 옛것도 다시 살피자
  • 새것을 들일 때 옛것도 다시 살피자
    • 기존에 사용하던 변수의 의미가 모호해질 수 있으므로
    • 명확하게 구분할 수 있도록 정리 후 도입하는 것
• 코드 품질 개선 기법 2편: 확인 여부를 확인했나요?
  • 타입으로 정의했는데 실제 런타임에서 그 정의된 타입이 아닌 경우
  • 약속된 타입이지만 아무도 믿을 수 없다는 사실
• 약속이 깨질 수 있다는 것을 염두에 두고 처리해야할까?
• 약속과 다름을 빠르게 인지하고 수정하는게 좋지 않을까 싶기도

(번역) 2025년 리액트 트렌드

• 서버 컴포넌트
  • 서버에서 직접 디비 가져온 데이터로 그려낸 그 자체를 반환하여 클라이언트에서 그리기만 하는 형태
  • 일반적으로 데이터를 조회하고 전달하고 다시 그려야하는 작업 과정에 소모되는 시간/자원을 줄일 수 있으니
  • 기기마다 사양 차이가 큰 경우 발생할 수 있는 퍼포먼스 문제를 해결하기 좋아보인다
  • 다만 애니메이션도 그려낼 수 있을 것 같지는 않은데
  • 이 또한 방법이 있겠지
• 그럼 서버로부터 가져온 데이터로 직접 그려낸 컴포넌트에서 일어난 액션은 어떻게 처리할까
  • 무엇을 어떻게 처리할지 미리 정해져있고 서버로 전달된 것이 아니라면
  • 클라이언트에서 다시 처리하는 작업이 필요할 것 같은데
  • 이것도 서버에서 처리할 수 있는 방법이 있었다
• 서버 함수
  • 서버 컴포넌트에서 직접 디비에 저장까지 할 수 있도록 서버 액션이라는 것을 추가 한다
  • 하지만 컴포넌트에서 디비에서 가져온 데이터를 직접 가공하는 형태는 취하기 어려웠는데
    • 서버 컴포넌트는 디비에서 직접 전달한 데이터를 받을 수 있더라도
    • 클라이언트에서 이 값을 수정할 수 있느냐에 대한 문제가 있었다
  • 이를 해결하기 위해 서버 함수가 추가하는데
    • 이게 그냥 API 호출하는 것과 어떤 차이가 있을지
    • API 커스텀 훅을 지원하는 것이라고 생각된다 🤔
• 이런저런 읽다보니 정말 리액트가 완전체가 되고 있었다
  • 리액트는 처음에는 클라이언트 측 렌더링 및 라우팅을 위한 라이브러리(SPA)로 시작했지만, 이제는 CSR, SSR, SSG, ISR 등 다양한 렌더링 모드와 클라이언트 사이드, 서버 사이드, 하이브리드 라우팅을 지원하는 생태계로 발전했습니다.
  • 위에 서버 함수를 보며 느꼈던 지원하는 형태의 커스텀 훅을 사용하는 것에서 느껴지는 프레임화