[TIL#4 내배캠 Chapter 1 미니프로젝트] 코드 분해하기

이 글은 2023-10-10에 작성이 되어야 했지만 임시저장하고 까먹었다. 다시 쓰는 김에 수정을 좀 했다.

 

<어제 검색해서 찾은 것들>

 : 없다

 

<데일리 루틴>

내배캠 공부

밥 잘 먹기

운동

 

큰누나분의 코드에 이어 동생분의 코드를 공부해 보자

 

우선 데이터베이스르 가져오는 데 있어 import가 아닌 src로 가져와서 그런지 .js로 분리시켜도 잘 작동한다.

그래서 홈 화면의 달성도 기능도 같은 방식으로 적용시키려 했는데 잘 안된다. 일단 뒤로 미뤄둬야겠다.

 

정말로 진지하게 코드를 살펴봤다. 검색을 하면 전부 찾아 해설을 찾아볼 수 있었기에 코드 구조가 어떻게 이루어져 있는지 이해하는 것은 쉬웠다. 하지만 맨땅에 저렇게 구조를 쌓아 올리라고 시키면 못 할 것 같다. 뭐든지 말하고 읽고 쓰는 순서니까 일단 말하고 읽을 수 있는 단계까지 왔다는 뜻이니까 초조해하지 않기로 했다.

 

그럼 찾아본 것과 배운 것 정리해 보자

1. $( ).on( );

 : 제이쿼리 기능 중 이벤트를 묶는 다양한 함수 중 하나이다.$(document).on("click", "#logPushBtn", function () { 이런 식으로 이벤트 클릭을 로그인푸시버튼에서 기능이 작동하게 만든다.

 

2. 동생분이 작성하면서 직면한 문제들과 해결

 

 문제 1) 방명록 삭제하는 함수에서 삭제할 방명록에 Id값으로 접근하려면 미리 그렇게 코딩해야하는데 어떤 방명록이 삭제될지 모르니 Id값을 이용하지 못했다.

 

해결 1) $(this)로 호출한 요소를 알 수 있고, closest()와 최종 삭제된 parents()로 부모 요소, children()과 find()로 자식 요소에 접근할 수 있다는 것으로 해결했다고 함.

사실 정확히 무슨 말인지 모르겠다. 직접 사용해보려고 했지만 어떤 식으로 사용해야 할지 감이 오질 않아 검색으로 찾아보기만 했다.

 

 문제 2) 파이어스토어 데이터베이스에서 노드를 삭제하는 것이 불가능해 보였음.

 

 해결 2) realtime database를 사용

 데이터베이스에도 여러 종류가 있는 것 같다. 그중 realtime database를 사용하셨는데 파이어베이스 공식문서를 통해서 특징들을 확인했다. 다만 어떤 식으로 사용해야 할지는 전혀 감이 오지 않았다.

https://firebase.google.com/docs/database?hl=ko 

Firebase Realtime Database

 

 문제 3) 파이어스토어 데이터베이스에 있는 삭제할 내용에 띄어쓰기가 들어가면 closest(), children()으로 요소를 특정한 뒤 val()을 했을 때 띄워쓰기 이후의 내용이 반환되지 않음.

 

 해결 3) 삭제할 때 내용 대신 띄어쓰기가 없는 autogenerated id값을 사용했습니다. 여기서 나오는 autogenerated id 또한 realtime database의 부분이다. 잘 모르겠다는 뜻이다ㅠ

 

 문제 4) 홈 화면에서 이미 목표달성 부분에 파이어스토어 데이터베이스를 이용하고 있어 configuration이나 세팅들이 겹쳐 리얼타임 데이터베이스를 사용하기 어려워 보였음

 

 해결 4) js파일을 분리해서 리얼타임데이터베이스를 이용하는 부분을 따로 뺏더니 둘 다 이용이 가능

이 부분에서 얻은 것들이 많다. 데이터베이스 API주소? 만 따로 빼서 저장해도 잘 작동하고, script src를 붙일 때 바디태그 최 하단부에 붙여야 한다는 것 또한 알게 되었다. 여러 가지가 있지만 앞서 기록했기에 하도록 하겠다.

 

 

 

<TMI. 피자는 최고의 로딩 식품이다.>