Dust

포트폴리오 헤더 만들면서 생긴 문제,,

Link 안에 span태그로 다크모드를 만들었더니 다크모드 클릭 할 때마다 홈으로 가는 현상 발생

이벤트 버블링 막는 메소드가 e.stopPropagation() 만 있는 줄 알고 왜 안되지 ? 고민만 하다가 검색해보니

form submit 버튼 클릭시 막아주는 메소드(e.preventDefault)를 써도 이벤트 버블링을 막을 수 있다는 걸 발견 

e.stopPropagation 안되면 e.preventDefault 써보기

차이가 뭔지 찾아봐야겠다

<header>
    <div>
        <Link to={'/'}><h1 className="logo">Dust
            <span className="dark-mode" onClick={(e) => {
                // e.stopPropagation();
                e.preventDefault();
                const click = e.currentTarget;
                if(click === e.currentTarget){
                    root.classList.toggle('dark');
                    setDark(!dark);
                }
            }}>{dark ? '🌜모드' : '🌞모드'}</span></h1>
        </Link>
        <ul>
            <li><Link to={'/todolist'}>TodoList</Link></li>
            <li><Link to={'/shop'}>shop</Link></li>
            <li><Link to={'/board'}>Board</Link></li>
            <li><a href="#">Github</a></li>
        </ul>
        <div id="mobile-menu" onClick={() => {
            dispatch(modalOpen(true));
        }}>Menu</div>   
    </div>
</header>

let num = function(a){
  return a + 10;
}

기본 함수가 있을 때 화살표 함수는

let num = (a) => { return a + 10 };​

function을 없애고 좀 더 간단히 쓸 수 있음

더 간단히도 쓸 수 있음 값이 하나거나 코드가 한 줄 일 때

let num = a => a + 10;

여러개일 땐 중괄호를 써줘야함

예시!

let arr = [1,2,3,4];
arr.forEach((v) => {
    console.log(v + 10);
})
// 11, 12, 13, 14

this 값 재정의 x (바깥에 있던 this 값을 내부에서 그대로 사용함)

document.getElementById('button').addEventListener('click', function(e){
	this;
    // 여기서 this란 e.currentTarget
});



// arrow function으로 변경시
document.getElementById('button').addEventListener('click', (e) => {
	this;
    // 여기서 this란 window이기 때문에 e.currentTarget을 쓰는것이 좋음
});

// 위에서 this를 쓰면 여기서 this 쓰는것과 같음(arrow function이기때문)

arrow function object 안의 함수

let object = {
  num : () => {
    return this;
    // arrow function이기때문에 window 출력
  }
}

object.num();

헷갈리는 this를 알아보자..,

객체나 함수 안에서 this를 썼을 때

// this를 그냥 쓰거나 일반 함수에서 쓰면 window를 뜻함

let thisObject = {
    name: 'dust',
    test: function(){
        console.log('함수 내 this 테스트');
        // 메소드 안에서 this를 쓰면 thisObject를 뜻함(속해있는 object)
        console.log(this);
    },
    data : {
        test2: function(){
            // data를 뜻함(속해있는 object)
            console.log(this);
        }
    }
}

addEventListener 안에서 this를 썼을 때

modal.addEventListener('click', function(e){
    console.log('e.target: ',e.target);
    console.log('e.currentTarget: ',e.currentTarget);
    console.log('this: ',this);
    if(e.target == e.currentTarget){
        modal.classList.toggle('modal-open');
    }
})

e.currentTarget과 this는 같다(이벤트가 붙어있는 곳을 this)

let object = {
    names: ['김', '이', '박'],
    test: function(){
    	// object
        console.log(this);
        object.names.forEach(function(v){
            console.log(v + '먼지');
            // window
            console.log(this);
        })
    }
}
object.test();

화살표 함수 사용시

let object = {
    names: ['김', '이', '박'],
    test: function(){
    	// object
        console.log(this);
        object.names.forEach((v) => {
            console.log(v + '먼지');
            // 위에 있는 this 값을 물려씀, 그니까 object
            console.log(this);
        })
    }
}
object.test();

// html 태그 생성
// 첫번째 방법
const div = document.querySelector('#create');
const p = document.createElement('p');
div.appendChild(p);
p.innerText = '반가워';

// 두번째 방법(요즘엔 이렇게 많이 쓰인다고 함)
let div2 = `<p>안녕</p>`;
document.getElementById('create2').insertAdjacentHTML('beforeend', div2);

const width = window.innerWidth;
const height = window.innerHeight;
// 브라우저의 width, height 값

스크롤을 얼마나 했는지 확인

window.scrollY

일반 div박스나 다른 요소의 스크롤을 확인하고 싶을 때

const section = document.querySeletor('section');
let sectionHeight = section.scrollHeight; 
// 스크롤 포함 실제 높이, 페이지가 로드완료되야 정확함(body태그 밑에 써주는게 좋음)
let scroll = section.scrollTop;
// 하면 페이지 내 scroll이 있는 section 박스의 scroll이 어디인지 확인가능
// 위에서 얼마나 내렸는지 알려주지만 전체적으로 내린것이 아님
let 실제setion높이 = section.clientHeight;
// 실제 section의 높이값

원하는 위치로 강제 스크롤

window.scrollTo(x, y);
window.moveTo(x, y);

원하는 위치로 이동 후 설정한 x, y 좌표 말고 움직일 수 없음

현재 위치에서부터 어디까지 추가로 이동

위와 마찬가지로 움직일 수 없음

window.scrollBy(x, y);
window.moveBy(x, y);