Skip to main content

생협 레포 분리 작업 회고

· 9 min read
Haesung Jung
Haesung Jung

생협 레포 분리 작업을 하면서 느낀 점들을 공유해요!

안녕하세요! 저는 FE 트랙 레귤러 정해성입니다! 최근(이라고 말하기는 처음 기획 당시 코드가 벌써 몇 달 전이네요ㅋㅋ..) 코인에서 식단의 사진과 품절에 관한 정보를 주기 시작했어요! 그리고 그것을 위한 백 오피스인 코인 영양사 페이지가 만들어졌죠. 이 영양사 페이지는 아직 앱은 없고 웹으로만 지원하는데 지금은 KOIN_OWNER_WEB 레포지토리(이하 오너 레포)에 그 코드가 있어요. 그래서 영양사님은 우선 owner.koreatech.in에 접속하고 저희가 따로 준비한 영양사 계정을 통해서 식단을 관리하고 있어요. 전혀 다른 기능을 요구하는 도메인이지만 처음 기획 당시에는 단일 페이지 필요 + 생협과의 협업이 시범적인 기능이라는 이유로 레포지토리를 분리하는 것보다 기존 레포에 의존하는 게 더 간편해서 그렇게 했던 것 같아요. 하지만 불편한 점도 있었어요.😭

단일 레포지토리의 문제점​

  1. 로그인 시 권한 구분 필요 사장님과 영양사님의 계정을 구분해야 할 필요가 생기고 그에 따라 오너 레포지토리의 로그인 로직을 많이 고쳐야 했어요. 앱이 아닌 웹페이지라서 누군가가 url로 다른 쪽 페이지로 접근하는 가능성도 없애야 하고 버그도 많이 생기고... 고치는 데 시간이 많이 들었죠.

  2. 모듈 구분 필요 사장님 기능과 영양사 기능에서 비슷한 동작을 하지만 구분을 해서 사용해야하는 모듈이 있었어요. 서로 독립되어 있지만 비슷한 변수명인 그것들을 구분해야 하니 개발하다보면 그것들이 헷갈릴 때가 있었어요.

  3. 확장 한계성 그리고 만약에 이번 영양사 페이지처럼 생협이나 학교 측과 연계할 만한 기획이 생겼을 때 코인 사장님과 같은 도메인을 쓰기 때문에 프론트엔드 입장에서는 소극적이게 될 수 있다고 생각해요. 저는 개인적으로 이번 영양사 페이지 개발로 인한 식단 사진 기능의 학생들과 학교측의 반응이 좋은 것 같아서 좀 더 도전적으로 확장하고 싶어요!

그래서 레포지토리를 분리하기로 했습니다!!(우와) 기왕 새로 만드는 거 처음으로 vite를 사용하기로 했어요. 프로젝트 폴더와 KOIN_COOP_WEB 레포지토리(이하 생협 레포) 생성은 우리 트랙장님께서 해주셨고 저는 생성을 제외한, 여러 설정과 오너 레포지토리에서 영양사 부분만 빼서 가져오는 일을 했어요. 레포지토리 초기를 꾸미게 된 것이 처음이라 초반에는 막막했었는데 하나하나 건드려보면서 즐겁게 코딩한 것 같아요. 다른 사람 눈치 안 보고 하고 싶은 것을 많이 했어요. 제가 작업하면서 기억에 남는 부분을 설명해드릴게요!

분리 작업 중 기억에 남는 점​

  1. 코드 스타일 가이드라인 규칙 추가 이전 쩝쩝박사 프로젝트에서 있었던, 개인적으로 되게 만족하고 있던 규칙을 추가했어요! 그건 바로 import 그룹에 관한 규칙이예요. import 하는 훅과 컴포넌트들이 많아짐에 따라 중구난방해지는 코드가 불만이었는데 그것을 해소하고 가독성을 늘리고 싶어서 이 규칙을 넣었어요. 그리고 저장 시 자동으로 eslint 규칙에 따라 코드를 정렬해주는 source.fixAll.eslint 편집기 설정도 추가했어요. 이 두 가지 덕분에 intellisense + auto imoprt 시 저장을 누르는 것만으로 올바른 import 그룹 위치에 들어가게 돼요!!

  2. 구성 파일과 설정 파일 그동안은 설정 파일을 만져본 경험이 별로 없었는데 이번 기회에 하나하나 조사하며 각각의 파일이 어떤 역할을 하는 지 알 수 있었어요. config 파일이나 manifest가 무얼 관리하는 지 알게 되었고 .github의 여러 템플릿과 workflows를 수정하여 깃허브 레포지토리의 pr 시의 템플릿과 동작을 수정했어요. 또 index.html의 메타데이터도 만져볼 수 있었어요.

  3. 변수명, 로직 등의 통일 저는 프론트를 만들 때 코드의 가독성이나 일관성을 중요하게 생각해요. 그래서 자주 동아리 코드들을 리팩토링 하곤 하죠. 이번 레포 분리 작업을 하기 전에 KOIN_WEB_RECODE 레포지토리(이하 리코드 레포)에서 학생식당 쪽을 크게 리팩토링 했는데 그때 제가 세운 나름의 규칙에 따라 이번 생협 레포지토리도 수정했어요. 리코드와 생협 코드가 똑같이 식단을 다루지만 몇몇 서로 다른 키워드를 사용하고 있어서 헷갈리는 경우가 있었는데 이번 기회에 통일할 수 있었어요. 예를 들어 A코너/능수관 등 장소는 place로, 아침/점심/저녁은 response의 이름을 참고해서 dining type으로 통일했어요.

    로직의 경우에는 레포지토리를 분리할 때 리코드와 오너 레포지토리 중에서 더 나은 로직을 이용해 리팩토링 하면서 가독성/유지보수성을 늘렸어요. 나중에는 리코드 쪽에 날짜 선택 로직과 zod의 response schema를 적용해서 일관성을 유지하려고 해요.

이외에도..​

이런 변경점들 외에도 svg의 import 방식의 변화나 쿼리 키 무효화, Suspense의 적절한 위치 등등 기억에 남는 문제와 해결 경험이 기억에 남아요. 이번 작업은 새로 알게 된 것도 많고 구성과 구현에 대한 만족감도 컸어요. 특히 토큰과 로그인에 관련된 로직에 대한 이해도가 많이 늘었어요! 설정파일에 대한 두려움도 줄어서 사이드 프로젝트를 시작하고자 하는 열정도 생겼어요. 아무쪼록 개인적으로 아주 만족스러운 작업이었어요!