![IT-MOJI [잇모지] 프로젝트 아이콘](/_next/image?url=https%3A%2F%2Fgithub.com%2Fit-moji%2Fit-moji-client%2Fblob%2Fdev%2Fsrc%2Fapp%2Ficon.png%3Fraw%3Dtrue&w=96&q=75)
IT-MOJI [잇모지]
| 이름 | IT-MOJI [잇모지] |
|---|---|
| 설명 | IT인들끼리 MO여 JI식을 나누는 모임 관리 서비스 🧑🏻💻 |
| 상태 | MVP 배포됨 (진행 중) |
| 유형 | 팀 프로젝트 |
| 인원 구성 | 프론트엔드 2명, 백엔드 1명 |
| 역할 | 프론트엔드 리드, UI/UX 디자인 총괄 |
| 기간 | 2025.01 ~ 운영 중 |
| 도메인 | https://it-moji.com |
| GitHub | https://github.com/it-moji/it-moji-client |
| StoryBook | https://it-moji.github.io/it-moji-client |
| MAU | 집계 중 |
| 사용 기술 |
|
| 기여 |
|
| 관련 포스트 | 관련 포스트가 없어요 |
목차
프로젝트 소개
IT-MOJI는 IT인들끼리 모여 지식을 나누는 모임이라는 뜻으로 24년 02월 부터 참여중인 모각코 스터디 커뮤니티를 IT 기술을 활용하여 편하게 운영하기 위해 시작된 프로젝트입니다. 진행중인 프로젝트이며, 현재는 MVP인 출석 관리 -> 디스코드 TIL 텍스트 파싱 기능까지 구현되어 있지만, 추후 스터디원 모집 관리, 스터디원 출석 집계 및 통계 관리 등 다양한 기능이 추가될 예정입니다.
주요 기능
| 구현된 MVP 기능 | 출시 예정 기능 |
|---|---|
|
|
운영진 대상 안내 영상 (소리 O)
역할
- 프론트엔드 개발 리드 및 운영, 전반적인 UI/UX 및 브랜딩 디자인을 총괄하였습니다.
- 프로젝트 초기 페어 프로그래밍을 도입하여 팀원과의 협의를 통해 컨벤션 수립을 이끌었습니다.
- 운영진 대상 페이지 사용법 안내 영상 또한 모두 직접 제작하였습니다.
사용 기술
기술적 고민
해당 프로젝트에서는 이전에 진행했던 팀 프로젝트인 어트랙션에서 부족했었던 저 또는 팀원에 대한 의존도를 낮추는 것이 목표였기에, 팀원들의 숙련도, 프로젝트의 요구사항, 유지보수성 등을 종합적으로 고려하여 모든 기술 스택 선택에 임했습니다.
트러블 슈팅
Barrel File 순환 참조 이슈
stories.tsx 파일에서 기본 컴포넌트와 다른 컴포넌트를 args 파라미터 또는 render 파라미터에서 렌더링하려고 시도할 경우 작성된 스토리 북 페이지 접근 시 아래와 같은 에러가 표기 되는 문제가 있었습니다.
해당 에러는 당시 팀에서 컨벤션으로 사용하고 있던 Barrel File 때문에 생긴 순환 참조(Circular Dependency) 이슈였습니다. 당시에는 참조하는 경로를 수정하여 해결했지만, 추가적으로 찾아보니 Barrel File을 사용할 시 프로젝트 실행 및 빌드 속도에 영향을 준다는 분석과 위와 같이 직간접적인 영향을 주는 사례를 몇 가지 확인할 수 있었습니다. Barrel File은 사용할 시 import 구문이 깔끔하게 작성되어 채택했던 컨벤션이지만 이러한 문제점들이 발견되었기에 아마 다음 프로젝트 부터는 Eslint 플러그인을 활용하여 import 구문을 재정렬하는 방식으로 Barrel File 컨벤션을 대체할 것 같습니다.
리액트 컴파일러 메모이제이션 관련 이슈
저희는 Mantine Tiptap 확장 라이브러리를 사용하여 텍스트 에디터가 필요한 기능을 구현하였습니다. 하지만 함께 사용하고 있던 React Compiler의 컴포넌트 메모이제이션 때문에 텍스트 에디터 컴포넌트가 정상적으로 리렌더링이 되지 않아 정상적으로 동작하지 않는 부분이 있어 use no memo 지시어를 적용하여 우회하였습니다.
참조
인사이트
2명으로 시작한 작은 팀이지만 처음으로 프론트엔드 팀을 리드해 본 프로젝트입니다. 저 또는 팀원이 없어도 프로젝트가 원활히 진행되는 것을 1순위 목표로 모든 프로세스에 임했습니다.