[페이크럭스🦾] 116일 차

작업중인 프로젝트

웨이팅

• 사용자가 매장에 들렀을 때 핸드폰 번호를 입력하고 대기하는 서비스
• 기술 스택: react, firebase, RTK, emotion(➡️ styled-components)
• 코드의 95%는 작년 6월에 작성된 코드

입사했을 때 디자인 개선하는 작업을 했는데, 이때 뒤로 내가 쭉 작업하고 있다. material-ui로 되어있는 부분을 대부분 삭제했으나, 완전히 지우진 못했다. firebase fcm 토큰을 받으면 화면에 알림을 띄우는 기능이 있는데, 이때 notistack 라이브러리를 사용한다. 현재 v3까지 나왔는데 우리는 v1을 쓰고 있다. v1에선 material-ui를 dependency로 갖고 있는데, material-ui는 emotion을 dependency로 하고 있어서 떨어지질 않는다. 팀장님과 라이브러리 업데이트에 대해 논했을 때, "버전 올려보고 잘 돌아가기만 하면 돼"라고 하셔서 이번 주에 시간이 되면 해보려고 한다.

RTK ➡️ React-Query
근래는 RTK에서 react-query로 변환하는 작업을 하고 있다. 우리는 코드를 작성할 때 useEffect를 최소한으로 사용하는 것을 목표로 하고 있다. 그래서 API가 호출되어 data가 변경되면 다음과 같은 로직을 쓴다.

const {data} = useGetData();
const [something, setSomething] = useState();

React.useEffect(() => {
  setSomething(...);
}, [data]);               

💩

const [something, setSomething] = useState(); 
const {data} = useGetData({
	onSuccess: (data) => { setSomething(...); }
});

👍

이렇게 했을 때의 장점은 크게 2가지가 있다.

1. useEffect를 사용했을 때의 사이드 이펙트를 줄일 수 있다. data로 인해 바뀌는 로직이 뭔지 계속 찾아봐야 하는데, 이거 보~통 일이 아니다. 1개면 다행이지, 여러 개일 수도 있다.
2. 데이터가 성공적으로 받아졌을 경우를 분명히 할 수 있다. react-query를 쓰다 보면 isSuccess라고 해도 data가 없는 경우가 발생한다. 값이 전달되기까지의 시간이 있다. 그래서 이 문제를 해결하기 위해 react-query hook의 props로 onSuccess, onError, onSetteld를 추가하여 실행하면 값을 제대로 받아서 사용할 수 있어 에러가 나지 않는다.

RTK에서는 onSuccess를 하기 위해 extraReducer를 추가해야 하는데, react-query처럼 props 하나 넣는다고 될 일이 아니었다. 이에 대한 해결책으로 redux-query(react-query같은 redux)를 사용하는 방식이 있었으나, 차라리 이럴 바엔 다른 프로젝트랑 기술 스택을 하나로 맞추는 게 좋겠다 싶어서 바꾸는 작업을 하고 있다. 이 프로젝트에서 RTK를 써서 호출하는 API(RTK endpoint)가 6개 정도 되었는데, react-query로 바꾸는 작업은 성공하였다.

RTK의 store로 저장하는 값이 array 타입으로 5개 정도 있었다. 현재 2개를 지웠다. 그 이유는 컴포넌트로 전달해야 하는 depth가 2 정도 되었는데, 이걸 굳이 스토어로 저장해야 할 이유가 없었다. 오히려 스토어로 해두니 어디서는 저장하고 어디서는 받고 있는데, 이게 언제 어디서 일어나는지 파악하는 데 너무 오래 걸렸다. 왜 데이터가 나타난 건지 왜 바뀐 건지 파악할 수 없었다. 구조를 빨리 파악하기 위해서라도 지워야 했다. 전역적으로 사용해야 하는 값은 store로 두고, 굳이 필요 없는 것은 꾸준히 지우려 한다.

RTK를 지우면 store를 어떻게 저장해야 할지 고민 중이다. 다른 프로젝트에서는 recoil을 사용하고 있는데, contextAPI로도 할 수 있지 않을까? 생각하고 있다. 이건 질문을 해봐야겠다.

yarn-berry
2주 전에는 모노레포로 변경하면서 yarn을 yarn-berry로 변경하려는 시도를 3일간 했다. 실패했다. yarn-berry는 yarn과 다르게 라이브러리가 어떤 dependency를 갖고 있다면 그걸 다 깔아줘야 한다. 그래서 react-is도 따로 설치했다. eslint 설정이 제대로 되지 않아서 이걸로 정~말 애먹었다. 다른 분의 도움으로 간신히 해결했는데, firebase 때문에 실패했다. firebase가 내재적으로 node-modules/bable-loader를 dependency로 갖고 있는데, yarn-berry는 node-modules가 없기 때문에 계속 에러를 뱉는다. 그래서 다음에 다시 시도한다면 Terborepo를 써서 해결해 보자고 팀 내에서 이야기가 되었(으나 언제 될진 모르겠)다.

속도 개선
웨이팅 정보를 받기 위해서 메인 화면에서는 polling을 한다. 그래서 이 때문에 서버에 부하가 생기는 문제가 있어 개선 작업을 하는 중이다. 프론트에서 중복된 API를 호출하지 않도록 서버에서 API response를 변경하였다. 프론트 코드에서 response type을 경우에 따라 나누어 두었는데, 이것을 as로 사용하고 있어 타입이 있으나 마나 한 상황이 되었다. 그래서 타입을 하나로 통일하고 데이터를 사용할 때 is를 써서 filter를 걸었다.

