∠( ᐛ 」∠)＿

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 '

마우스를 올렸을 때 => :hover 이미지 확대 => transform 속성의 scale 함수 scale(x, y): 요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소 scaleX(n): 요소의 크기를 X축으로 x배 확대 또는 축소 scaleY(n): 요소의 크기를 Y축으로 y배 확대 또는 축소 ex) 마우스를 올렸을 때 1.5배 크기로 확대 a img { ... } a:hover img { transform: scale(1.5); } 추가로, transition 속성을 사용하면 위와 같은 속성 변화의 진행 속도를 정해줄 수 있음 transition: 'property' 'duration' 'timingfunction' 'delay';..

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

📽 시연 영상 🤔 only Backend? 작년부터 백엔드(스프링, jpa 등)를 공부하고 있었고 졸업 작품을 개발할 때도 백엔드 포지션을 맡아 진행하였다. 하지만 가슴 한편에 '프론트엔드 개발도 해보고 싶다..'라는 생각이 자리 잡고 있었다. 프론트엔드 쪽은 공부해 본 적이 거의 없었기 때문에 더 궁금하기도 하였고 다른 경험을 안 해보고 '내 진로는 백엔드 개발자다' 라고 덜컥 정하기엔 이상적이지 않다고 생각이 들었다. 따라서 여름 방학에는 우선 프론트엔드 공부를 먼저 해봐야겠다고 생각했다. 프론트엔드의 기본 중의 기본 HTML, CSS, JavaScript 기초를 공부하고 있던 도중, 내가 속한 동아리(InQ)에서 토이 프로젝트 인원을 모집한다는 공지가 올라왔다. 기초 문..

🔖 자료구조 기초 탐색이란 많은 양의 데이터 중에서 원하는 데이터를 찾는 과정 자료구조란 '데이터를 표현하고 관리하고 처리하기 위한 구조' 특히 스택과 큐는 자료구조의 기초 개념이며 다음의 두 핵심적인 함수로 구성됨 - 삽입(Push): 데이터를 삽입함 - 삭제(Pop): 데이터를 삭제함 이 외에 오버플로와 언더플로도 고민해야 함 ☁ 스택 스택은 박스 쌓기에 비유할 수 있음 아래에서부터 위로 차곡차곡 쌓고, 아래의 박스를 치우기 위해선 위의 박스를 먼저 내려야 함 선입후출 구조, 후입선출 구조라고 함 파이썬에서 스택을 이용할 때에는 별도의 라이브러리를 사용할 필요 없음 기본 리스트에서 append()와 pop() 메서드를 이용하면 됨 append() 메서드는 리스트의 가장 뒤쪽에 데이터 삽..