[유데미x스나이퍼팩토리] React 2기 - 프로젝트 1주차 기획 회고

8/31까지 사전직무교육과 프로젝트 설명회 및 팀 수당 설명회를 마치고

9월 1일부터 4주간의 프로젝트 기간이 시작됐다!

나는 (주)테라파이 기업에서 제공해준 프로젝트에 참여하게 되었다.

테라파이는 전세사기 예방을 위한 부동산 금융케어 플랫폼인 세이프홈즈 서비스를 제공하고 있다.

https://safehomes.kr/

세이프홈즈-부동산 거래 이제 안심하세요.

 

프로젝트 소개

테라파이에서 제공해준 프로젝트는 공인중개사들을 위한 서비스였다. 매물 관리, 계약 관리 서비스를 통해 데이터를 효율적으로 관리할 수 있게 하고, 등기/대장을 열람하는 서비스까지 있고, 기존 세이프홈즈 서비스를 통한 리포트까지 받을 수 있는, 정말 공인중개사분들이 좋아할만한 서비스다!

Figma로 화면 디자인과 요구사항까지 친절하게 제공해주셔서 이에 맞춰 개발하면 되고 

하나 아쉬운 점은 api가 미리 제공되지 않고 개발 중에 제공받을 수 있을 것 같다. 물론 현업에서도 시작하자마자 api가 나오지는 않지만 데이터 구조(json구조)를 같이 의논하기 어렵다는 점이 아쉬운 것 같다.

하지만 화면 디자인보고 빨리 만들어보고싶다는 마음이 커져서 열심히 작업하다보면 api도 제공받는 타이밍이 올 것 같다😃

 

팀 소개

우리팀은 나 포함 총 4명이다! 리액트로 팀 프로젝트 경험 있는건 나 혼자지만, 다들 한 명도 빠짐없이 열정적이고 다른 팀원에게 폐 끼치지 않으려고 노심초사하신다🥹 감동받아서 나도 더 팀과 프로젝트를 생각하게 된다..!!!

팀장과 팀 지원금을 위한 서류에 고통받아야하는 팀대표자를 정할때도, 난 원래부터 팀장할 생각이 있었고 팀원 두 분이 저 힘든 팀대표자를 적극적으로 맡겠다고 해주셔서 회의도 너무 수월하게 끝났다. 

(나는 솔직히 팀장보다 팀대표자가 더 힘들어보였다)

우리 팀 분위기가 너무 좋아서 남은 3주동안도 너무 기대가 된다ㅎㅎ 프로젝트 끝나고 나서도 계속 연락하며 지낼 것 같다.

또, 그렇게 되도록 팀장이 된 내가 더 신경써서 이끌어가봐야겠다.

 

그리고 팀명을 정해달라고 하셨다.

팀명을 무엇으로 할까 하다가, 리액트 수업 중 Custom Hook이 생각나서 useTeamWork 팀으로 아이디어를 제시했고, 팀원 모두 좋아해주어서 이것으로 정했다! (아래는 개인정보보안상 이름은 가리고 적었다ㅎㅎ)

const 성공 = useTeamWork(['나', '팀원1', '팀원2', '팀원3'])

 

성공을 반환하는 로직을 가지고있는 팀이라는 의미를 담고싶었다😁

내가 지었지만 솔직히 좀 잘 지은거 같다고 생각한다ㅋㅋㅋ

 

1주차 - 팀장, 기획

내가 팀장을 맡게되었고, 1주차에는 기획부터 시작했다.

먼저 협업을 원활하게 하기 위해서 아래 내용들을 수행했다.

 

1. 디스코드 팀 서버 개설

2. 우리팀 전용 구글 계정 생성

3. 2번에서 개설한 구글 계정으로 Figma 계정 생성 및 테라파이에서 제공해준 Figma 파일 내용을 옮기면서 우리 팀에 맞게 재배치(page 나누기, 컴포넌트 분리 등)

4. 2번에서 개설한 구글 계정을 Notion 계정 생성 및 기획안 작성

5. GitHub Organization 생성해서 Repository 생성

6. 생성한 Repository에 프로젝트 초기 세팅(vite로 react와 typeScript 설치, router, 폴더구조, 라이브러리 설치)

 

디스코드 팀 서버 개설

이전에 스터디 진행하면서 디스코드로 한 번 운영해보니, 이번에 다시 개설하는 게 어렵지 않았다.

크게 공지, 일정, 채팅, 메모, 음성 이렇게 5개의 카테고리를 나누었다.

 

공지 채널은 말 그대로 공지사항이나 스나이퍼팩토리 또는 테라파이에서 공지해주는 내용을 모두 올려놓았다.

굳이 여기에 둔 이유는, 팀원들이 노션이나 ppt 자료를 매번 일일이 찾아보면서 알게되는 수고를 덜어주고 싶었다.

특히 회계관련 내용이 진짜 빡세다. 작성해야할 서류와 준비해야할 증빙 자료도 항목별로 달라서 최대한 디코에 담아두려고 노력했다.

 

일정 채널은 (아래에서 다시 말하겠지만) 매일 목표를 적어보는 규칙을 세우게 되어서, 이걸 업로드하는 채널이다. 