이 외

추가적인 작업도 있지만 지금까지 쓴 분량이 많아서 다음 편에.

회사 생활

워크샵

몇 주 전에 회사에서 어딘가 다녀왔다. 고기 30근을 산 게 아주 충격적이었다. 출발하기 전에 큰 윷놀이 세트를 보고 재미있으려나? 했는데, 그때가 회사에서 제일 크게 소리지른 날이었다. 우리 팀이 1등했다. 같이 일하는 언니가 나에게 그때만큼 감정 좀 실어서 평소에 말했으면 좋겠다고 했다. 보통 나의 말투는 '대단하네, 멋지네, 굉장하네'라는 감정 없는 리액션으로 끝난다. 프론트 팀에서 배운 게 이런 거라고 했다. 크큭

4월 말에 또 한 번 간다. 벚꽃이 피는 날에 갈 수 있을 줄 알았더니 이미 벚꽃이 펴버렸다. 회사 근처에 나무가 없어서 꽃이 필 수 있는 날씬지도 몰랐다. 아, 스타벅스 굿즈가 먼저 알려주긴 했다.

팀 분위기

날 제외한 3명은 어떤 생각일지 모르겠는데 난 대만족이다. 아마 물어보면 팀장님은 "좋아~"라고 하실 거고, 다른 사수님은 아무 말도 안 하실 거 같고, 다른 분도 "전 좋은데요?"라고 하실 거 같다. 뭐 추측이니 정확하진 않다. 서로 하고 싶은 말 다 하는 분위기가 형성되어 있다.

더 좋아지려면 같이 공부를 해야 한다. 이번에 next.js를 시작했다.

팀장님께서 나에게 "OO는 생각보다 성격이 세지 않은 거 같아."라고 하셔서 "분발하겠습니다."라고 했다.

일 잘하는 사람

이 되고 싶다. 한 번은 티켓(일감)을 하나 할당받았는데 A+B를 내보내는 것이었다. 서버 팀에서 A까지만 됐다고 하여 '아, 이건 마감일이 미뤄졌나 보다'라고 혼자서 생각하고 천천히 작업하였다. 사수님께서 언제까지 하는 거냐고 하시길래 사정을 말씀드렸더니, 백엔드 팀과 이야기 하여 나에게 "그럼 A까진 했어야지"라고 하셨다. 어디까지 해야 하는 건지 지레 짐작한 게 큰 문제였다. 다행히 A까진 해둔 상태여서 작업한 걸 올리긴 했으나, 진작 알았더라면 컨펌까지 깔끔하게 받을 수 있는 일이었다. 짐작하지 말자.

개인적으로

스트레스 해소법

나는 화가 많다. 다른 사람들은 화가 나면 혼자 참거나 한숨 한 번 쉬고 마는 거 같은데, 나는 계속 중얼거리고 참을 수가 없다. 그래서 이 표현이 심해지면 사수님께서 "왜~"라고 말을 걸어주신다. 그러면 "아니!"나 "아니..."로 시작하는 답변을 하거나 실소한다.

나는 한 달에 한 번 이상 노래방 1시간을 혼자 풀타임으로 뛴다. 요즘에는 화가 정말 많아졌는지 이것도 부족해서 1시간 반을 하고 싶다. 하고 나면 많이 가라앉는다.

단 걸 주기적으로 먹는다. 녹차 키켓에 미쳐서 운영팀에 지속적으로 어필하고 있다. 사주세요 사주세요 사주세요. 놀랍게도 다른 사람들은 이걸 안 먹었다고 한다. 녹차 디저트를 안 좋아한단다. 계속 없어져서 찾았는데 내가 다 먹은 거였다. 휴가 내고 오설록 간 사람, 투썸 간 사람 나.
나의 최애: 오설록 디저트 전부 다. 투썸 로얄 밀크티 쉐이크

안타깝게도 나는 커피를 마시지 못한다. 원래는 오후 2시까진 됐는데, 이전 12시로 바뀌어서 정오의 카페인 신데렐라(?)가 되었다. 그래서 남들 다 커피 고르고 있을 때 나는 녹차라떼나 밀크티를 선택한다.

이러면 살이 찐 게 금방 느껴지기 때문에 운동을 한다. 근래는 일찍 출근하느라 가지 못했는데, 내일 다시 간다. 야호.

독서

근래 관심 있는 키워드: 소년재판(형사재판)
다음에 읽을 책: 탁월함의 발견, 역행자

주 1권 목표 유지 중

정규직 전환

벌써 4개월이 되었다니. 웃음만 나온다. 이전 글을 쓴 뒤로 공백이 있었던 이유는 압박이 있었기 때문이다. 누군가 보고 있다는 얘기를 듣고 크게 소리지른 적도 있었다. 아니, 저에 대해 어디까지 알고 계신 거죠? 다른 사람이 보는 건 좋은데 내가 그 사실은 알고 싶지 않은 부끄러움이 있다. 이런 걸 뭐라고 표현해야 하나. 어쨌든 기록의 필요성을 알고 있기에 다시 쓰기로 했다. 글을 하루에 하나씩 올리면 좋겠다고 나를 압박해준 누군가에게 감사 인사를 올린다.