jquery

jquery
내가 프론트엔드로 길을 걷겠다고 맘먹고 공부를 시작할 때
'jquery는 이제 꺼저가는 불이다. 배울 필요 없다' 라는 말들을 많이 들었다.
하지만 현재 회사에서 jquery가 사용되어져 있는 코드를
SFU 방식의 React로 변환해야 하는 임무가 주어졌다.

뭐 사실 구글링하며 많이 보였다 $"달러표시"rk jquery고 dom 조작을 쉽게 해주는건가 보다 하고 그냥 넘겼지만 직접적으로 코드를 읽고 해석할 수 있어야 하는 임무라 정리를 해보고자 한다.
거창하진 않을거다. 읽을 수 있는 정도로만.

$(document).ready(function() {
  // 이 코드 블록은 문서가 완전히 로드된 후에 실행됩니다.
  // 여기에 스크립트 코드를 작성합니다.
});

문서의 로딩이 완료된 후 함수 내의 코드가 실행되게 하기 위해 있다는데
body 태그 의 맨 밑에 defer와 함께 있다고 하면 필요없는 코드랜다.
defer.. 조선비즈에서 많이 봤었던 건데 다시 정리해보면

defer는 스크립트가 HTML 문서를 파싱하는 동안 실행을 지연시키는 HTML 속성입니다.

<script defer src="example.js"></script>

defer가 존재하면 스크립트는 HTML 문서를 파싱하는 동안에 다른 작업들이 진행되도록 하고,
문서파싱이 완료된 후에 스크립트가 실행된다.
얻는 효과=> 페이지의 로딩 성능 향상

고로, HTML 문서의 맨 아래 위치하고, defer속성을 사용하면, 스크립트가 페이지의 모든 HTML요소를 파싱한 후에 실행되기 떄문에 $(document).ready가은 대기 코드 없이도 DOM 조작이 가능해짐.

jquery함수가 따로 있고 html의 함수가 따로 있으니 혼용해서 쓰면 안됨.
ex) $('#myModal').modal('show')
id가 myModal이라는 DOM에다가 modal함수를
실행함.
$('#enterRoom').on('click', function () {
on, click이 우리가 흔히 아는 onClick.

html

<button id="create_room" type="button" class="btn btn-primary btn-xs btn_between">create_room</button>

js

create_room.onclick = () => {
===
$('#create_room').on('click', () => {
===
const createRoomButton = document.getElementById('create_room');
createRoomButton.onclick = () => {
  // ...
};

create_room.onclick = () => { // html에 create_room이라는 id를 바로 이렇게 조작가능.

11.29(수)
TIL
험난하다. 일단 화면 띄우는거에 초점을 맞추다 보니 띄워지긴했는데
해당 함수를 이파일에 넣어야되는지 저파일에 넣어야하는지 몰라 여러군데 중복해서 넣다보니 일단 돌긴 돌지만 여러번(지금 7개의 내얼굴이 브라우저에..)
이렇게 해가는거겠지. 리팩토링하며 이 리액트를 3.36.61.0 여기에 올려보는걸 실행하면 이제 리액트로 만든 나의 WebRTC가 화면에 똬.