IFBAEMIN - 08

1, 2, 3 는 수정사항

4, 5 는 앞으로의 계획

 

1. 다른 페이지들의 z-index를 건들다보니 스위치쪽이 css상으로 안보이는 현상이 있어서 스위치 쪽에 z-index을 추가했다. z-index를 건들때는, 다른 주변에 어떤 것들이 변하는지 확인을 잘해야할꺼같다.

2. observer intersection을 사용하려고하는데.. 

다음과같은.. 문법 요류(SyntaxError)가 나왔다. 저 위치에서 console.log를 쳐보니, 옵저버의 대상이 되는 엘리먼트 값이 null로 뜨기 때문이었다.  임시로 #app container로 박스를 잡고, 나중에, 스크롤 감지를 해야하는 박스를 추가한다음에 다시 수정해야겠다.

3. 전혀 생각치 못한 에러가 있었는데..

깃허브에서 이미지 주소는.. 내가생각하던 것과 달라서

div.innerHTML = `<img class="store__img" src="../src/assets/store/${doc.data().thumbnail}">

div.innerHTML = `<img class="store__img" src="https://github.com/codevilot/IFBAEMIN/blob/main/src/assets/store/${doc.data().thumbnail}?raw=true">

처럼 이미지 주소를 수정했다.

4. 2번에서 사용한 observer intersection을 사용하다보면, (이전에 사용해봤을때) 빠르게 반응을 하여 생각한 것보다 빠르게 페이지가 추가되는 경우가 있다.(의도치 않게 로딩을 추가로 더 하는 경우가 있었다) 이전에는 settimeout을 사용해봤었는데, 이번에는, 최근에 공부하게된 debounce를 한번 적용해 보기로 계획했다.

5. 페이지를 구성한 function과 폴더를 보면서.. 다른사람과 같이 일을 하기위해서는 좀더 정돈된 function과 폴더를 구성하는게 왜좋은지 이제 조금 알 것 같다. react와 같은 프레임워크의 폴더 정리방법을 한번 공부해서 정리하고, function같은 경우는 만들면서 조금씩 찢어가면서 서로에 대한 의존성을 줄여야겠다.