2023년 회고

Knoa·2023년 12월 22일

TL;DR

2023.11.30 회사 폐업 예정으로 인한 권고사직
2023.12.01 개발자를 하고 난 뒤 처음으로 맞이하게 된 긴 강제 휴식

오늘은 2023년을 정리하며 내가 했던 일들을 써내려가보려 한다.
그리고 맘 먹은 김에 새로운 해 2024년의 목표도 정해봐야겠다.

시작!

2022.12-01 모노레포 도입

회사에서 처음으로 모놀리식/멀티 레포 방식으로 된 웹과 앱 레포를 하나의 모노레포에서 관리하기로 결정했다.
나오게 된 자세한 배경 : 글 참고

당시 웹 서비스에 있는 기능들을 거의 그대로 앱으로 구현하다보니
웹과 앱에서 공통으로 쓰이는 로직이 많았다. 따라서 웹에서 기능이 추가되거나 수정되면 앱에서도 같은 작업을 반복해줘야 했다.

Next(React), React Native 의 UI 컴포넌트는 쓰이는 라이브러리나 사용되는 태그가 다르기 때문에 서로 호환되지 못하겠지만, 상태 관리 로직은 공통으로 두고 각각의 서비스에 쓰일 수 있을 것 같았다.

다른 기업에서도 이런 형태를 시도하는 사례가 많았기에 간단하게 만들어보자는 생각을 했다.

회사 내에 자체 라이브러리를 만들 리소스가 부족했기 때문에 기존에 있던 상태관리 라이브러리(recoil)를 활용해서 패키지로 만들기로 했다.

시행착오를 거치며..

모노레포를 도입하면서 vercel 사에서 만든 turborepo 라이브러리를 활용하기로 했다. 다른 것들도 많은데 사용한 주 이유는 이 글을 참고 바란다. ( 너무 간단히 정리한.. )

문제 발생

모노레포 구축을 위해서는 workspace 기능을 사용해야했다.
npm 을 주로 사용하고 있었는데 yarn 으로 변경하기로 했다.결정 당시에 모노레포 구축에 필요한 기능인 workspace 가 npm 7 (2022 년 초) 버전에 릴리즈 되었다는 것을 알았지만 관련 레퍼런스가 부족했다.

yarn workspace 와 turborepo 를 통해 모노레포를 도입하기로 결정한다.

1. node_modules & symlink hoist

모든 패키지 cli yarn 으로 변경하고 package.lock 을 삭제하고 yarn.lock 으로 바꿨다.

그리고 모든 셋팅이 됐다고 생각했다. 그리고 앱을 실행했지만...
실행이 되지 않았다..!

많은 자료를 찾아보았고 monorepo 를 도입할때 React Native 에서 문제가 발생한다는 사실을 알게 되었다.

핵심 이슈 : React Native Metro Bundler 는 symlink 를 지원하지 않았다.

구현하다보니 알게 된건데 0.66 버전에서는 symlink 를 지원하지 않고 있었다.
( 최근 나온 0.72 버전에 symlink 베타지원을 시작했다. )

따라서 RN 패키지가 루트 패키지로 호이스트 되지 않도록 해당 패키지를 독립시켜야 했다. yarn worksapce 에서 nohoist 옵션을 사용해주기로 했다.

이렇게 하니 앱이 실행되지 않는 문제가 해결되었다.

Recoil 테스트 적용

recoil을 활용해 상태 관리 로직 selector 를 구현했다.
그리고 jest 로 단위 테스트를 작성하기로 했다.

recoil 에 테스트를 도입하기 위해서는 testing state outside of react 방식을 활용해 도입해야 했다.

이 방식을 api 요청 부분과 엮다보니 단위 테스트에 여러가지 문제가 있었다.
테스트를 용이하게 하기 위해서 기존 로직을 리팩토링 하며 변경해줬다.

api 로직과 데이터 가공 부분을 분리해줘 각각 테스트 하기로 했다.

api 테스트는 msw 를 도입해서 기존 코드를 최대한 변경하지 않고 테스트가 가능하도록 구현해줬다.

2023.02

LightHouse 점수 70점 -> 90점대로 향상

LCP Priority, 메인 배너 Image Preload 적용, 웹 UI 개선 작업

2023.05-11 콘텐츠 생성 자동화 composer 구현

figma api에서 해당 캔버스의 프레임들을 가져오고 그 프레임 안의 인스턴스들을 가져올 수 있다.

타입별로 파서를 만들어줬다.
- 생각보다 굉장히 복잡한 json 형태를 타입별로 구분해줬다.

전체 object 의 props 들을 돌면서 타입을 확인하고 해당 객체를 수정해 현재 우리가 사용중인 스타일 시스템에 맞는 object 형태(RN의 CSS CamelCase 형태와 동일)로 변경된다.

json 으로 받아온 스타일 데이터를 그대로 받아들일 준비가 된 리액트 컴포넌트를 구현해줬다.
- 매핑이 가능할 수 있도록 컴포넌트에 클래스 이름을 prop 로 두고 해당 이름이 피그마 캔버스 내에 있는 컴포넌트의 인스턴스 이름과 동일하게 세팅되도록 했다. (컴포넌트 클래스 이름은 수동으로 기입해줬다.)
json 으로 만들어진 형태를 그대로 DynamoDB 에 업로드 해준다.
- 여기서 키는 해당 페이지의 고유값으로 설정했다.

큼지막하게 3가지로 퉁?쳐서 얘기하긴 했지만 각 단계별로 많은 유틸함수와 인터페이스 세팅들이 들어갔다.

작업을 완료하고 나서 더이상 CSS 작업을 하지 않을 수 있게 되어서 하나의 콘텐츠를 만드는데 시간을 많이 단축 할 수 있게 되었다. (퍼블리싱 작업은 이제 안녕~)

2023.11.23 갑작스러운 회사의 폐업 통보

회사의 매출은 꾸준히 나왔지만 매달 손익분기점을 넘기지 못하는 상황이었고 계속해서 마이너스가 나고 있었다. 그래서 11월을 마지막으로 모든 직원들에게 권고사직을 한다. 대표님의 마음도 이해가 됐다. 아무튼 지금은 잘 퇴사했고 퇴직금 + 월급은 하나도 밀리지 않고 다 잘 받을 수 있었다.