- 기본 정보
- 팀명: I-WORLD
- 팀장: 김성훈
- 팀원: 유민아, 김민선, 이예진
- 팀 소개 : I 좋은 사람들, I 좋은 세상, 내일배움캠프 3기 spring b반 3조 I-WORLD입니다!
- 프로젝트 소개 : 싸이월드를 패러디하여 팀 소개와 팀원 소개를 하는 웹페이지 제작
- 팀 협업: 슬랙, 노션, 게더타운, github 이용
- 구현하고자 한 기능 - 기능 중심으로 역할 배정
- 메인 페이지 및 개인 페이지 구현(정적 페이지)
- 책갈피 기능
- 검색 기능
- 달성도 진행상태바 반영
- 방명록 페이지(방명록 추가, 삭제, 메인페이지에 띄우기)
- 사용하는 기술
- HTML
- JavaScript
- CSS
- Firebase ( + realtime database )
- 팀 계획
- 오전 9시: 출석 체크 후 하루 계획 회의
- 오후 8시 30분: 진척도, 문제점 공유.
- 상시 문제점 공유
- 와이어프레임 설계: 카카오 오븐 이용
GitHub - BMDK9/IntroTeam
Contribute to BMDK9/IntroTeam development by creating an account on GitHub.
github.com
메인페이지
TODAY 2002 | TOTAL 118 I-world 참고: https://www.cyworld.com 홈 김성훈 김민선 유민아 이예진 방명록
bmdk9.github.io
- 팀원분들이 작성해주신 기능 구현 과정 중 어려웠던 점 및 해결방법
- 달성도 기능
- 문제1: forEach문을 통해 DB의 데이터를 업데이트하고 반복문이 끝났을 때 reload() 메서드를 이용해 새로고침을 했을 때 DB 내용이 업데이트되지 않음
- 해결1: reload() 메서드를 반복문 안에 넣어 문제 해결
- 문제2: 데이터베이스에 add할 때 마다 새로운 문서가 생겨 가져올 값이 일정하지 않음
- 해결2: 한 문서 내에서 add가 아닌 update 함수 이용
- 방명록 기능
- 문제1: 동적으로 생성한 요소에서 클릭버튼을 클릭해서 삭제하는 기능을 구현할 때, 어떤 버튼이 눌리는지 정해져 있지 않아 생성 시 부여한 id값으로 요소에 접근하여 함수를 구현하는게 불가능
- 해결1: $(this)로 호출한 요소를 알 수 있다는 점, closest()나 parents() 함수로 부모 요소들에 접근할 수 있음. children()과 find()로 자식 요소들에 접근할 수 있다는 것을 알게되어 클릭한 요소의 부모 요소와 부모의 자식 요소들에 접근이 가능해짐.
- 문제2: 테스트 과정에서 내용이 일치하면 db에서 해당 데이터를 삭제하도록 했는데 내용에 띄어쓰기가 들어가면 closest(), children()으로 요소에 접근한 후 val()로 값을 반환했을때 띄어쓰기 전 내용까지만 반환되어 삭제가 불가능.
- 해결2: 삭제할때 내용 대신 띄어쓰기가 없는 autogenerated id값을 사용.
- 문제3: 메인페이지에서 이미 firestore database를 이용하고 있는데 configuration 이나 여러 세팅이 겹쳐서 realtime database도 함께 사용하기 어려워 보임
- 해결3: javascript 파일을 분리해서 realtime database이용하는 부분을 따로 뺐더니 둘 다 이용 가능해짐
- 기타: 노드 삭제를 위해 realtime database를 사용.
- 달성도 기능
- 나의 역할, 배운 점 및 소감
- 싸이월드를 패러디하여 와이어프레임, 메인 페이지 및 개인 페이지 html 및 css를 구현
- github를 통한 협업 방법에 대해 배움
- firebase에서는 데이터를 시간 순으로 저장하지 않음. 실시간 데이터베이스에서는 push()가 생성하는 id가 타임 스탬프에 기반하기 때문에 시간 순으로 정렬됨
- firebase 실시간 데이터베이스를 이용하여 데이터를 불러오고, 저장하고, 삭제하는 방법을 배움
- 여러 http 파일에서 공통되는 기능을 .js 파일로 분리한 후 import하여 사용하려는 과정에서 오류 발생 → <script scr=”… 부분을 <body> 내부 마지막에 작성함으로써 html 파싱 이후에 js가 로딩됨. 또한 <script type=”module” … 로 작성하는 경우 모듈은 로컬 파일에서 작동하지 않음
- firebase SDK 내 함수(getDocs, updateDoc 등)를 이용하여 검색창 기능, 버튼 기능, 체크 박스 상태 저장 및 진행 상태 바 반영, 방명록 기능을 구현하는 방법을 배움
- KPT 회고 작성:
- 나의 KPT
- Keep: 노션과 슬랙을 이용한 의사소통과 협업. 코드 문제점 공유. 정해진 시간마다의 회의.
- Problem: github 충돌에 대한 의견 제시를 더 활발하게. 코드를 개선하고자 할 때 미리 무엇을 어떻게 수정하고자 하는지 알리기. 서로의 코드에 대한 리뷰 부족.
- Try: github 사용법 더 숙지하기. 코드 리뷰 시간 마련하기. 코드 문제점을 해결할 때 마감 시한을 정해놓고 그 시간이 지나도 해결되지 않으면 다 같이 고민하기.
- 팀 KPT
- Keep: 규칙적인 일정, 회의 진행, 문제 공유,
- Problem: 피드백 부족, 테스트 부족
- Try: 마지막 일정으로 프로그램 테스트하며 복기하기, 코드 리뷰, 코드 컨벤션 정하기
- 나의 KPT