[내일배움캠프 TIL] 19일차

오늘 새로 배운 것

프로젝트를 진행하다가 쓰이고 있는 클릭 이벤트 토글을 할 수 있는 몇가지 틀을 정리하려고 한다.

const 변수 = document.querySelector(".클래스명")
변수.classList.add("기존 클래스명 뒤에 새로 붙일 클래스")
변수.classList.remove("새로 붙일 클래스")


//클릭 이벤트에 따라 클래스를 조작하는 로직의 틀1
function 실행함수(){
  const 변수 = OOO.className; 
  
 if(변수 !== 이벤트 발생시 클래스){
   OOO.className = 이벤트 발생시 클래스; 
} else {
  OOO.className = ''; 
}

function init(){
	addEventListener("click", 실행함수);
};

init();
  
//클릭 이벤트에 따라 클래스를 조작하는 로직의 틀2
const 변수 = document.querySelector('.클래스명') 또는 ('#아이디')
  변수.addEventListener("click",실행함수)


//클릭 이벤트에 따라 클래스를 조작하는 로직의 틀3  
function 실행함수(){
  const 변수 = OOO.classList.contains(기존 클래스 뒤에 붙일 새 클래스); 
  
 if(!변수){
   OOO.classList.add(기존 클래스 뒤에 붙일 새 클래스); 
} else {
  OOO.classList.remove(기존 클래스 뒤에 붙일 새 클래스);
}  

//클릭 이벤트에 따라 클래스를 조작하는 로직의 틀4    
function 실행함수(){
 title.classList.toggle(클래스명);
}

하루를 돌아보며...

오늘도 프로젝트 파일 수정할 부분 수정하고 추가 기능 구현할 부분 알아보고 try해보고 하다보니 시간이 금방 지나갔다. 이번 프로젝트의 추천 추가기능들을 보니 비밀번호 변경, 팔로우 기능, 좋아요 기능 등등 필수 기능 구현을 하다보니 추가 기능들을 구현하는 것도 다들 쉽지 않아보인다. 그 흔한 좋아요 기능도 그냥 봐왔을 때는 그냥 간단하게 생겼는데 생각보다 간단하지는 않아서 나중에 프로젝트 때 쓰일 수도 있으니 이부분도 좀 공부를 해봐야겠다.