Tech notes

🔥 className VS classList 투두리스트를 만드는 프로젝트를 하는 중에, DOM요소의 클래스 이름을 가져올 때 className보다 classList의 메서드를 쓰는 게 더 좋다는 피드백을 받았다. className은 전체 class들을 하나의 string으로 반환하기 때문에 나중에 새로운 css가 추가되면 원치 않는 에러가 발생할 수 있다는 이유때문이었다. Element.classList - Web API | MDN Element.classList는 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티이다. classList 사용은 공백으로 구분된 문자열인 element.className을 통해 엘리먼트의 클래스 목 developer.mozilla...

IT/Javascript 2021. 1. 28. 11:28

이번에 스터디를 통해서 깃헙에서 평소엔 잘 쓸 일 없는 기능들을 써볼 기회가 생겨서 안 까먹게 기록해둔다. 우선, 원래 저장소의 main 브랜치와 따로 작업하는 방법은 두 가지란 걸 알았다. 1) 내 저장소로 포크해와서 작업하기 : 원래 저장소로 pull request를 보내기 전까진 수정 사항이 반영되지 않음 2) 원래 저장소에서 따로 branch를 만들고 그 브랜치 위에서 작업하기 : 브랜치 변경에는 git checkout이 필요함. 단, 이 경우 브랜치 변경을 까먹으면 작업 내역이 뒤죽박죽이 될 가능성이 있음 이번엔 1번 방법으로 작업한 후 원래 저장소의 내 브랜치로 풀리퀘스트를 보냈다. (main브랜치는 변경되면 안되는 작업이었음) 1. 내 저장소로 포크해오기 포크는 마음에 드는 저장소의 복사본을..

IT/Linux>Shell 2021. 1. 25. 20:31

📣HTML을 수정하지 않고 자바스크립트를 이용해서 요소를 추가하는 방법 새로운 요소를 추가하는 방법은 다음과 같다 1. createElement() - 새로운 노드를 만든다 2. createTextNode() - 새로운 텍스트 노드를 만든다 3. appendChild() - 노드1에 노드2를 append한다 잠깐 의문점) 이렇게 텍스트 노드를 append하는 것과 innerHTML을 사용하는 것의 차이가 뭐지? 어쨌든, 위 1~3을 통해서 삽입할 새 노드를 만들었고, 이제 문서에서 원하는 위치를 찾아서 다시 append해주면 된다. 하나의 노드를 리턴하는 메소드에는 getElementId('id')와 querySelector('css selector')가 있는데 후자를 사용해서 리스트 노드에 접근했다. ..

IT/Javascript 2021. 1. 21. 11:37

📣 Equality vs Identity 자바스크립트에서 두 개의 피연산자가 동일한지 확인하는 방법은 두 가지가 있다. - 동등 연산자 (equality operator) == - 일치 연산자 (identity operator) === 두 연산자의 차이점은, 동등 연산자는 타입을 변환해서 검사하고 일치 연산자는 그렇지 않다는 것이다. const stringFive = '5'; const numberFive = 5; // == loose equality, with type conversion console.log(stringFive == numberFive); //true console.log(stringFive != numberFive); //false // === strict equality, no t..

IT/Javascript 2021. 1. 18. 12:08