Fact

정산 시스템 - 델타

지난 달부터 하고 있는 정산 시스템이 베타를 지나 감마를 지나..델타 버전을 하고 있다. 이번달 중순까지 감마 버전 작업을 하고 있었는데 중간에 기획이 아예 바뀌었다.

기획이 바뀐 가장 큰 원인은 베트남측의 작업 플로우를 제대로 이해하지 못했기 때문이다. MISA라는 시스템을 어떻게 사용하고, 어떤 범위까지 업무에 활용하는지를 파악을 못하고, Misa를 배제하는 방향으로 개발을 하고 있었는데 Misa를 배제할 수 없는 상황에 Misa까지 우리 시스템에 녹이기에는 볼륨이 너무 커져서 한국의 정산 담당자의 플로우를 자동화하는 방향으로 기획을 수정하게 됐다.

새 기획에서는

• 파일 업로드 기능
• 파일 export 기능
• 업로드한 데이터 확인
• 데이터 확정 기능 을 구현했다.

그리고 정산 시스템을 개발하는 내내 도메인 이해를 하기 위해 노력을 많이 했다. 백엔드가 구현하는 비즈니스 로직이라도 전체 플로우를 이해하려고 했고, 회의하는 과정에서 질문도 많이 하고 의견도 많이 냈다.

백엔드와 프론트엔드 어떻게 개발하는지 서로 보기

스프린트 액션 아이템이었다. 프론트로 넘어오는 데이터가 어떤 과정을 통해서 넘어오고, 백엔드에서 보낸 데이터를 프론트에서 어떤 식으로 사용하는지를 이해하자는 취지였다.

현재 벡엔드는 nestJs라는 프레임워크를 사용하는데 타입스크립트를 기본으로 제공하고, express와 달리 아키텍처의 정의를 프레임워크가 제공하기 때문에 프로젝트의 구조나 코드가 비슷하다고 한다.

인상적이었던 부분은 세세한 구현은 implement layer에서 처리하고 service layer에서는 로직이 처리되는 흐름이 한 눈에 보이게끔 구현을 한 부분이었다.

Auth 리팩토링

처음에는 공통상태관리라이브러리를 사용하지 않다가 zustand를 쓰다가 unstatedNext를 도입하면서 auth 부분이 zustand 로직으로 구현되어 있었다. 그 부분을 unstatedNext로 리팩토링을 하면서 토큰 리프레쉬나 권한처리 부분을 같이 리팩토링했다.

자바스크립트 공부와 알고리즘 문제풀이

프로그래머스 lv1 문제를 끝내고 lv2 단계 문제를 일주일에 2~3개 정도 javascript로 풀고있다.

바닐라 자바스크립트로 간단한 게임을 만들었다. 구현을 끝내고 브라우저 101 강의를 들으며 강의를 보며 리팩토링을 했다. class와 contruct, 생성자를 사용해 리팩토링을 했고, this 바인딩과 컨텍스트에 대해 다시 공부했다.

실전 리액트 프로그래밍 속독 중

하루에 50 바닥씩 읽고 있다. 한번 훑고 정독하며 읽을 예정이다. 리액트 작동원리에 대해서 조금씩 배우고 있다.

Finding

• 컴포넌트에 대한 논의 -> container를 어느 레벨에서 부를 것인가? depth는? 데이터 전달은?
  1. Page level에서 container를 호출하고 모든 하위 컴포넌트에 props로 전달하는 방법.
     - 왜? 데이터를 한 방향으로 내려줘 단방향 흐름을 유지한다
     - 좋지 못함. 왜? 컴포넌트 레벨에서 컨테이너를 호출해도 단방향 흐름을 깨는건 아님, 데이터 수정이 있을 때마다 수정작업이 많아짐.
  2. Page level에서 container를 호출하고, depth를 최대 2depth로 유지한다.
     - 왜? 수정과 관리가 편함
     - 좋지 못함. jsx파일이 너무 커져 찾기가 힘들어짐 -- JSX파일이 길어지는건 구조적으로 문제는 없지만, 가독성이 떨어짐
  3. 컴포넌트 랩핑은 최소한으로 하되 각 컴포넌트 레벨에서 container를 호출
     - 연관성이 높은 컴포넌트끼리 래핑해 가독성을 높이고, 컴포넌트 수정도 최소한으로 할 수 있다

• 컴포넌트, 다시 생각하기
• 웹팩 순환참조 에러
• this 바인딩
• 실행 컨텍스트
• 파일업로드
• react-query를 편하게 쓸 수 있는 훅을 만들었다.
• SPA가 가능한건 브라우저의 히스토리 API 때문!
• literal 대신 enum 사용

Feeling

this 바인딩을 이론은 많이 들어봤는데 게임을 만들면서 처음 해당 에러를 만났다. 역시 글로만 공부하는 것보다 직접 부딪히면서 배우는게 기억에 오래 남는다. 봐도봐도 막연했던 this와 실행 컨텍스트를 다시 공부하면서 좀 더 이해할 수 있었다.

좋은 코드를 짜는게 뭘까 고민을 하는데 팀원분을 따라해보기로 했다. 중복되는 로직이나 너무 긴 로직은 hook을 만들어 사용하시는데 재사용을 하지 않는 hook을 만들 필요가 있나 싶긴하지만 반복작업을 hook으로 처리하는 것을 실천하기로 했다.

가정 환경이 변화면서 일찍 퇴근하기 위해 일찍 출근을 한다. 아침 루틴이었던 강아지 산책이 저녁 루틴으로 들어갔다. 그덕에 일주일에 네세번은 하루에 3km 이상씩 걷고 있다. 발목을 다쳐서 달리기를 못하니까 걷기라도 열심히..컨디션과 체력에 도움이 되길 바라며!

12월에도 자바스크립트 공부를 계속 할 예정이다. 유데미에서 자바스크립트 강의를 사뒀다. 12월도 화이팅