나의 2022년을 열었던 프로젝트가 끝났다.
기획, 디자인부터 개발, 배포까지 모든 것을 해야 했기에
매일의 하루는 길었고 7주라는 기간은 짧았다.
힘들지 않았다면 거짓말이다.
그러나 새로운 것을 배우고, 도전하고, 또 개선하면서
한층 성장했다는 느낌이 든다.
🤔 어떻게 진행했냐면
1. 기획
(2022.01.04 ~ 2022.01.12)
프로젝트 큰 틀은 ‘SNS’ 였다.
우리 팀은 배포를 하고, 유저를 받는 실 서비스를 만들자는 목표를 세웠다.
그래서 우리에게 가장 접근성이 높은 유저 그룹인 SSAFY 교육생들을 타겟으로 설정했고
니즈를 분석한 끝에
취업 정보 제공 + 스터디 모집 플랫폼 + 커뮤니티 기능이 있는 서비스를
우리의 프로젝트 주제로 설정했다.
고민의 과정은 우리의 FigJam에 린 캔버스로 잘 담겨있다.
이후 상세 기획은 프로토타입을 기반으로
Figma에서 함께 진행했다.
2. 디자인
(2022.01.06 ~2022.01.13)
디자인은 내가 맡아 진행했다.
처음에는 우리 기획을 토대로 와이어 프레임을 만들고
서비스 이름이 정해진 뒤 메인 로고를 만들었다.
그리고 이를 토대로 전체 디자인시스템에 사용할 스타일 가이드를 수립했다.
그 다음부터는 컴포넌트 공장이 되었는데,
덕분에 Figma의 Auto Layout 기능과 Variants 기능을 쓸 수 있게 되었다. 👩🏭
그리고 컴포넌트를 레이아웃에 하나씩 올리면서 프로토타입을 완성해나갔다.
후반 프론트 작업은 디자인 없이 진행하기도 했지만,
초반 프로토타입을 어느정도 구성해놓은 덕분에 화면이 기획했던 대로 뽑혔던 것 같다.
3. 개발
(2022.01.11 ~ 2022.02.17)
우리는 프론트와 백을 완전히 분리해서 진행했다.
백 팀원들의 빠른 피드백과 상세한 API Document 덕분에 잘 협업할 수 있었다. 😊
CDD
프론트엔드는 기본적으로 스토리북 기반의 컴포넌트 주도 개발을 진행했다.
Atomic 디자인과 유사하게,
가장 작은 컴포넌트부터 시작해, 이를 조합해 큰 컴포넌트와 레이아웃으로 연결시켰다.
비록 7주라는 짧은 시간 안에 하기엔
너무 많은 작업량이 필요했지만,
그만큼 배운 점도 많았고
전체 레이아웃에서 보이는 통일감이 좋았다.
또, 하나의 컴포넌트에 집중하면서,
또 테스팅 과정을 거치면서 개발할 수 있는 스토리북의 장점을 여실히 느껴서,
앞으로도 이러한 방식을 자주 채택하게 될 것 같다.
(다음에는 온전한 Atomic 디자인을..)
4. 배포
(2022.02.12 ~ )
배포는 우리 팀 배포 장인✨들이 진행해줬다.
버전도 다음과 같이 상세하게 기록하면서 하고있다.
| 버전 | 업데이트 내용 | 업데이트 날짜 |
|---|---|---|
| v1.0.0 | - SSAFE 서비스 오픈 | 22.02.12 |
| v1.0.1 | - AWS S3 Image Server CORS 수정 - 댓글 작성자 Response 통일 | 22.02.12 |
| v1.0.2 | - 게시판 새로고침 시 목록으로 이동하는 오류 수정 - 유저 닉네임 중복확인 및 프로필 사진 오류 수정 |
22.02.12 |
| v1.1.0 | - 관리자 페이지 추가 - 랜딩 페이지 수정 | 22.02.12 |
| v1.2.0 | - 알림 기능 추가 - Admin 알림 API 추가 | 22.02.12 |
| v1.3.0 | - footer 내용 생성(만든 사람, 이용 약관, 개인정보처리방침 등) 및 링크 연결 | 22.02.14 |
| v1.3.1 | - 첫 접속 시 랜딩 페이지 type error 수정 - 채용 상세보기 시 관련 스터디가 로딩되지 않는 오류 수정 |
22.02.14 |
| v1.3.2 | - 디테일 페이지에서 Refresh시 Home redirect 현상 수정 - main 페이지 carousel banner 연결 - 취업 정보 페이지 마감임박 버튼 수정 |
22.02.16 |
프로젝트 공식 일정은 끝났지만,
우리 팀은 앞으로 유지 보수와 서비스 운영을 이어갈 것이기 때문에,
위 내용은 앞으로도 이어갈 예정이다!
🐣 무엇을 배웠냐면
1. React
처음으로 React를 진득하게 써봤다.
useState, useEffect 뿐만 아니라
useReducer, useCallback, useRef 같은 hook도 다양하게 써봤다.
hook에 조금 익숙해지니
Vue의 Lifecycle Hook 보다 훨씬 마음에 들었다.
그리고 Vue를 쓸 때보다 JavaScript와 더 친해졌다.
앞으로 모든 프로젝트는 React로 해야겠다!고 생각했다.
2. 컴포넌트 폴더 구조에 대한 고민
컴포넌트를 한창 찍어내던 중,
폴더 구조 변경 만으로 약 일주일을 보낸 적이 있다.
Atomic을 도입하기엔 늦었고,
그렇다고 이대로 가기에는 여러 단위의 컴포넌트가 뒤섞여있었다.
그래서 여러 스토리북 레퍼런스를 찾아보고,
고민하고, 또 토론한 끝에 지금의 폴더 구조가 나왔다.
src
├── _shared
├── components
│ ├── commons
│ ├── index.js
│ └── patterns
├── containers
│ ├── commons
│ ├── CommunityPage
│ ├── index.js
│ ├── JobPage
│ ├── LandingPage
│ ├── Loading
│ ├── MainPage
│ ├── MyPage
│ └── StudyPage
├── foundations
├── layouts
└── pages
├── CommonPage
├── CommunityPage
├── index.js
├── JobPage
├── LandingPage
├── LoginPage
├── MainPage
├── MyPage
└── StudyPage- shared :
color,font-size등 속성 선언을 담아두는 폴더 (컴포넌트 X) - foundations : 아이콘, 로고 등 기초 컴포넌트
- components/commons : 버튼, 인풋 등 기본 컴포넌트
- components/patterns : 기본 컴포넌트를 조합한 다음 단계의 컴포넌트
- layouts :
grid,flex등을 이용한 컴포넌트 목록의 레이아웃 - containers : 위 컴포넌트에 비즈니스 로직을 담기 위한 폴더
- pages : 비즈니스 로직 없이 container의 조합으로 완성된 페이지
폴더 구조에 대해 고민하며 내린 결론은,
폴더 구조에 정답은 없다! 라는 것이다.
고민하고 또 변경했음에도, 여전히 개선할 부분이 존재한다.
아마 앞으로의 프로젝트에서도
폴더 구조에 대한 고민은 계속 이어질 것 같다.
3. Recoil과 React-Query
Recoil과 React-Query를 같이 사용했다.
Recoil은 테마 (라이트/다크모드), 유저 로그인 상태 등 전역 상태를 관리했고,
React-Query로 데이터 상태를 관리했다.
또, React-Query를 사용하면서 React의 Suspense도 적극적으로 사용했다.
덕분에 SPA의 참맛을 알아버렸다.
앞으로도 Recoil & React-Query 조합을 자주 사용할 예정이다. (thanks to 편안님..)
😥 아쉬운게 있다면
1. 코드 리뷰
위에서도 언급했지만, 7주라는 기간에 비해 작업량이 너무 많았다.
그래서 컴포넌트를 빠르게 찍어내는데 급급해
제대로 된 코드 리뷰를 하지 못했다.
(PR 올리면 Approve만 했을 뿐..)
react를 공부하며 작성한 초반 코드는 많이 개선되었지만,
그럼에도 여전히 개선할 부분이 많다.
유지 보수 기간에는 진득하고 꼼꼼한 코드 리뷰에 도전해보려고 한다.
2. 디버깅 기록을 남기지 않은 점
우리 팀의 공용 Notion에는 에러 기록란이 있다.
그러나 프론트엔드는 아무런 기록도 남기지 않았다. 🥺
같은 문제로 또 고민할 미래의 나를 위해
간단한 기록이라도 남겨둘 걸 그랬다.
다음 프로젝트와 ssafé 유지보수 기간에는 사소한 문제라도 기록해보려 노력해야겠다.
😚 마무리
7주간 같이 고생하고,
또 마지막 날에는 함께 새벽 3시 반까지 버텨준
팀 moramoram 모두에게 감사의 인사를 전한다. 🤗
(다음 프로젝트도 잘 부탁해!)
🤗 링크
ssafé
i6a604.p.ssafy.io
moramoram
SSAFY 6기 A604조 모람모람(moramoram)의 Notion입니다.
www.notion.so
Figma
Created with Figma
www.figma.com