팀 미니 프로젝트 방명록 삭제 버튼 구현
일단 CRUD의 뜻은 CRUD는 “Create(생성), Read(조회), Update(수정), Delete(삭제)”의 약어입니다. 여기서 방명록 Delete부분 삭제를 맡았다. 너무 생소 한 부분이라서 조장님이 주신 블로그를 참고하며 만들었다.
사용자가 삭제 아이콘을 클릭하면! 해당 방명록 작성자의 이름을 가져와 firebase의 firestore에서 일치하는 작성자를 찾습니다. Firestore 쿼리를 통해 작성자가 쓴 방명록을 검색하고, 검색 결과가 있을 경우 해당 문서가 삭제됩니다. 그 다음에 페이지를 새로고침하면 방명록 목록을 갱신되고, 삭제 완료 메시지를 사용자에게 alert로 삭제 완료!가 뜬다.
이 부분을 작성 할 때 처음에 삭제 버튼이 안눌려서 애를 먹었는데 이 부분은 fierbase 부분
이렇게 수정하고 나서, 새로 고침을 하고 보니 삭제 버튼이 정상적으로 작동됐다. 사실 정확하게 무슨 원리로 고친지는 아직 정확한 개념은 정말 모르겠다. (아직 Javascript & jquary는 너무 어렵다,,어려허,,)
그렇게 만들어진 CRUD의 Delete !!!!!!
아주 방명록처럼 수정도 잘되고 삭제도 삐리빠리뽕하게 잘 된다~
다음에 다시 오늘 TIL로 돌아와서 내가 어떻게 한 건지 볼 예정 !
Position
CSS의 position 속서은 HTML 문서 상에서 요소가 배치되는 방시글 결정한다.
-
position:static
position을 별도로 지정하지않으면, 기본값인static이 적용된다.
요소들이 작성 순서 그대로 브라우저 화면에 표시가 되는데 따라서 top, left, bottom, right 속성값이 무시된다. 아무리 css에서 margin을 줘도 위치 고정! -
position:relative
요소를 원래 위치에서 벗어나게 배치한다. 가장 중요한 포인트는 요소를 원래 위치 기준으로 상대적으로 배치해준다고 생각하면 된다.
div:nth-of-type(2) {
position: relative;
top: 28px;
left: 48px;
background: cyan;
opacity: 0.8;
}이런 코드가 적혀 있다고 하면 top과 left가 적용되어 아랫 부분이 살짝 겹치도록 배치가 된다.
position:absolute
단어때문에 헷갈리는데 절대적인 요소로 배치하는개 아니라 오히려 배치 기준이 상황에따라 굉장히 달라진다. 배치 기주니 자신이 아니라 상위 요소를 찾는다.
=> 대부분의 경우, 부모 요소(가장 가까운 상위 요소)를 기준으로 top, left, bottom, right 속성을 적용해야하기 때문입니다. 따라서 어떤 요소의 position 속성을 absolute로 설정하면, 부모 요소의 position 속성을 relative로 지정해주는 것이 관례이다.
-
position:fiexd
화면을 위 아래로 스크롤 하더라도 브라우저 화면의 특정 부분에 고정이되어 움직이지 않게한다. 보통 라이브 채팅 버튼을 구현 할 때 사용하는데 원리는 배치 기준이 부모 요소가 아닌 뷰 포트이기 때문이다. -
position:sticky
이 속성도 화면 스크롤링 할 때 효과가 나타난다. 속성의 이름처럼 스티커처럼 붙어서 움직이지않게 해주는데, static속성에도 구애 받지 않는다.
사실 position:속성 부분은 내가 많이 헷갈릴 것 같다
그래서 헷갈릴때마다 볼려고 첨부! https://www.daleseo.com/css-position/
