2023.12.24 TIL - 팀프로젝트 트러블 슈팅(a태그 새로고침,id유일성),object-fit, OBS

📘 오늘의 공부

• 팀프로젝트 내 분량 수정
  • 트러블슈팅 정리
• img태그 새로운 정보 정리
• OBS 사용법 익히기
  • 시연 영상 촬영을 위한 OBS 다운 및 사용법 서치

팀 프로젝트 수정

🏹 트러블 슈팅 (1)

• a태그에 onclick으로 alert을 띄웠는데 alert창 확인을 누르고 나면 다시 원래 페이지가 새로고침돼서 페이지 맨 상단으로 돌아감
  (새로고침을 없애고 싶음)
• 문제 코드

<a href="" onclick="open()"><img class="btnImg"
           src="./images/icon-velog.png" alt="" /></a>

🖥️ 원인

• a 태그 속 href 속성이 비어 있으면 자기페이지로 계속 이동시키기 때문에 onclick 함수를 탄 후 계속 새로 고침이 됨
  (출처: https://mthsel.tistory.com/251 [삽질로그:티스토리])

🥳 해결

<a href="javascript:;" onclick="clicktest();">클릭테스트</a>
 
 <!--또는--> 
 
 <a href="javascript:void(0);" onclick="clicktest();">클릭테스트</a>
 
<!--또는-->
 
 <a href="javascript:return false;" onclick="clicktest();">클릭테스트</a>

• 선택한 코드 : 첫번째 코드로 작성
  • 이유 : 같은 기능인데 가장 짧아 효율적
• href 속성에 이렇게 명시를 해주면 새로고침되지 않고 클릭 이벤트만 발생됨
• 참고) href="#" 앵커를 사용하면 상단으로 이동함 
  (출처: https://mthsel.tistory.com/251 [삽질로그:티스토리])

---

🏹 트러블 슈팅 (2)

• 기존에 작성했던 onclick을 js click 이벤트로 동적 작성하는 과정에서 같은 작업을 여러 곳에서 반복하고 싶어서 같은 id를 여러군데에 작성했더니 아무곳에서도 실행이 안됨

🖥️ 원인

• id라는 것은 유일값이기에 아이디는 한 곳에만 적는 것!

🥳 해결

• 같은 작업을 여러군데에서 반복하고자 하는 경우에는 class를 주어 사용함
  • js 동적 click 이벤트에서 class를 사용하는 방법
    -> $('# ')에서 # 자리에 . 넣고 쓰면 끝!

$('.velog').click(async function () {
      alert('📘 저는 velog를 사용합니다. 📘');
    })

img 태그의 새로운 속성

1. Object-fit : cover; : 사진 비율 유지
2. .class:hover { } : 커서 올렸을 때 변화주기
3. Box-shadow: x축으로 증감px y축으로 증감px 블러조절px 그림자크기px 색;
4. 팀원분의 예시

// 프로필 카드 전체
.profile: hover,
.profile: focus {
Box-shadow: x축으로 이동px y축으로 이동px 블러px 그림자크기px 색;
}

//프로필 카드 이미지
Background-size: 110%

profile: hover,
profile: focus {
Background-repeat: no-repeat;
Background-size : cover;
}

OBS 사용법 익히기

노션에 있는 가이드로 따라하는데 오류나는 것들이 몇 가지 있어서 유튜브로 다시 서치함

🏹 트러블 슈팅 (1)

• 비디오 캡쳐장치 추가했는데 화면이 안나오고 계속 까만화면이 뜸

🥳 해결

• 맥북 설정 > 개인정보 보호 및 보안 > 화면 및 시스템 오디오 녹음 > 화면 기록 및 시스템 오디오 '허용 체크' 만 했는데,
  아래의 '시스템 오디오 녹음만' 부분에서도 OBS를 '허용 체크' 해주어야 정상 작동 됨

---

🏹 트러블 슈팅 (2)

• 얼굴 동그랗게 넣는 부분 가이드 따라하니까 안됨

🥳 해결

• 알파 마스크 (색상 채널) -> (알파 채널) 로 바꿔야 했음
  • 참고) 얼굴 동그랗게 넣기 : https://www.youtube.com/watch?v=g1zeZAHbHww
  • 참고) zoom으로 얼굴 배경 없애기 (for window) : https://www.youtube.com/watch?v=v7sT-GU5E0I
• OBS 기본세팅 참고 : https://www.youtube.com/watch?v=vZ5X16wXSSk

🎄 오늘의 느낀점

크리스마스 이브에도 열심히 공부한 나자신 칭찬해~!!! 🧑🏻‍🎄🎄
지금은 시작 단계이다보니 모든게 다 낯설고 서투르고 모든 지식이 다 처음 듣는거라 공부하는 하나하나마다 에너지 소진인데 이 시간들이 쌓이면 익숙해지는 시간도 오겠지?!?! (제발)