프로젝트 기간 : 2024.09.02 ~ 2024.09.27
프로젝트 주제 : React로 KTwiz 정보제공 페이지 만들기
📝 회고록
KPT (Keep – Problem – Try – Complete)
- Kepp (유지)
: 성공적으로 수행 / 긍정적인 경험 / 만족하는 부분 / 앞으로 유지할 부분
- Problem (문제)
:프로젝트 동안 발생한 문제나 어려움
- Try (시도)
:다음 스프린트에서 시도해 볼 새로운 아이디어나 개선 사항
- Complete (완료)
: 완료된 것들
KPT 회고록을 많이들 사용한다고 하길래, 나도 KPT
회고록을 담아보려고한다
오늘은 팀원들이랑 ktwiz의 프로젝트 킥오프 미팅을 했다
오늘 처음보는 팀원들이었지만 다들 밝고 성격이 좋아서 금방 친해졌다 :)
4주간 다같이 화이팅 !!!
📒 시작
1)
이전 프로젝트들은 맨 처음 배웠기에 당연하게cra로 구동했었다. 그런데 이번엔 서버 구동이나 빌드 속도 개선을 위해 프로젝트로는 경험해보지 않았던vite로 해볼까한다.
2)
상태관리는props drilling을 주로 쓰고, 전역적으로 사용을 해야할 때만zustand를 쓰기로 했다! 가볍고, 불필요한 코드가 적고, 직관적이기도 하고 요즘 트렌드인 zustand를 쓴 프로젝트를 경험해보고 싶었다.
3)
Git Repository 구축 (완료)
:개인 git vsorganization [조직]으로 채택!
└> 깃허브 주소 : 현재 private임
└> Zustand / styled-components 라이브러리 설치
4)
프로젝트 진행 계획서
└> 노션 및 피그마 기획 작업 (1주차)
- API 정의서
: 멘토님께서 따로 postman으로 전달해주심
우리 팀은 DB를 다뤄본 적이 없는 친구들이 대다수여서, 수업 때 배운 json-server를 이용하기로 했다.
└>
JSON-SEVER란?
- 아주 경량화된 미니 DB다!
- Rest API로 이루어져있어서 API를 호출할 때 restful의 디자인을 따르면 됨
1) npm install -g json-server 설치
2) db.json이라는 파일 만들어서 데이터 안에 넣어주기
└> 제일 밖에 있는 root에 만들어주기!
JSON-SERVER: 참고
✅ 개발환경 구축
Frontend: React (build : vite / version : 18.3.1 / port :5173)
DataBase: json-server
IDE: VSCode
언어: JavaScript, TypeScript, React
협업도구: Notion (문서화), Slack (git 연동 및 회의)
형상관리: Git (개발/배포 브랜치 전략)
🔥 TODO
✅ 개발 일정
240830 회의록
0주차 킥오프
- **9/3(화) 5시 오프라인 & ZEP 미팅 예정
- **[ WIZonFire 컨벤션] - 더 좋은 협업을 위해 숙지 필수!!!!
https://www.notion.so/989b7f6fcade45cda35cf6ac7f0e8b9b
우리는 제대로 하자는 마음으로 Waterfall방법론(폭포수)으로 진행하기로 했다.
애자일 방법론이 아닌 폭포수 방법론을 선택한 이유는
전통 개발 방식을 경험해보고싶기도 했고,
배포까지 할 예정이지만 단기 기업연계 프로젝트이기도 하고, 기존에 있던 ktwiz를 벤치마킹해서 만드는 것이기 때문에 순차적으로 진행할 수 있어서 전통적인 방법으로 개발해보자! 하는 마음에 기획 + 문서정리부터 차근차근 해보려고 한다
폭포수 방법론 : 참고
⏰ [ Todo List ]
- 각자 맡은 기능에 대한 컴포넌트 생각해오기
- 피그마 공부하기
- 부족하다고 생각하는 부분 공부하기 ex) Git - PR, issue 등
- 규칙(?)
📒 [ Meeting Day ]
1주차 (09.02~09.06) 예정
- 화요일에 공통 컴포넌트 정리 및 구조 설계 진행 예정
- 프로젝트 로컬 환경 셋팅 ( + Git fork 및 clone)
- 기획 토의 (+피그마)
✅ [ Check List ]
- css 스타일 - styled-components
- 라이브러리는 최대한 적게 쓰기 / 구현할 수 있는건 우리가 구현해보자!
- 상태관리 - (주)props drilling / (부) zustand는 꼭 필요할 때만
- .prettierrc 기본 설정 / eslintrc.json
=> 지수님이 (화)까지 목업 짜주시면, 수정/추가사항 같이 고민해보기 - 소통은 Discord & ZEP으로! 멘토님이랑 얘기할 때만 slack으로!
- 반응형 : 멘토님과 진행 상황공유하면서 추후 결정
☑️ [ Todo Later ]
- Github 멘토님 초대
- Kepp (유지)
: 성공적으로 수행 / 긍정적인 경험 / 만족하는 부분 / 앞으로 유지할 부분
라이브러리를 최대한 사용하지 않도록 공통컴퍼넌트 작업 진행
내가 맡은 역할은 [ footer / 텍스트네비게이션 / 페이지네이션 ] !
- Problem (문제)
- 팀원 한명의 부재로 => 역할 재분배 필요 ❗
- 어디까지 props로 받아와야하는지,
ex) selectbar가 다른 디자인으로 되어있으면 dropdown과 selectbar중에 어떤거로 사용해야하는지?
이런 간단한 디자인은 크게 신경쓰지않고 그대로 기존 웹사이트껄로 구현하려다보니까
어디까지 똑같이 따라해야하는지 헷갈려했다.
- Try (시도)
:다음 스프린트에서 시도해 볼 새로운 아이디어나 개선 사항
깃 이슈 + pr 올려서 진행하기
현재 팀원들이 깃과 친하지가 않아서 공통컴퍼넌트까지만 브랜치 파서
구두로 완료됐다고 말해주면 pull해서 작업하고 있다.
——————————————————————————
본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.
