[TIL] 내일배움캠프 React 과정 2022.11.20

Today I Learned

• FIREBASE 특강 다시 보기
• BEM 문법에 따른 전체적인 마이페이지 코드 수정

 

github에서 폴더 삭제하기

로컬 저장소와 원격 저장소 모두에서 삭제하는 방법

 

git rm -rf <삭제하고 싶은 폴더나 파일명>

ex) git rm -rf TEST

 

그리고 커밋과 푸시까지 하면 된다.

git commit -m "delete folder"

git push origin main

 

 

 

Firebase 공부하기

<input type="submit"/>

input이 버튼 모양이 된다.

 

 

이벤트 리스너

이벤트 리스너는 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다. 이벤트 리스너를 이용하면 특정 DOM에 위에 말한 Javascirpt 이벤트가 발생할 때 특정 함수를 호출한다.

 

이벤트 리스너 등록하기

특정 DOM요소에 이벤트 리스너를 등록할 때는 addEventListener를 사용한다.

DOM객체. addEventListener(이벤트명, 실행할 함수명, 옵션)

각 매개변수를 살펴보면

이벤트명 : Javascript에서 발생할 수 있는 이벤트 명을 입력한다.

함수명 : 해당 변수는 생략 가능하며, 해당 이벤트가 발생할 때 실행할 함수 명을 입력한다.

옵션: 옵션은 생략이 가능하며, 자식과 부모 요소에서 발생하는 버블링을 제어하기 위한 옵션이다.

 

출처

https://ordinary-code.tistory.com/64

 

 

Firebase의 javascript 구조 이해하기

Firebase 특강을 다시 보기 하면서 공부했던 내용은 해당 코드와 보기 편하게 주석으로 작성했기 때문에 블로그에 정리하기 애매해서 오늘은 github 주소를 첨부한다. 

https://github.com/heegeer/git_study/tree/main/Firebase%20SPA

 

 

 

CSS position 속성 relative와 absolute의 차이점

relative	요소 자기 자신을 기준으로 배치
absolute	부모 요소를 기준으로 배치

출처 https://creamilk88.tistory.com/197

 

 

 

느낀 점

firebase 서버 이용한 SPA 웹페이지 테스트로 한번 구현해보려고 했지만 실패했다. 아마 firebase 연결 자체가 안된 거 같다. 월요일에 firebase에 연결하는 방법을 강의로 제공해준다고 하니 내일 다시 시도해봐야겠다. 오늘은 firebase 특강을 다시 듣고 마이페이지 코드도 전체적으로 수정했다. 근데 js파일로 프로필 이미지나 닉네임을 firebase에서 불러오려면 코드를 또 많이 수정해야 할 거 같다. 그래도 이번 주말은 통째로 SPA와 firebase를 공부하는 데 투자하며 많이 배울 수 있었던 거 같다. 다음 주에도 또 열심히 달려 봐야지!

 

+) Firebase 특강을 들으면서 javascript 파일의 코드 구조를 많이 이해할 수 있었는데 그 덕분인지 오늘 처음으로 DOM에 대한 개념을 조금이나마 이해할 수 있었다.😇

 

참고한 블로그

https://blog.naver.com/magnking/220972680805