내배캠 TIL 2022.11.23

오늘 목표

마이페이지에 내 글만 조회하기

 

오늘 한 일

09:10am ~ 10:20am : 파이어베이스 특강 - CRUD 중 R(read)

10:20am ~ 12:00pm : 졸았다

12:00pm ~ 01:00pm : 내 글만 조회하기 구현 (팬로그 js 코드를 이용) (성공)

01:00pm ~ 03:00pm : 프로필 창에 내 글 조회하기 구현(프로필에 코멘트 불러오는 js 코드 만들기) (성공)

03:30pm ~ 04:00pm : 내 글만 조회하기 js  팬로그 파일에서 프로필 파일로 옮기기 (실패)

04:00pm ~ 04:40pm : 로그아웃한 상태로 게시판에 들어왔을 때, 버튼 빼고 게시글만 보게만 하기 구현 (성공)

04:40pm ~ 05:00pm : 김치찌개랑 연탄불고기 먹음

05:00pm ~ 05:20pm : 로그아웃한 상태로 게시판에 들어왔을 때, 게시글 작성 상자 안 보이게하기 구현(성공)

05:20pm ~ 05:30pm : 내 글만 조회하기 js  팬로그 파일에서 프로필 파일로 옮기기 재도전 (성공)

05:30pm ~ 07:00pm : 쉬기

07:00pm ~ 08:30pm : 날씨 api 가져와서 이용하기(진행 중)

08:30pm ~ 09:00pm : 조원들과 구현한 내용 공유 및 피드백

09:00pm ~ 10:40pm : 날씨 api 가져와서 이용하기(성공)

 

내 글만 조회하기

where 추가 할 때 참고한 글

컬렉션에서 여러문서 가져오기를 참고했다.

https://firebase.google.com/docs/firestore/query-data/get-data?hl=ko&authuser=0 

Cloud Firestore로 데이터 가져오기  |  Firebase

 

where을 추가하고는 색인을 추가해야한다는 오류가 떴다.

오류 메세지를 클릭하고 색인창에 들어가니가 자동으로 추가하시겠습니까 하고 떴다.

그래서 복합색인을 추가했다. 

https://firebase.google.com/docs/firestore/query-data/indexing?authuser=0&hl=ko

 

그냥 html 틀 전체를 복사했더니 생김새는 같다. css는 적용이 된다는 것 하지만 js가 적용이 안된다.

id가 겹쳐서 그런가? 왜 안되는지 물어볼까

 

알고보니 js도 적용이 됐는데, router에서 profile 창에 뜨도록 설정을 해줬어야했던거다

 

매니저님의 꿀팁

live share라는  확장팩을 쓰면 서로 코드 같은 코드창을 공유해서 같이 칠 수 있다고 알려주셨다. 

 

로그인 없이 게시판 보기

문제를 발견

로그인을 안하면 코멘트 창이 안 뜬다

uid 없이도 바로 뜰 수 있게 함수 수정하였다.

 

class를 이용해서 전체 내용 숨기고 싶은데 어떻게 해야할지 몰라서 구글링

아래의 방법으로 해결!

1.forEach and querySelectorAll('.classname')

document.querySelectorAll('.classname').forEach(function(el) {
   el.style.display = 'none';
});

 

https://stackoverflow.com/questions/4644673/hide-all-elements-with-class-using-plain-javascript

Hide all elements with class using plain Javascript

 

함수 js 파일 위치 옮기기 

fanlog.js에 있던 getmycommentlist 함수를 profile.js에 옮기려고 복사 붙여넣기를 하고 다 했는데

실행이 되지 않았었다.

콘솔창에 뜬 오류 메세지를 클릭해보니 router.js에서 import 하는 주소를 바꿔주지 않아서 난거였다.

router.js 를 고쳐주니 문제가 해결되었다. 

 

날씨 보이기

api 가져온 페이지

https://openweathermap.org/

Сurrent weather and forecast - OpenWeatherMap

weather api 이용방법 참고 사이트

https://kocoafab.cc/tutorial/view/786

OpenWeatherMap API를 사용하여 날씨데이터 받아오기

openweather에서 받아온 날씨 api 주소 

https://api.openweathermap.org/data/2.5/weather?q={도시 이름}&appid={api key}&units=metric
//units=metric을 붙여주면 섭씨로 표현된다. 원래는 kelvin?이라는 절대온도로 표기해주었다

날씨 보이기 구현하면서

- 함수 화살표 이용해보았다.

- js 파일 만들어서 export, import 해보았다.

- api 가져와서 쓰는 법 복습

- 튜터님이 코드에 쓴 방식 따라서 appendchild() 이용해보았다.

 

오늘의 질문

어떤 경우는 window. 함수 해주고

어떤 경우는 import, export를 해주는데

왜 그냥 간편하게 모든 경우에 window를 해주지 않는거지?

기능 이름을 모르니까 검색해도 잘 안 나온다 튜터님한테 여쭤보자

 

튜터님 답

window은 수많은 객체들을 가지는데 window.함수명= "함수" 이렇게 새로 우리가 만들어주는 것이다.

이걸 전역함수라고 부른다. 전역함수만이 가지는 단점이 있어서 모든 곳에 써주지는 않는다고 하셨다. 보안 문제 같은거

 

구글링

자바스크립트의 문제점 중 하나는 파일이 분리되어 있어도 하나의 전역 스코프를 공유한다는 것이다. 따라서 다른 파일 내에서 동일한 이름으로 명명된 전역 변수나 전역 함수가 같은 스코프 내에 존재할 경우 예상치 못한 결과를 가져올 수 있다