- 프로젝트명 : "SEVEN, 팀원 소개 페이지"
- 프로젝트 소개 : SEVEN 팀원 4명을 상세하게 소개하는 웹 페이지입니다.
- 시연 + 설명 영상 링크 : https://youtu.be/Zyd58HrV_QU
- 사용 기술: #HTML #JavaScript #CSS
GitHub: https://github.com/A5mini/seven.git
Git Branch가 뭔지도 몰랐지만 팀원들의 도움으로 배워나갈 수 있었다.
충돌을 피하기 위해
1. main branch가 있고,
2. 각자의 branch에서 개인별로 작업 한 뒤 pull request (브랜치를 합치는 것)
방명록생성 : function()
와이어프레임대로 방명록 생성을 만드려면 어떻게 해야할까?
방명록이 왼쪽 혹은 오른쪽에 번갈아 생성되기 위해서 어떻게 해야할지 고민하다가 function()을 사용하였다.
방명록 데이터를 가져올 때 홀수번째의 데이터라면 왼쪽에, 짝수번째라면 오른쪽에 들어가도록 하면 될 것 같았다!
변수 i를 선언하고 forEach로 각 문서(방명록)를 불러올때마다 i++이 되게 하였고,
i를 2로 나눈 나머지값에 따라 왼쪽 혹은 오른쪽에 생성된 카드가 들어가게 만들었다.
삭제를 하더라도 i값이 문서의 개수에 따라 달라지기 때문에 불균형 문제가 발생하지 않아서 오류도 없었다!
CSS 변경: absolute
이미지가 통일되지 않고 여기저기 옮겨다니는 문제가 발생했다.
그러던 중 absolute라는 지정값을 찾았다.
absolute는 절대값으로 부모 혹은 상위 relative속성을 가지고 있는 요소에 귀속된다.
--> 상위 요소 div에 relative를 넣어줬더니 html 전체페이지가 아닌 카드 안쪽으로 들어왔음!
(CSS 변경: https://leeyenote.tistory.com/6)
사진 크기 조절 --> 고생했는데 간단했음
이미 사진이 들어갈 공간은 정해져있으니,
img 태그에 style 넣고 크기 100%로.
(혹은 class넣어서 css 해도 됨)
문서가 뒤죽박죽 추가되는 문제.
Firebase 공식문서를 참고하여 데이터베이스에 들어간 방명록 데이터를 불러오는데는 성공했지만,
불러오는 방명록이 순서 없이 뒤죽박죽으로 추가되는 문제가 발생했다.
원인은 순서가 문서 이름에 따라 정해지는데, 저장 할 때 문서 이름이 무작위로 생성되기 때문이었다.
따라서 문서 이름으로 1씩 증가하는 id값을 넣어줬다.
--> 문서가 삭제되면 i값이 다시 줄어들면서 여러 버그가 생겼다. (아래의 내용)
(yyyymmddmmss로 id값을 지정하여서 해결)
클릭에 의해 삭제가 구현되도록 해보자.
(이걸 몇시간 동안한건지.......허허 정말 뻘짓의 연속이었다)
일단 아무 버튼이나 클릭 하면 (버튼의 것이 아닌) 지정된 방명록을 지우도록 파이어베이스 사용법을 구글링해서 만들어봄. 잘 됨.
그 이후 삭제버튼이 달린 카드를 지정해서 삭제하는것을 어떻게 해야할까 고민하고 뻘짓한 결과, 결국 버튼에 고유한 값을 넣는 방법을 생각해냄.
그것이 id값으로 i를 주는 것이었음.
(버튼의 id값, 문서의 ID를 일치시켜서 개별 방명록의 클릭버튼이 활성화되게 만듦)
버그의 발생
처음엔 잘 되었으나 두번째 문서부터는 윈도우 리로딩되면서 카드의 개수가 바뀌고, 그로인해 i가 바뀌었기 때문에 대혼란의 버그 발생했다.
그래서 문서 전체가 지워지는 것이 아닌,
버튼의 id값에 해당하는 firebase 문서ID의 필드를 지움.
지워진 필드는 undefined가 값으로 가져와지는 것을 확인하고, if (img==undefined) { } 로 삭제된 필드를 변경해서 출력함.
삭제 버튼 만들 때, data()함수를 사용해야겠어서 공부해봄.
"해당 엘리먼트에 JS Type의 value를 <Key, Value>로 저장 할 수 있으며, 값으로 저장되어 있는 데이터를 읽는다."
--> 이건 firebase에서 가져온값을 forEach로 하나씩 읽을 때 쓸 수 있었다.
그래서 문서 한번씩 모두 돌면서 고유값이 일치하는지 비교하고 비교하면 삭제되도록 만듦.
(데이터가 많아지면 서버가 터질 것이 걱정되긴 하지만 미니 프로젝트니까 구현만 시켜본다.)
이후 에러가 발생해서 찾아보니 await와 async이랑 같이 쓰여야한다고 나온다.
그래서 async이 바로 위에 있도록 코드를 수정했다.
$(".delbtn").click(async function () {
var id_check = $(this).attr("id"); //요녀석이 클릭한 버튼의 id를 가져옴
const cityRef = doc(db, 'guest book', `${id_check}`);
await updateDoc(cityRef, {
blog: deleteField(),
comment: deleteField(),
image: deleteField(),
name: deleteField()
});
console.log(i + "눌렸다");
window.location.reload();
})변수를 이용해서 문서ID를 지정하려면 `${변수}`이런식으로 백팁을 이용하면 되는 것이었다.
입력된 비밀번호를 활용
검색해보니 prompt라는 깔쌈한 함수가 있었다.
비밀번호를 입력하라는 기본 html함수! 활용!!
그러고 getDoc 후 forEach로 하나씩 돌리며 비밀번호 꺼내와서 입력된거랑 비교.
비밀번호가 맞으면 삭제!
관련 포스팅
Previouse Post
Following Post
