∠( ᐛ 」∠)＿

22.09.18 1차 작성 22.09.25 2차 작성 22.10.03 수정 📽 시연 영상 "수어 인식" 기능을 테스트 해보는 AI 담당 팀원의 시연 영상 🔥 2022년 공개SW 개발자대회 대학 동기가 같이 참여해보지 않겠냐고 제안하여 2022년 공개SW 개발자대회에 참가하게 되었다. 주최: 과학기술정보통신부, 주관: 정보통신산업진흥원 대략적인 일정: 8월 3일까지 참가 접수, 9월 15일까지 출품작 접수, 9월 21일과 22일에 1차 평가 참가자격: 학생 부문과 일반 부문 2가지, 참가부문: 자유과제, 지정과제, 향상과제 3가지 🚀 프로젝트 시작 7월 26일 총 4명이 모여 시작하게 되었다. 팀원은 전부 대학교 동기들이며 AI 1명, 안드로이드 1명, 백엔드 1명, 프론트엔드 1명(나)으로 구성되었다. ..

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번씩 찍혔다.. 검색해 보니 다행히도 자바스크립트를 사용하여 이벤트를 구현할 때 흔히 겪는 오류였다. 이미 많은 사람들이 이유와 해결 방법을 잘 설명해놓아 쉽게 해결할 수 있었다. 한 번 클릭했는데 여러 번 이벤트가 발생하는 이 현상 을 클릭 이벤트 버블링 이라고 부르며, 이벤트 버블링 이란 자식 요..