오늘 배운 것
1. 다양한 FONT를 가져와서 사용할 수 있는 사이트를 공유받아 알게 되었다.
https://fontawesome.com/
메뉴바에 icons 클릭 > 검색창에 영어로 검색(화살표 : arrow) >마음에 드는 모양 클릭 후 html 코드 복사
(ex. )
2. CSS
.class::after {}after는 요소에 장식용 콘텐츠를 만들 때 사용하는 것이다.
기존 요소에 덮어서 추가 요소를 만들 때 사용하는 것 같다.
3. JS
const info = document.querySelector("#post-box");
function sendMyInfoByEnter(e) {
if (e.key === "Enter" && !e.shiftKey) {
posting();
e.preventDefault();
}
}
info.addEventListener("keypress", sendMyInfoByEnter);id가 post-box인 요소를 선택하고 키보드 이벤트 리스너를 등록해준다.
sendMyInfoByEnter 함수는 입력된 키 이벤트를 받아서 처리하는 함수이며 입력된 키가 'enter'이고 'shift'가 눌려 있지 않은 경우에 실행되는데, shift가 입력되지 않았을 때를 선택해서 줄바꿈 동작을 방지한다.
delete 버튼
x표시 버튼이 가까이 가져다 대면 천천히 나타나는데
$(document).ready해당 함수 내에 delete_card() 함수가 수행되도록 만들었지만, 실행이 되지 않았다.
원인을 살펴보니 버튼이 천천히 나타나는 것이 문제였고 해결을 위해 질문하였더니 setTimeout(() =>{},) 로 시간을 2000로 두어서 실행해봤더니 작동했다.
하지만, 이 방식은 왠만하면 사용하지 말라고 하셨다.
4. mongoDB
update부분이 여러개가 수정이 안되었는데
입력받을 수정 사항을 새로운 딕셔너리에 넣고 해당 딕셔너리가 비어있지 않은 경우에만 update_one() 함수를 사용하여 수정이 진행되고 최종적으로 수정이 완료되면 완료 메시지를 반환하도록 변경해주었다!
5. flask
- print 찍는 법
한글의 경우, sys를 import 하고
sys.stdout.reconfigure(encoding='utf-8')를 선언해 준 뒤에 실행해보면 잘된다!
6. 팀원분이 삭제 기능을 어려워하셔서 구현해보고 요약해보았다.
어려웠던 내용
update 기능을 담당했는데, 통합하는 과정에서 문제가 있는 것인지, 하나의 요소만 수정되고 다른 요소들이 수정이 안되었다.
그리고 프로젝트 수행 시 부모요소 선택자를 찾는 과정에서 왜 그렇게 되는지 이해가 안됐었는데 HTML과 div가 어떻게 되어있는지 등 동작원리를 잘 이해해야겠다.
궁금한 내용 / 부족한 내용
enter를 입력받아 수행하는 동작에서 html, css 위에 선언되어 있는 js에 넣으면, 동작이 되지 않는데 js의 작동원리를 다시 알아봐야 겠다.
천천히 나타나는 버튼의 경우 setTimeout()을 사용하지 않고 어떻게 해결하는지 궁금하다.
나중에 과제 전형으로 vanila js만 사용할 텐데 jquery에 의존하지 않고 프로젝트를 수행하고 연습해야겠다.
