엘리스 SW트랙 최종 프로젝트 중간회고

Facts (사실, 객관)

최종 프로젝트가 시작한 지 어느덧 3주라는 시간이 흘렀다. 

 

이번 프로젝트에서는,

• 프론트엔트를 담당하고 있다.
• threeJS로 이번 프로젝트의 핵심 기능을 구현할 예정이다.
• 타입스크립트에 도전해보기로 했다.
• 백엔드에서도 nestjs를 사용하기로 했다.
• Figma를 경험했다.
• TDD를 시도해봤다.

Feelings (느낌, 주관)

오랫동안 회고를 남기지 못했다. 시간과 컨디션을 잘 관리하는데 실패했다. 그동안 패턴을 바꾸려고 노력해봤지만 밤이나 이른 새벽에 잠들기를 시도하면 두세 시간 정도를 잔 후 완전 깨버린다. 기껏해야 4시간 정도를 잘 수 있고 결국 오후 늦은 시간이 되면 급격한 피로에 시달린다. 반면 오후에 자면 상대적으로 더 깊고 길게 잘 수 있다. 오랜 시간 좋지 않은 패턴을 유지하다 보니 몸이 적응해버린 탓인 것 같다. 밤을 새우면서 까지 패턴 바꾸기를 시도해봐도 좀처럼 성공했다는 느낌을 받기가 쉽지 않다.

 

최종 프로젝트에는 지난 프로젝트와 다르게 3주라는 시간, 설 연휴를 포함하면 4주라는 시간이 주어진다. 팀원들 모두가 활발하게 논의를 시작했고 덕분에 이른 시점에 꽤나 구체적인 기획을 마칠 수 있었다. 첫 주에는 기획과 디자인을 모두 끝냈다. 처음으로 다소 서투르게 피그마를 활용한 디자인을 해봤는데 유용했다.

 

이번 프로젝트는 다소 도전적이라고 할 수 있다. 리액트도 아직 미숙한 부분이 많은데 팀원들 모두가 처음 다뤄 본 타입스크립트와 threeJS를 적용하기 때문이다. any타입을 최대한 피하기 위해 인터페이스 등을 통해 최대한 정리하고 있지만 redux thunk에서 사용되는 getState의 타입은 여전히 지정하지 못하고 있다. state를 리턴하는 함수로 정의하면 될 것 같은데 store에서 정의한 타입을 불러오게 되면 순환 참조의 오류에 빠지게 된다. 처음에는 타입을 지정해주고 관리해주는 부분이 상당히 까다롭게 느껴졌는데 나중에 타입을 하나의 파일에서 관리하고 중복된 타입 추출, 유틸리티 타입 적용 등으로 부담을 어느 정도 줄일 수 있었다. 익숙해지면 감당할 수 있는 귀찮음이라고 느꼈다. 컴파일 단계에서 오류를 발생시켜주니 좀 더 안전하고 예측 가능한 코드를 작성하는데 도움이 될 것 같다.

 

리액트나 리덕스에 익숙해지고 있음을 느낀다. 팀 논의 끝에 컴포넌트 구조는 라우터와 접하는 Page 컴포넌트, 리덕스와 연결되어 상태를 관리하고 내려주는 Container 컴포넌트, UI를 담당하는 Presentational 컴포넌트로 구분하여 구성하기로 했다. 성능과 관련된 이유로 Container/Presentational 구조를 사용하지 말라고 했던 포스팅을 보기도 했었고 실제로 중앙에서 관리되는 상태가 바뀔 때마다 자식 컴포넌트들이 렌더링이 되어야 하는 패턴이 바람직하진 않을 수도 있겠단 생각이 들었다. 그럼에도 이 패턴을 선택한 이유는 관심사 분리를 경험하기에 좋고 데이터 흐름을 좀 더 명확하게 파악할 수 있기 때문이다. 하지만 프로젝트를 진행하면서 염려했던 부분이 실제로 드러나기도 했는데, presentational 컴포넌트를 분리하면 할수록 props drilling이 더 심해지고 있었기 때문이다. 메모이제이션을 통해 어느 정도 해결할 수는 있겠지만 메모이제이션을 무분별하게 사용할까 봐 신경 쓰이기도 했다. 실제로 내가 담당하는 페이지는 사용자의 인풋에 따라 계속해서 변경되어야 하는 상태를 주로 관리하기 때문에 어쩌면 메모이제이션을 해주기에 적합한 대상이 아니란 생각이 들었다. 또한 여러 props를 받아야 하다 보니까 컴포넌트를 쪼개서 재사용성을 높게 만드는데 불리한 측면이 있어 보였다. 리액트의 장점을 충분히 살리는 방법은 아닌 것 같았다. 다음에는 상태 관리 hook을 만들어서 필요한 곳에서 상태에 직접적으로 접근하는 방식이나 아직 접해보지 못한 recoil 등을 사용해보고 싶다.

 

TDD를 시도해 봤으나 초반에만 실천하는데 그쳤다. 시간에 쫒기는 것이 첫 번째 이유, 하다가 막히는 부분이 있으면 테스트를 뒷전으로 미루고 기능 구현에만 집중하는 좋지 않은 습관이 두 번째 이유이다. 비록 TDD를 실천하진 못했지만 시간 날 때마다 테스트 코드를 작성해두어야겠다.

 

프로젝트가 약 보름 정도 남은 시점에서 threeJS로 구현하는 부분을 제외하고 거의 모든 기능을 완성했다. 아직 디테일이 남아있긴 하지만 프로젝트의 핵심 기능일 threeJS인 만큼 이제는 threeJS로 무언가를 구현하는데 모든 시간과 노력을 쏟아야 하는 시점이다. 다행이도 당초 계획된 스케쥴대로 진행되고 있다. 정확히 어제부터 시작했는데 youtube와 함께 다른 예제 코드를 뜯어보면서 우리가 활용할 수 있는 내용을 공부하고 있다. 우선 전시관을 만들기 위해서 하나의 공간을 만들어야 했다. 바닥을 만드는 건 그리 어렵지 않았지만 뚫리지 않는 벽을 세우는 방법을 찾지 못했는데 use-cannon hook에서 제공하는 Physics 인터페이스로 원하는 형태의 벽을 만들 수 있었다. 4면을 벽으로 두르고 이동이 가능한 카메라 물리 객체를 안에 두어 이동시켜보았다.

 

Findings (배운 점)

1. 피그마를 다루는 방법
2. threeJS, three/fiber, three/cannon 으로 3D world 만들기
3. 리액트에 타입스크립트 적용하기

 

Affirmation(자기 선언)

학습한 내용을 정리한다