내가 프로젝트를 한 번 진행해보니, 기록은 진짜 남는 장사다. 그래서 디코 채널들은 다 기록을 위한, 어쩌면 강박처럼까지 보이는 의도가 담겨있다고 보면 된다😆

물론 강제성을 절대 부여하지는 않았다. 프로젝트 진행에 엄청난 영향을 주는 규칙이 아니고, 애초에 프로젝트 진행을 위했다기보다 팀원들의 취업에 도움이 되었으면 해서 세워놓은 것이기 때문이다.

 

채팅 채널은 말 그대로 자유롭게 대화하는 채널이다. 활동과 회의가 나누어져있기는 하지만 딱히 구분없이 사용하고 있다. 대신 회의 내용을 올릴 때는 회의 채널에 더 올리는 편이다.

 

메모 채널은 사진에는 일부러 숨김처리(토글접기) 해놓았는데, 저 안에는 팀원 이름별로 채널을 개설해놓았다. 프로젝트 진행 중 자유롭게 메모장처럼 사용해놓고 나중에 찾아보고 싶을 때 이용하라고 팀원을 위해 개설해놓았다. 이건 알림도 다 꺼놓으라고 해놓았다. 

나도 해야할 일 정리하거나 유용한 자료나 에러 마주했을 때 등의 상황에서 사용하고 있다.

 

마지막으로 음성 채널은 같이 모여서 회의하거나 질문 답변할 때 사용하는 회의 채널이다.

매일(평일만) 데일리스크럼 진행할 때나 질문 생겼을 때 화면 공유로 같이 토의하고 있다.

 

우리 팀원들 모두 내가 만들어놓은 디코를 좋아해주시고, 디코 처음 쓰시는 분도 계시는데 적극적으로 이용해주셔서 너무 고맙다.

솔직히 내가 팀원의 입장에서 팀장이 이렇게 갑자기 던져주면 이 사람은 무슨 정리&메모 강박이 있나 했을거 같은뎈ㅋㅋ 

오히려 너무 좋아해주셔서 감사했고 다행이었다!

 

구글 계정 생성 및 Figma와 Notion 세팅

useTeamWork10 (10팀이라서 ㅋㅋㅋ)이라고 구글 계정을 만들었다.

Notion은 원래 스나이퍼팩토리에서 만든 노션 안에다가 기획안을 적었었는데, 웹 게시도 안되고 수정 권한도 모든 팀에게 있어서 일부러 따로 만들어서 옮겨놓았다. 우리 팀은 소즁하니까...⭐️

 

Notion 기획안

아직 미완성이지만 이런 틀로 잡았다.

이 다음에 프로젝트 완성되면, 결과물 보여주는 파트와 Member 소개 파트가 있다. (여기서는 생략)

 

프로젝트 초기 세팅

우리팀명으로 GitHub Organization을 생성하고, 우리 팀원들을 초대한 후 Owner로 권한을 바꿔주었다.

그리고 프로젝트 결과물을 업로드할 (프로젝트 명 : JobNest) JobNest Repository를 만들었다.

(추가로 Git 테스트용 Repository도 만들어서 오전 데일리스크럼 회의때 팀원들과 함께 Git의 여러 명령어들을 사용해보면서 Git에 익숙해지는 시간을 가지기도 했다.)

아래에 다시 적을 거지만, 우리가 정한 기술 스택으로는 React, TypeScript, TailwindCSS가 있다.

여기에 npm 대신에 yarn을 사용하기로 했다.

그래서 yarn으로 Vite를 사용해 React, TypeScript, TailwindCSS를 설치했고, react-router-dom으로 라우터 설정과 Layout도 만들어놓았다. 자세한 내용은 새로운 글에 올려보겠다..!!

이런 과정들은 사전직무교육에서 배운 내용들의 도움을 정말 많이 받았다.

추가로 TanStack Query와 React-Hook-Form과 React-Icons도 같이 설치하고 깃허브에 올렸다.

 

우리는 Git-Flow 브랜치 전략을 활용하기로 해서, 회의 때 각자 develop 브랜치에서 feature/만들기능이름 브랜치를 따로 생성하고 작업을 시작했다.

 

기술스택

언어 : TypeScript

컴파일러 : Vite

프레임워크(라이브러리) : React

상태 관리 : Zustand, TanStack Query(React Query)

스타일링 : TailwindCSS

패키지 매니저 : Yarn

Form : React-Hook-Form

 

협업 규칙

1) 평일 오전 10시 반에 15분동안 데일리스크럼 회의

2) 매주 목요일 11시 반에 오프라인 회의

3) 매일 목표 적어서 디코에 올리기

4) 3일에 한번씩(스프린트 종료 단위로) KPT 회고 작성하기

 

 

일단 내가 원하는 일정은, 3주 안에 요구사항대로 구현을 끝내고,

3주 ~ 마지막주에 웹 접근성과 성능 최적화와 테스트코드 작성을 해보는 것이 목표다.

추가로, 공인중개사분을 실제로 섭외해서 이 서비스에 대해서 대화를 나누어보는 것도 진행해보고싶다.

---

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.