[페이크럭스🦾] 65일 차

독서

친구에게 추천받은 모순을 4일에 걸쳐 읽었다. 녹차 가루를 입어 털어낸 듯이 속에 뭔가 남은 느낌이다. 인생의 선택에 대해 생각하게 해주는 책이다. 다음은 이어령의 마지막 수업이다. 다음 주에 만나는 이전 회사 동기(일명 목캔디)의 이름이 이어령님의 성함에서 나온 거라고 했던 게 기억나서 빌렸다.

M 프로젝트 리팩토링

이번 주에는 빨간색이 메인인 VD 디자인으로 변경하면서 코드 개선 작업을 하였다. 변경한 것은 다음과 같다. 아직 코드 리뷰는 받지 않았다.

1. hook 안에서 hook 호출
   이렇게 되어있던 이유는 useA를 사용할 때 response 값이 10개가 넘어서 필요한 값만 갖다 쓰기 위해서 useB를 사용한 것이었다. 현재는 백엔드 팀에서 API를 분리할 시간이 없어 프론트에서 알아서 갖다 써야 하는 상황이다. 이 상태를 그대로 두었을 때의 문제는 useB가 어떤 역할을 하는지 계속해서 위로 거슬러 올라가야 하기 때문에 코드 이해도가 떨어진다는 것이다. 그래서 useB를 삭제하고 useA의 이름을 분명히 하는 것으로 수정하였다.

export const useA = () => {};

export const useB = () => {
  useA();
};

참고 코드

2. types.ts에 몰려있는 타입
   API의 response type도 전부 하나의 파일 안에 넣어두어서 값을 알기 위해선 타고 넘어가야 했다. 전역에서 필요없는 것은 최대한 API를 사용하는 곳에 가깝게 이동시켰다.

3. react-hook-form 사용 방식
   • 공식문서에서는 register를 사용하는데 회사 코드에서는 field, method, controller를 자주 사용해서 2달이 된 지금도 적응 중이다.
   • 오늘 도움받은 코드는 다음과 같다. Checkbox component에 hook-form을 다는 거였는데, onChange를 붙여도 값이 변경되지 않았다. 나의 잘못은 Controller를 사용할 때 다른 코드에 있는 걸 그대로 보고 <Checkbox {...field}를 썼다는 거다. Checkbox의 onChange = () => void인데 field.onChange는 event param이 필요하기 때문에 에러가 났다. 생각 없이 그대로 쓴 건 큰 문제다.

<Checkbox
	checked={gender === "M"}
	{...register("gender", {

기존 코드

<Controller
	name="gender"
	control={control}
	render={({ field }) => {
		return (
			<>
				<Checkbox
          			{...field}
					onChange={onChange}
					checked={field.value === "M"}

💩 내가 변경한 코드

<Controller
	name="gender"
	control={control}
	render={({ field }) => {
		return (
			<>
				<Checkbox
					onChange={() => field.onChange("M")}
					checked={field.value === "M"}

👏 개선된 코드

4. tailwind css 삭제

   • 이전에 tailwind를 사용해보았을 때 코드를 작성할 땐 꽤나 편하다고 생각했으나, 막상 다른 사람이 작성한 코드를 보았을 땐 '어쩌라고'라는 생각만 들었다. 옆에서 화내고 있었더니 선생님(사수)께서 아래 사진을 보내주셨다.
   • 구조가 빨리 파악되지 않았다. 그래서 바꾸는 김에 전부 styled-components로 변경하였다. (회사 레포 90% 이상 styled-components로 되어있다.) 네이밍 하는 것이 여전히 어렵지만 그물망처럼 늘어진 코드보다는 나았다.

   

   https://www.youtube.com/watch?v=lHZwlzOUOZ4

5. material-ui 삭제
   이 라이브러리를 딱 2번 쓰고 있었다. Switch와 Dialog. 라이브러리를 import할 때는 이 외의 것들도 싸그리 들고 오기 때문에 무거워진다. 또한 tailwind로 억지로 끼워 맞춘 스타일링 가독성이 좋지 않다. 그래서 커스텀으로 만들고 깔끔하게 지웠다.

이번 주에 작업하면서 부가적으로 알게 된 것

1. react-query의 queryClient
   default 설정을 할 수 있는데, queries를 빼먹고 설정해서 적용되지 않았던 적이 있다. mutations도 설정할 수 있다.

defaultOptions: {
        queries: {
          retry: false,
          refetchOnWindowFocus: false,
        },

2. 웹 가로모드 고정
   이전 블로그에 나온 웨이팅 프로젝트에 가로 모드로 고정해달라는 요청이 들어왔다. manifest.json에서 orientation: landscape로 설정해두었으나, 태블릿의 방향을 바꾸어 들면 다시 돌아갔다. css로 설정도 해보았으나 실패했다. 아직까지 방법을 못 찾고 있다.

다음 주부터는 P 프로젝트에 필요한 기능을 하나 추가하고, 키오스크 관련 작업을 이어 받을 예정이다. 일렉트론 시작이다.

운동 (헬스)

이번 주부터는 M님과 함께 헬스장에 다니고 있다. 갈 때마다 남성분들이 무리지어 다니는 것을 보며 몹시 부러워했다. 다른 사람과 함께 오면 더 재밌고 꾸준히 할 수 있을 거 같은데, 누가 봐줬으면 좋겠는데, 쉬는 시간 돌아가면서 운동하고 싶은데 하는 욕심이 있었다. M님과 함께 다니는 덕분에 2분 뛸 거 3분 뛰고, 속도 9로 할 거 11로 하면서 점차 높여가고 있다. 열심히 하려는 모습을 보면서 나도 자극받고 있다. 올해 목표는 스미스 머신으로 50kg을 들고 스쿼트를 하는 것이다. 지금은 20kg를 하고 있다. 올해 여름에도 바다 위에서 물개가 되어야 하기 때문에 오랫동안 물 안에 있으려면 건강해져야 한다.

출근 복장

이젠 사진 찍는 게 귀찮다.

2023.02.02