flushSync
코드 보던 중에 flushSync라는 게 있어서 찾아보았다.
useState가 비동기적으로 동작하기 때문에 이를 보완하기 위해서 나온 것이었다.
flushSync를 사용하면 사용 즉시 다시 렌더링을 하기 때문에 불필요한 useEffect를 덜 쓸 수 있다고 한다.
말은 이렇게 되어 있어서 머리로는 이해했는데... 사실 아직 완전히 이해는 못 함...
그렇지만 좋은 예제를 적어 놓으면 언젠가 또 도움이 되겠죠.
moment.js
네, 그리고 오늘의 삽질...🫠
분기 별로 봐야하는 자료를 위해서 분기 별 버튼을 만들어야 하는 일이 주어졌다.
회사는 unix로 날짜정보를 내려주고 이를 moment.js를 이용해서 바꾸니까 나도 moment.js를 이용해서 분기 계산을 했다.
처음에는 .quater를 통해서 아래와 같이 했다.
// 현재 날짜
const nowDate = moment().format();
// 현재 날짜의 쿼터 숫자
const quarterNum = moment(nowDate).quarter();
// 직전쿼터 시작 날 지정
const quarterStart = moment(nowDate).quarter(quarterNum - 1).set(‘date’, 1).format();
// 직전쿼터 마지막 날 지정
const quarterEnd = moment(quarterStart).set(‘month’, moment(quarterStart).month() + 3).subtract(1, ‘days’).format();그런데...
.subtract라는 메소드가 있는 것이었습니다...
심지어 이 메소드는 쿼터도 지원합니다...
즉... 저딴식으로 안 해도 그냥 빼면 된다는 것이죠...🫠
저의 세시간이 날아갓서요...
// 현재 날짜
const nowDate = moment().format();
// 직전쿼터 시작 날 지정
const quarterStart = moment(nowDate).subtract('quarter', 1).set('date', 1).format();
// 직전쿼터 마지막 날 지정
const quarterEnd = moment(quarterStart).set(‘month’, moment(quarterStart).month() + 3).subtract(1, ‘days’).format();React
export { default as AAA } from './AAA';이건 import랑 export를 한꺼번에 하는 거래...!
이런 것들은 정말 찾아봐도 알 수 없고 누가 알려줘야만 알 수 있는 것 같아...!
그리고 폴더 안에 index.js가 있으면 import를 해 올 때 폴더 이름만 써도 자동적으로 그 폴더 아래의 index.js를 가져오는 거라고도 한다.
회사는 모노레포를 쓰고 있는데 이걸 하고 싶었던 이유는 여러가지 웹페이지를 만들어도 어차피 디자인의 톤앤매너나 구성상의 큰 틀은 크게 바뀌지 않기 때문에 다른 레포여도 같거나 비슷한 컴포넌트를 쓰는 일이 많다고 한다.
근데 이걸 각자 다 다른 레포로 관리하면 아무리 같다 베껴서 붙이는 거여도 어차피 복사-붙여넣기는 해야 하는 일이니까 이게 너무 귀찮아서 그냥 모노레포로 관리를 하고 import를 해 오고 싶었다고 한다.
기획자 분이랑 백엔드 분들은 리액트 보고 되게 신기해했는데 뭔가 재밌었다!
