완성작
📑 결과보기
제작 과정
textContent를 이용한 정보 삽입
textContent란 노드와 그 자손의 텍스트 콘텐츠를 표현함.
firebase Store 사용하여 이미지 불러오기
1) collection 등록 후 id 값에 따라 필요한 이미지 주소 삽입.
2) 링크에 있는 id 값을 참조.
Location 인터페이스는 객체가 연결된 장소(URL)를 표현함. URL.searchParams를 사용해서 인자를 추출할 수 있음.
3) firebase에서 데이터 가져오기.
get()을 사용하여 단일 문서의 내용을 검색하는 방법을 보여줌.
4) innerHTML로 url 삽입하기.
댓글 (채팅기능)
firestore database 와 realtime을 이용한 실시간 댓글 구현. 유저의 이메일 정보, 삭제 기능 추가.
1) innerHTML을 이용하여 database에 있는 내용을 그려줌.
2) comment 버튼을 눌렀을 때 database로 데이터를 전송하고 HTML을 그릴 수 있도록 함.
form 태그 안에 input과 button 태그가 있는 형식일 떄 DOM 객체 선택하는 방법 - e.target.querySelector('input').value,
3) 댓글 삭제 기능 구현. 삭제 아이콘을 클릭했을 때, 각 댓글마다 갖고 있는 고유한 id를 dataset으로 저장하여 delete() 호출.
댓글의 고유 id 값을 판별하려면 event.target부터 부모 요소 단위를 찾는 closest()를 사용해야 함.
4) realtime 구현.
- onSnapshot() - 문서를 수신 대기함. 콘텐츠가 변경될 때마다 실행됨.
5) id 값으로 고유한 댓글 구분.
6) 로그인한 유저만 허용하기.
7) 댓글 삭제 권한 부여. current유저가 일 때와 아닐 때를 나눠서 innerHTML을 그림.
다른 작품 추천
작품을 배열로 받아 랜덤으로 5개의 배열을 추출한 후 innerHTML로 삽입.
- innerHTML 삽입 시 1) map으로 각 요소를 삽입한 후 2) join을 이용해 합치고 3) innerHTML에 넣으면 반복된 코드를 삽입할 수 있음.
- 객체 구조 분해(deconstructor)를 통해 열거형 프로퍼티를 새로운 객체로 복사할 수 있음.
🤔 firebase와 api를 한번에 불러오니 로딩 시간이 너무 느림.
⭐ for문으로 await를 사용했기 때문. 필요한 값을 모두 부른 후 await를 사용하는 것을 권장함.
마치며
여러모로 고비가 많았던 페이지다. 하나의 JS파일을 id 값에 따라 다르게 그려주는 게 관건이다. API를 효율적으로 불러오는 방법부터 firebase realtime을 이용한 실시간 댓글까지 모두 어려웠다. 기능 하나 추가하는 게 얼마나 힘든 일인지 체감하는 계기가 되었다.
개념을 알아도 실전에 적용하려면 항상 error를 만나야했고 솔직히 지브리 스튜디오를 만드는데 점점 지쳐갔다. 그래도 얼마 안남았다는 생각으로 계속 물어보고 찾아보며 여차저차 구현은 했다. 뭔가 코드 구조가 깔끔하지 않아 굉장히 기분이 좋지는 않지만 완성했다는 거에 의의를 두고 있다. 다음에 react를 배워서 single page application으로 지브리 스튜디오를 다시 만들어보고 싶어졌다.