[Project] 멋쟁이사자처럼 아기사자 모집 사이트 Frontend
방학 동안 우체국 다니고 일본여행 다니고 하느라 바빠서 오랜만의 개발 현황
이번 학기부터 강남대학교 멋쟁이사자처럼 동아리 프론트엔드 운영진 파트를 맡았는데
신입 부원 모집 사이트를 만들기로 함
팀원은 총 8명으로 디자인 1명, 프론트엔드 3명, 백엔드 4명으로 구성
노션부터 기똥차게 만들어주고 회의부터 했습니다
매주 화요일마다 회의도 진행했음
우리 팀은 화요일 정기회의 전 월요일마다 임시 회의를 진행하기로 함
맨 처음 팀원간 개발환경이나 코드스타일을 정립하고 가야 할 것 같아서 자세하게 노션에 정리해 뒀음
기본적으로 TypeScript를 사용해서 디버깅할 때 타입에러랑 오류들을 잡고
빌드도구는 vite로 빌드시간을 크게 단축시키기로 함
저번 팀 프로젝트 때 props drilling 때문에 고생했던 경험이 있기 때문에
이번엔 상태관리 툴을 써보자고 제안했고 금방 배우기 쉬운 Zustand를 사용해 보자고 제안함
Zustand 핵심 정리
Zustand(주스탠드)는 작고 빠르며 확장 가능한 React 프로젝트에서 사용하는 상태 관리(Store) 라이브러리입니다.
www.heropy.dev
heropy 님의 블로그에 너무 유용한 글들이 많아서 공식문서보다 이해하기 쉬울 것 같아
팀원들에게 한 번씩 읽어보는 것을 추천했음
다음으로는 commit 시의 룰셋을 정의해 뒀는데
깃 커밋 시에 이모지나 메시지를 통일해서 커밋하면 보기 좋고 한눈에 들어와서
팀원들한테 제안했는데 좋다고 해주셔서 뿌듯했음
또 main 브런치에 바로 커밋하지 말고 Git-flow 도 한번 도입해 보기로 했음
우린 Git-flow를 사용하고 있어요 | 우아한형제들 기술블로그
안녕하세요. 우아한형제들 배민프론트개발팀에서 안드로이드 앱 개발을 하고 있는 나동호입니다. 오늘은 저희 안드로이드 파트에서 사용하고 있는 Git 브랜치 전략을 소개하려고 합니다. '배달
techblog.woowahan.com
그리고 디자인분이 작업해 두신 Figma에서 페이지 플로우가 없어서 프론트 개발할 때 헷갈릴 것 같아
페이지별로 컴포넌트를 나누어서 플로우 차트를 처음 만들어봤음
Mermaid | Diagramming and charting tool
Mermaid Diagramming and charting tool JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
mermaid.js.org
노션에 Mermaid라는 좋은 플로우 차트 라이브러리가 연동되어 있어서 간단하게 만들어 봄
JS 기반 다이어그램, 차트 툴이라고 함
---
title : 멋쟁이 사자 프론트엔드 페이지 플로우
---
flowchart
Main(Main)
Nav--> LoginPage --> |계정이 없으면| SingUpPage --> LoginPage --> MyPage
Nav --> |logo클릭| Main
Main --> FrontendIntroPage
Main --> BackendIntroPage
Main --> DesignIntroPage
FrontendIntroPage --> SectionSelectPage
BackendIntroPage --> SectionSelectPage
DesignIntroPage --> SectionSelectPage
SectionSelectPage --> |로그인 안했으면| LoginPage
SectionSelectPage --> FrontendQuestionPage
SectionSelectPage --> BackendQuestionPage
SectionSelectPage --> DesignQuestionPage
FrontendQuestionPage --> WarningPage
BackendQuestionPage --> WarningPage
DesignQuestionPage --> WarningPage
WarningPage --> CompletedPage --> Main
MyPage --> EditProfile
MyPage --> Passingresult
MyPage --> DevPage
그리고 Mermaid로 만든 컴포넌트 별 이름을 그대로 component 들의 이름으로 사용하기로 함!
컴포넌트별로 task를 나누어서 팀원회의 때 각자 파트를 나눴음
기능별, 이름별로 구분해 두기
나는 백엔드 API랑 연결하고 유저 회원가입, 로그인 부분과 Nav 바 페이지 내비게이션 등을 맡게 되었음
난이도랑 중요도로 task를 세분화해봤는데.. 더 조잡해진 것 같기도 하고 하다 보면 익숙해질 듯 함
Vercel로 임시 배포 파이프라인을 만들려고 했는데
이게 git organization에서 바로 Vercel로 배포하는 건 Pro 요금제를 사용해야 한다고 해서
약간의 편법으로 git action을 사용해서 내 개인 repository로 가져오는 방법을 사용해 봄
GitHub Organization 프로젝트를 vercel 무료로 연동하기 (+git actions)
github Organization에 속한 프로젝트는 vercel에서 유료(team plan)로 배포됩니다. 팀 프로젝트를 개인 레포로 클론해 무료(personal plan)로 배포하는 방법입니다.
velog.io
위 블로그를 참조해서 설정했음!! 감사합니다.
이제 organization에서
내 개인 repository
https://github.com/Neogul02/Likelion13-FE
배포된 vercel 사이트
https://likelion13-fe.vercel.app
이제 팀 노션에도 배포 링크랑 github 링크를 깔끔하게 정리해 주자
이제 커밋하면 바로바로 배포 확인까지 할 수 있다!