[TIL] 내일배움캠프 React 과정 2022.12.03

Today I Learned

JavaScript 입문과 웹 UI 개발 강의 수강

JavaScript 입문과 웹 UI개발 강의

getElementById와 getElementsByClassName

document.getElementById('test').style.display = 'none';

id 이름은 중복을 허용하지 않음

document.getElementsByClassName('test')[0].style.display = 'none';

클래스 이름은 중복이 가능함 -> 인덱싱 필수!

동일한 클래스 명을 가진 요소가 여러 개 일 수 있기 때문에 해당 클래스 명의 몇 번째를 가져올 것인지 지정해야 함.

querySelector와 querySelectorAll

document.querySelector('.test1').innerHTML = '안녕';
document.querySelector('#test2').innerHTML = '안녕';

class일 때는 '.test'

id일 때는 '#test'

querySelector() 는 맨 위의 한 개 요소만 선택된다.

document.querySelectorAll('.test')[1].innerHTML = '안녕';

만약 동일한 class 명을 가진 리스트가 여러 개 있는데 두 번째 리스트만 사용하고 싶다면 querySelectorAll을 사용한다.

querySelectorAll()은 인덱싱 필수!

버튼 클릭했을 때 이벤트 설정하는 방법 2가지

01. 태그에 onclick으로 함수 실행

// HTML
<button onclick="showAlert()">버튼</button>

// JS
const showAlert = function() {
   document.getElementById('alert').style.display = 'block';
};

02. addEventListener 사용

// HTML
<button id="hideBtn">숨기기</button>

// JS
document.getElementById('hideBtn').addEventListener('click', function(){
   document.getElementById('alert').style.display = 'none';
});

이벤트 리스너

document.getElementById('test').addEventListener('click', function(){
    //실행할 코드 
});

이벤트 리스너는 이벤트가 일어나면 내부 코드를 실행해 줌.

'click'이라는 이벤트가 일어나면 function(){};를 실행해라!

함수 파라미터 자리에 들어가는 함수를 콜백 함수라고 부른다.

그래서 addEventListener() 함수 안에 두 번째 파라미터로 들어가 있는 함수도 콜백 함수다.

콜백 함수는 무언가를 순차적으로 실행하고 싶을 때 사용한다.

버튼 클릭 시 class 명 추가 및 제거하기

document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
   document.getElementsByClassName('list-group')[0].classList.toggle('on');
   document.getElementsByClassName('list-group')[0].classList.add('on');
   document.getElementsByClassName('list-group')[0].classList.remove('on');
})

클래스 추가하기 .classList.add('on');

클래스 제거하기 .classList.remove('on');

번갈아가며 클래스 추가 및 제거하기 .classList.toggle('show');

회고

주중에 자바스크립트 심화 강의를 다 들어서 주말 동안 뭘 공부하면 좋을까 고민하다가 결국 코딩애플 강의 프리패스를 질렀다ㅋㅋ 큰 금액이라 부담되긴 했지만 강의도 다양하고 구성이 좋은 거 같아서 나를 위한 투자라고 생각하고 결제했다. 다른 팀원들이 실습도 함께 하며 자바스크립트 공부하는 게 재밌어 보였고 혼자서 처음부터 끝까지 자바스크립트 코드를 작성하는 게 멋있어(?) 보였다. 나는 아직 내가 혼자 코드를 작성하진 못하고 이번 프로젝트처럼 튜터님이 제공해주신 기본 틀을 가지고 내가 원하는 대로 수정하는 수준밖에 되지 않는 거 같다.

오늘 새벽까지 축구 경기 보고(16강 짱...!) 아침에도 일찍 일어나서 그런지 피곤하고 집중력도 떨어져서 강의를 많이 못 들었다. 일단 내일까지 자바스크립트 입문 강의를 들을 수 있는 데까지 듣고 월요일부터는 리액트 입문 강의를 시작할 예정이다.

저작자표시