스타트업 밸리 FE :: 여름이었다, 🍉

🍀 사이드 프로젝트 협업 툴 스타트업 밸리 FE⭐

https://www.startupvalley.site/

Startup Valley

 

9oormthon-univ/2024_BEOTKKOTTHON_TEAM_28_FE: 🍀 사이드 프로젝트 협업 툴 스타트업 밸리 FE⭐ (github.com)

GitHub - 9oormthon-univ/2024_BEOTKKOTTHON_TEAM_28_FE: 🍀 사이드 프로젝트 협업 툴 스타트업 밸리 FE⭐

 

서비스의 주요 기능과 이를 구현하기 위해 사용한 기술 스택을 알려주세요!

 

스타트업 밸리는 디스코드를 활용하여 작업을 기록하는 협업 툴입니다. 개발자들끼리는 깃허브를 통해서 코드리뷰도 하고, 프로젝트 작업 관리도 할 수 있는데 PM과 디자이너를 포함한 비개발자 동료들과도 작업 현황을 비교할 수 있길 바라는 마음에 제작된 프로젝트입니다.

 

프론트에서는 작업한 기록을 모아 보여주는 웹 대시보드를 제작했습니다. 순위를 통해서 프로젝트 참여를 독려할 수도 있고, 질문 답변을 한꺼번에 모아보며 쉽게 체크할 수 있어요. 한 페이지 안에서도 굉장히 많은 요청을 통해 꽉꽉 담아서 보여줬습니다. 대시보드 특성 상 api가 많아질 수 밖에 없고 엄청난 기술적 도전보다는 마크업 위주여서 특별한 라이브러리를 사용하기보다는 평소에 장점이라고 느끼던 라이브러리들을 채택하여 사용했어요.

구현 과정에서의 도전과 트러블 슈팅 방법, 그리고 코드 구조와 패턴에 대해 공유해 주세요

Atomic Design Pattern

 

디자인을 받았을 때 비슷한 컴포넌트들이 재사용되는 경우가 많아서 아토믹 디자인 패턴을 활용했습니다. 프로필 타이틀을 보면시간이 표시되는 경우, 다른 페이지에서 포함하지 않는 케이스가 있어서 이름, Tooltip을 각각 atom으로 나누고 이름과 Tooltip을 담는 컴포넌트, 이름, Tooltip, 시간을 담는 컴포넌트를 각각 mocule로 디자인하여 조립형으로 사용하습니다. Tooltip같은 경우에도 variants를 전달하는 방식으로 한 컴포넌트에서 두가지 디자인을 넣어서 사용했어요.

 

Proxy Server

const axiosInstance = axios.create({
  baseURL: isDev ? apiBaseUrl : '/api',
  timeout: 5000,
  withCredentials: true,
});

 

마지막 날 급하게 토큰 부분을 수정하면서, 로컬에서의 요청을 차단했었어요. 디벨롭 과정에서 이걸 열어야하나 고민하다가, 클라이언트에서 프록시 서버를 통해서 CORS 에러를 해결했습니다. 프록시 서버같은 경우에는 개발환경에서만 가능하다는 단점이 있어요. 처음에는 개발 환경에서 빠르게 진행했기 때문에 괜찮았지만, 시간이 지날수록 이 케이스를 인지하고 있는게 버겁더라구요. 고민해보다가 환경 변수에 개발환경임을 명시해서 개발환경과 프로덕트 환경에 조건문을 걸어 해결할 수 있었습니다. 

 

React Custom Calendar Heatmap 라이브러리 제작

벚꽃톤 당시에는 시간이 없어서 react-calendar-heatmap 라이브러리를 통해 디자인과 다른 커밋 박스를 보여줘야했어요. 값만 넣어주면 자동으로 만들어줘서 편리하긴 했지만, 디자인을 완벽하게 구현할 수 없어서 계속 아쉬움이 남았습니다.

그래서 해커톤 이후 직접 라이브러리 구현에 도전해봤어요! 특히 디자인 뿐만 아니라 기존의 라이브러리도 최근 업데이트가 2년 전이었기 때문에, 컴포넌트를 새로 만드는 김에 다른 사람분들도 사용할 수 있도록 패키지로 배포해보았답니다. react-custom-calendar-heatmap - npm (npmjs.com)  

 

아직 미완성인 로직이 많고 수정해야할 부분이 훨씬 많은 패키지지만 열심히 안정화를 시켜서 다른 분들도 사용하게 만들고 싶어요.

 

성능 최적화와 반응형 디자인에 어떤 방식으로 접근 하였나요?

 

해커톤 당일에는 안되면 당황해서 급하게 수정하다보니 성능이 최악이었요.. 이것말고도 객체로 저장해야하는걸 string배열로 두번 씩 저장해놓거나 컴포넌트 안에서 놓다가 부수효과 다 생기게 해놨더라구요 특히 자바스크립트로 하다보니까 타입 추론이 안되는 경우가 많아서 더 심각했던거 같아요. 렌더링 최적화를 열심히 진행하고 있습니다.

아무래도 해커톤이다보니 반응형까지 하기는 시간이 너무 부족했어 거의 포기를 하고 갔어요. 그래서 지금 반응형으로 디벨롭 해야하는게 쌓여있답니다.. 랜딩페이지 1차적으로 반응형 제작해서 어떤 서비스인지 알 수 있게 적용했어요. 모바일버전에서는 아예 다른 페이지로 들어가는걸 막기 위해 레이아웃 위에 HOC를 걸어서 User Agent로 설정했습니다. 사실 지금은 이미지로 띄워주고 있는데, 생각보다 이미지가 많이 깨져서 빠르게 모달로 변경해야할거같아요.

 

앞으로의 기능 추가 및 개선 방향과 예상되는 트러블 슈팅 방법에 대해 작성해 주세요!

 

일단 앞서 말한 것처럼 유저가 사용하기 편하게 반응형을 구현해야할거같습니다. 사실 이미 태블릿, 모바일버전으로 반응형 디자인은 나와있어요. 눈물 흘리면서 적용 중입니다. 근데 언제 다될지는 모르겠어요.

 

그리고 개인적으로 라이브러리도 어디 내놓을만큼 안정화를 시켜주고 싶어요

 

특히 구름톤에서 만난 친구들과 작은 테크톡을 4개월동안 이어나가면서 다양한 인사이트를 얻을 수 있었는데, 공유받은 기술적 도전들을 저희 프로덕트에도 반영해보고 싶어요.