* 실습 환경 : VSCode, 웹브라우저(Chrome), Firebase
* 활동 기간 : 09.30. ~ 10.07.
1. 와이어 프레임
1) 기존 와이어프레임
2) 페이지 추가
2. 내가 구현한 것
1) 멤버 소개 페이지 템플릿(member.html)
(1) 상단 구현(header) : 팀 소개 버튼과 멤버 소개 버튼은 클릭 시 해당 페이지로 이동
(2) 등록 박스(postingbox) : 사진 링크, 이름, MBTI, 등 정보 입력 후 등록 버튼 클릭 시 카드 생성
(3) 멤버 카드(membercards) : 수정 버튼(연필), 삭제 버튼(휴지통) 기호 넣고, 코딩'치킨'이기에 달걀 그림으로 디자인. 가시성 높이기 위해 줄(line) 추가
2) 멤버 상세 페이지(memdetail.html)
(1) 상세 페이지 영역(container) : 확대 버튼(돋보기) 클릭한 그 멤버의 id 와 일치하는 내용 출력
(2) 디자인 : 기존 멤버 카드의 디자인 그대로 구현
(3) 멤버 카드와 노출되는 내용 차이 두기 : 멤버 카드는 일부만 출력되게 하고, 상세 페이지는 전부 출력되도록 함.
※ 상단 디자인과 돌아가기 버튼은 다른 팀원분이 추가.
3. 발표를 위한 정리
1) 페이지별 주요 내용
(1) 팀소개 페이지(CodingChicken_TeamPage.html)
- 부트스트랩 적용
- 팀소개/멤버소개 버튼 클릭 시 페이지 이동
- 각 카드들에 1.05배 확대되는 hover 효과 적용
(2) 멤버소개 페이지(member.html)
- 수정/확대 버튼 클릭 시 등록페이지(posting.htm)l/상세페이지(memdetail.html)로 이동. 이동 시 해당 멤버 id 값 가져감.
- 삭제 클릭 시 해당 멤버와 id 값 일치하는 카드 삭제
- 멤버카드 등록하기 버튼은 shadow를 통해 애니메이션 효과 적용함.
- Firebase에 연동되어 데이터 가져옴.
(3) 멤버 상세 페이지(memdetail.html)
- id 값을 받아오고, 해당 id 값에 일치하는 내용 있으면 출력.
- 돌아가기 버튼 클릭 시 member.html 로 이동
- Firebase에 연동되어 데이터 가져옴.
(4) 등록 페이지(posting.html)
- 수정 시 사용할 경우, 받아올 id 값이 있으면 가져와 해당 내용 수정 후 저장
- 등록 시 사용할 경우, 받아올 id 값이 없기 때문에 새로 입력하여 저장
- 등록 버튼 클릭하면 작성한 데이터들이 result에 묶여 Doc에 추가(addDoc)하거나 수정(updateDoc)한다.
- 등록 버튼에 shadow를 넣어 애니메이션 효과 적용
- Firebase에 연동되어 데이터 가져옴.
2) 후기
(1) 특별히 신경썼던 점
입문자에 가깝다 보니 난이도 조절에 중점을 두었습니다. 두 페이지를 분담하여 진행하고, 끝나는 대로 멤버 소개 상세페이지를 추가하고, 소개내용 등록페이지를 추가하는 등 점진적으로 프로젝트의 완성도를 높였습니다.
(2) 어려웠던 점
다수가 아직 웹 개발을 제대로 해본 적이 없던 상태였기 때문에 구현하고자 하는 기능이 현재 학습한 수준에서 가능한 것인지 판단하는 것이 어려웠습니다. + 상황 상 다른 팀원이 어느 정도 진행했는지 파악하기 어렵다보니 그 점이 우려되었습니다.
(3) 4일간 어떤 공부를 해서 적용했는지
프론트엔드 부분은 HTML, CSS, JS를, 백엔드는 Firebase.. 학습한 것들을 활용하여 진행하였습니다.
(4) 어떻게 해결했는지
역할 분담이나 어떤 기능을 구현할지에 대해서는 팀장님과 튜터님의 조언을 참고하여 적절하게 진행되었습니다. 또한 각자 수정 사항 발생시 즉각적으로 깃에 올리고 전달을 하여 바로바로 피드백을 주고 받을 수 있었습니다. 회의할 때 목표 결과물을 최대한 구체화하고 진행하여 소통에 별 무리 없이 프로젝트를 구현할 수 있었습니다.
4. KPT 회고
1) Keep (현재 만족하고 있는 부분)
(1) 팀원들 모두 서로의 의견을 수용해주는 분위기
(2) 팀원들 모두 맡은 일에 최선을 다 하고 기한 엄수함.
2) Problem (불편하게 느끼는 부분)
(1) 기술적 지식 부족에 대한 어려움 (깃 commit 을 터미널이 아닌 웹으로 진행함)
(2) 학습 외적인 지식을 활용하지 못한 것의 아쉬움
3) Try (해결책, 당장 실행 가능한 것)
(1) 학습하지 않은 기능도 튜터님이나 구글링을 활용해서 시도하기. 즉, 구현이 가능할지 아닐지를 떠나서 일단 해보고 싶은 것을 시도해보고 구현하다가 모르는 부분은 도움을 요청하는 방식으로 진행하기
(2) 깃에 대한 충분한 공부.
(3) 개인 Repository를 생성하여 충분한 연습해보기
'과제리뷰' 카테고리의 다른 글
| [CH4개인과제] 일정 관리 앱 서버 (1) | 2024.11.08 |
|---|---|
| [숫자야구] 피드백 이후 개선 (0) | 2024.10.29 |
| [계산기] 피드백 이후 개선 (0) | 2024.10.29 |
| [CH3개인과제] 숫자 야구 (0) | 2024.10.23 |
| [CH2개인과제] 계산기 (0) | 2024.10.16 |