∠( ᐛ 」∠)＿

에러 터미널에서 경로 변경 중 겪은 오류 이동하려고 하는 폴더에 공백이 포함되어 있어 발생함 cd hello spring => cd: string not in pwd: hello 해결 방법 역슬래시를 붙이기 cd hello/ spring 폴더명을 '' 따옴표로 감싸주기 cd 'hello spring'

22.09.07 기록 에러는 아니지만 새로 알게 된 내용이라 정리 ⭐스크롤을 항상 하단으로 보내기⭐ (새로운 채팅 내용이 있으면 그 내용을 보여주기 위함)결론: scrollTop, scrollHeight를 활용 📽 결과 화면 ✅ 해결 과정 채팅창에 스크롤 기능이 추가되었고, 요소들도 안에 잘 보이지만.. 입력을 하면 밑에 내용이 추가되는데, 내가 스크롤 바를 내려야만 볼 수 있다. 스크롤바를 자동으로 항상 아래에 위치 시키고 싶었다. 그렇게 하기 위해서는 CSS 박스 모델의 요소들을 알 필요가 있어 보였다. CSS 박스 모델에는 스크롤과 관련된 여러 요소들이 있으며, 자세한 것은 아래 사진들을 참고하자 출처는 stack overflow 자료마다 scrollHeight와 offsetHeight 등을 저마다..

22.09.07 기록 에러는 아니지만 새로 알게 된 내용이라 정리 채팅창 안에 내용이 요소의 크기를 벗어나면 스크롤 기능 추가하기 결론: "overflow: auto" ✅ 해결 과정 채팅창에 내용들이 많아지니 감싸고 있던 요소를 벗어나버렸다. overflow 속성은 내용이 요소의 크기를 벗어났을 때 처리하는 방법을 지정해주는 속성이다. visible, hidden, scroll, auto 등 여러 값을 할당해줄 수 있다. 자세한건 여기!! (아래와 같이 값을 선택하여 실제 화면에 어떻게 보이는지 실습해볼 수 있다.) 그 중 auto를 사용하면 내용이 요소의 크기를 벗어날 때만 스크롤바를 제공해준다! 추가로 줄바꿈 속성(white-space, word-wrap)도 알아두면 좋을 것 같다. white-spa..

22.09.07 기록 에러는 아니지만 새로 알게 된 내용이라 정리 div 클릭 시, div의 text 내용 복사하기결론: window.navigator.clipboard.writeText() 메서드 사용 📽 결과 화면 화면상의 코드를 클릭한 뒤 주소창에 붙여넣기를 해보았다. ✅ 해결 과정 화면상에 보이는 (회의) 코드를 클릭하면 복사가 되게끔 하고 싶었다. 검색해 본 결과, 과거에는 document.execCommand() 메서드를 사용하여 선택 영역을 복사하고 정렬하는 등의 이벤트를 정의해 주었다. 하지만 현재에는 사용되지 않는다! (동작할 수는 있지만 웹 표준에서 Deprecated 되어 공식 문서에서도 사용되지 않는다.) 현재에는 Clipboard API가 이를 대체한다. Clipboard_API ..

22.09.04 기록 에러는 아니지만 새로 알게 된 내용이라 정리 버튼 클릭 시 페이지 이동결론: window.location.href = "주소"; ✅ 설명 링크 window.location.href는 현재 페이지의 URL을 리턴한다. window.location.href에 다른 URL을 값으로 할당해 주는 방식으로 페이지 이동을 할 수 있다. exit_to_app function exitMeeting() { window.location.href = "/" } 버튼에는 onclick 이벤트로 exitMeeting() 함수를 지정해 주고, exitMeeting() 함수는 메인 페이지로 이동하는 기능을 줬다. 추가로 새 창에서 페이지를 열고 싶으면, window.open("주소"); 를 사용하자!

22.09.03 기록 1. getUserMedia() 메서드가 호환이 안되는 에러 2. getUserMedia()를 사용하여 video 태그에 받아왔지만 검은 화면만 나오는 에러결론 1. navigator.getUserMedia(): X, navigator.mediaDevices.getUserMedia(): O 2. 태그에 playsinline 속성을 설정해주기!! ✅ 해결 과정 1 진행중인 프로젝트가 구글 미트와 zoom과 같은 화상 회의를 기반으로 하기에, 사용자의 마이크와 카메라를 가져오는 것이 필수적이다. 처음 해보는 것이기 때문에 여러 자료들을 찾아보며 진행하였는데, 이것저것 코딩해 보아도 전혀 작동하지 않는 문제가 있었다.. 조금 더 찾아보니 Mozilla의 MDN Web Docs 사이트에서 ..

22.09.01 기록 Uncaught SyntaxError: Unexpected token '

🚀 트러블슈팅"webtoon-moa" 프로젝트를 진행하면서 겪었던 오류나 새롭게 알게 된 점들을 몇 가지 적어보려 한다.(바로바로 기록으로 남겼어야 되는데, 발표일에 맞춰 마무리하기 위해 정신없이 달렸던 터라 그러지 못했다..😂)☁ 클릭 이벤트 버블링하트 토글 버튼을 한 번 클릭하였는데, 이벤트가 여러 번 발생하는 것처럼 보였다.그래서 console.log를 찍어봤더니 실제로 버튼 한 번에 로그가 3번씩 찍혔다..검색해 보니 다행히도 자바스크립트를 사용하여 이벤트를 구현할 때 흔히 겪는 오류였다.이미 많은 사람들이 이유와 해결 방법을 잘 설명해놓아 쉽게 해결할 수 있었다.한 번 클릭했는데 여러 번 이벤트가 발생하는 이 현상 을 클릭 이벤트 버블링 이라고 부르며, 이벤트 버블링 이란 자식 요소의 이벤트..