멋쟁이사자처럼 프론트엔드스쿨 w/ 제주코딩베이스캠프
오전(09:00~11:50) 수업 w/ Wade
수업
DOM
- innerHTML은 tag를 읽어내는 기능까지 있기 때문에 비용이 비싸다. 그러므로 그냥 text만 넣고 싶다면 textContent 등으로 넣어주기
- innerText도 태그를 인식하지 못한다.
- innerText vs textContent
https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/innerText#예제
textContent는 공백 및 줄 바꿈과 같은 서식을 인식하고 반환해주고 마크업만 제거해서 반환해줌. (브라우저 호환성도 좋고, 텍스트 콘텐츠의 raw 값을 보여줘서 파싱이 빠릅니다.
inner Text는 css가 랜더링 됨 textContent랑 비슷해보이는데 공백을 인식하진 못합니다. (사람이 읽을 수 있는 요소만 처리) 리플로우가 일어남 - class등을 innerHTML로 줄 수 있다.
- 태그내부로 <script>를 해줄 수 있겠지만 HTML5는 innerHTML로 들어간 script가 실행되지 않도록 한다. 왜냐하면 태그의 inline으로 script가 바로 들어가면 보안 위험이 있기 때문이다.
- Cross site scripting은 XSS
막간 팁 - 건너건너 소개로 코테 없이 기술 면접만으로 합격하는 경우도 있다..!! 인맥 최고.. 수습 기간동안은 회사에서 살아보는 것도..^^
previousSibling는 이전 node를 찾고previousElementSibling은 이전 요소를 찾는다.- html element는 node의 일부분, 주석도, 그냥 text도 node의 일부분
- 유사배열 기억
Capturing, Bubbling
- 캡쳐해가면서 따라가는 것
- 브라우저는 eventlistener, 캡쳐링을 다 실행시켜준다.
- 캡쳐캡쳐하면서 이벤트 대상을 찾는다.
- 캡쳐링이 끝나면 다시 돔트리를 따라서 모든 버블링 단계(상위 단계로 올라가는)
- 둘 다 이벤트 대상을 찾을 때 일어나는 현상인데
캡쳐링은 위에서 아래로 버블링은 아래에서 위로 - 이벤트에는 캡쳐링, 버블링 단계가 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../reset.css">
<style>
</style>
</head>
<body>
<article class="parent">
<button class="btn" type="button">버튼</button>
</article>
<script>
const parent = document.querySelector('.parent');
const btnFirst = document.querySelector('.btn');
btnFirst.addEventListener('click', (event) => {
console.log("btn capture!");
}, true);
window.addEventListener('click', () => {
console.log("window capture!");
}, true); // true : 캡처링 단계의 이벤트가 발생하도록 합니다.
document.addEventListener('click', () => {
console.log("document capture!");
}, true);
parent.addEventListener('click', () => {
console.log("parent capture!");
}, true);
btnFirst.addEventListener('click', (event) => {
console.log("btn bubble!");
})
parent.addEventListener('click', () => {
console.log("parent bubble!");
});
document.addEventListener('click', () => {
console.log("document bubble!");
});
window.addEventListener('click', () => {
console.log("window bubble!");
});
</script>
</body>
</html>→ 캡쳐링과 버블링을 이해하기 위한 좋은 예제. 실행해보면 안다.
기본값이 bubbling이기 때문에, true를 넣어줘야 capturing이 일어난다.
- target 속성에는 event 발생 진원지 정보가 담겨있다.
- currentTarget은 eventListener가 달려있는 요소
- target을 통해서 event 위임이 가능하다.
- 부모에 eventLister를 달아서 그 안의 자식 요소들에서 eventListening이 발생하도록 해줄 수 있다.
tip 재현님은 스터디 발표 자료를 다 모아놨다. 블로그 깃헙 잔디 같은 것도 잘 안하셨다고..!!
오후(13:00~18:00) 수업 w/ Wade
break
- jetbrain 언어 순위, 동향 구경 검색해보면 좋을 듯
수업
this
- 이벤트가 연결된 node를 바라본다.
- event.currentTarget 속성의 참조값과 유사하다
- 화살표 함수 안에서의 this? → 상위 scope, 부모 scope를 참조한다. 그래서 eventListener에 function()으로 실행할 때나, 화살표 함수로 실행할 때 this가 가리키는 것이 다르다.
let element = document.querySelector("재현");
element.addEventListner("click",function onClick(ev) {
console.log(this);
console.log(ev.target);
console.log(ev.currentTarget);
});→ this, target, currentTarget 이해에 도움
- JS 만든 사람들이 편하게 사용하라고 target, currentTarget을 만들어뒀으니 굳이 this 쓸 필요 없는 것 같다.
- 막간 퀴즈
커스텀 셀렉트 박스에 기능을 붙여봅시다!
1. list-member 요소에 자식 요소들을 생성하여 넣어줍니다. 교재의 예시를 참고해주세요 🙂
2. btn-select 를 누르면 list-member 가 화면에 노출됩니다. (처음에는 숨겨저 있습니다.)
3. list-member 의 자식요소를 누르면 눌린 요소의 텍스트 컨텐츠가 btn-select 요소의 텍스트 컨텐츠가 되도록 합니다.
4. list-member가 숨겨집니다.// display none과 같은 style 처리는 css로 따로 분리하자
const button = document.querySelector('.btn-select');
const list = document.querySelector('list-select');
const arrLang = ["Python", "Java", "JavaScript", "C$", "C/C++"];
arrLang.forEach((item) => {
const li = document.createElement('li'); // arrLang을 넣어줄 HTML 요소 생성
const btn = document.createElement('button'); // li 넣어줄 button 생성
btn.setAttribute('type', 'button'); // button의 기본 type은 submit이기때문에 type button을 넣어줬다.
btn.textContent = item; // arrLang의 item들을 btn의 textContetn로 넣어준다. innerHTML이 아닌 element로 넣어주는 이유는 innerHTML은 치루는 비용이 크기 때문이다.
list.appendChild(li).appendChild(btn); // appendChild는 자식노드를 반환하기 때문에 method chaining으로 이러줄 수 있다.
});
button.addEventListener('click', () => {
button.classList.toggle('on');
}
list.addEventListener('click', (event) => {
if (event.target.nodeName === "BUTTON") { // node가 BUTTON일 경우로 처리해주지 않으면 ul의 가장자리 선택시 addEventListener가 호출되어버리는 문제 발생
button.textContent = event.target.textContent;
button.classList.remove('on');
}
)};- 요소를 유사객체로 저장해서 forEach를 사용하는 것은 지양하자. IE에서는 작동을 안한다...
- style 바꾸는 것은 JS로 해주지 말자
- innerHTML도 기회비용이 큰 방법이다. 많이 느리다. → contentText를 넣는게 낫다
- appendChild는 이동한
자식 노드를 반환한다. - 쉽지 않지만 재밌다
TDD
- 테스트를 통한 기능의 구현
- 이번에는 Unit Test 학습
- Unit Test?
→ 함수가 어떻게 작동하는지 정의하고, 잘 작동하는지 확인하는 것 - 기능을 바로 구현하지 않고, 테스트 코드를 먼저 작성하는 것
- Test Code가 거치는 단계
→ 적색 단계, 녹색 단계, 리팩터 단계 - 리팩터가 쉽지가 않다. 만든다고 만드는데 실패하면 다시 적색단계로 넘어가는 것이다.
- 끊임없이 적색, 녹색, 리팩터, 적색, 녹색, 리팩터...를 도는 것
- 완벽한 코드라는 것이 있을까?
- TDD를 면접 때 많이 물어본다고
- 생성자 함수는 대문자로 시작
- 우리는 Jasmine 사용
- describe는 HTML로 따지면 section 같은 느낌 describe 안에 it 같은 애들이 여러개 들어가는 것
- 테스트용 파일
.spec.js랑 해당 JS 파일.js랑 이름이 같을 필요는 없지만 괜히 다르게해서 닌자 짓을 하지 말자 - 예외처리도 좋은 리팩토링이 될 수 있고
- 대부분의 회사에선 main branch, dev branch 따로 있다.
- 코드를 객체지향적으로 짜면 테스트가 가능해진다.
- 모듈 패턴을 이용하는 이유? → 값을 은닉하기 위해서
- 함수 컨텍스트는 외부에서 접근이 불가능하다
- 생성자 함수 이름은 파스칼 케이스로 보통 작성
- 생성자 함수로서 호출하려면 new Person()
일반 함수로서 호출하려면 Person() - type을 만들기 위해선 생성자 함수를 이용한다.
'기록 > 멋쟁이사자처럼 FE 스쿨' 카테고리의 다른 글
| [멋사 FE 스쿨] 32일차 리뷰 (0) | 2021.12.14 |
|---|---|
| [멋사 FE 스쿨] 31일차 리뷰 (0) | 2021.12.13 |
| [멋사 FE 스쿨] 29일차 리뷰 (0) | 2021.12.09 |
| [멋사 FE 스쿨] 28일차 리뷰 + 보라님 특강 (2) | 2021.12.08 |
| [멋사 FE 스쿨] 27일차 리뷰 (0) | 2021.12.07 |
댓글