2021.09.27

최근 팀 내 스터디에서 atomic design을 적용하다보니 어느정도 나만의 기준도 생기고, 조금씩 구조화되가는걸 느끼고 있다. 다른업무랑 병행하느라 조금은 버겁긴하지만 그래도 의미있는 시간이다.

[React] custom hook의 state

util성으로 custom hook을 정의, 사용하고있다면 custom hook내에서 state의 사용은 지양하자.
간혹 state를 singleton pattern으로 착각하여 잘못된 개발을 할 수 있다.

[Vue] named slot을 사용하자.

atomic design 패턴에서 template 정의 시 재사용성을 위해서 컴포넌트의 위치만 선언을 해두고 각 위치의 컴포넌트를 page에서 props로 주입받는 식으로 개발하고자 했다.
굳이 props를 쓰지말고 named slot을 사용하면 쉽게 구현할 수 있다.

데이터의 정렬은 FE? BE?

정렬된 데이터를 표현해야하는 순간이 있다.
사실 지금까지는 당연히 BE에서 처리를 해야한다고 생각했다.
굳이 프론트에서 표현하지 않는 데이터까지 클라이언트 PC에 메모리에 저장하고 정렬까지하여 부하를 줄 필요가 있을까? 하는 생각에서였다.

그러나 서비스의 용도에따라 달라질 수 있음을 오늘 배웠다.
고객들에게 보여지는 서비스의 경우 UX가 최우선되어야 하기에 BE에서 정렬하여 제공한다.

내부 직원들이 사용하는 백오피스의 경우 FE에서 정렬해도 된다.
회사의 서버는 여러 서비스 프로세스가 돌아가고있기때문에 부하를 줄일 수 있는 곳에서 조금이라도 줄여주는게 좋다. 따라서 UX가 조금은 후순위인 백오피스에서는 클라이언트의 자원을 사용하여 서버의 부담을 줄여주자.