내일배움캠프 4기 스파르타코딩 React B반
📒 오늘의 공부
1. JavaScript 심화_3
this
1) 상황에 따라 달라지는 this
-
함수 vs 메소드
-
함수 - 그 자체로 독립적인 기능 수행
-
메소드 - 자신을 호출한 대상 객체에 관한 동작 수행
-
함수로서의 this
-> 독립적
-> 실행컨텍스트가 활성화될 때 this가 지정되지 않으면
this = 전역 객체(window) -
메소드로서의 호출 구분 기준 =
.[]
-> 호출의 주체가 있어 this가 binding이 된다.
-> 메소드 내부여도 함수로서 호출 시 this = 전역 객체
-> 중요한 것은 함수 호출 시.[]존재 여부!
-
-
메소드 내부 함수에서의 this 우회
- 변수 활용
->var self = this등으로 this를 담는다 - 화살표 함수
-> 화살표 함수 내부에서는 함수로서의 호출이어도 'this binding'이 skip
-> this는 상위값을 유지
- 변수 활용
-
생성자 함수 내부에서의 this
- 해당 instance를 가르킨다.
2) 명시적 this 바인딩
-
this에 별도의 값을 저장하는 방법
-
call method
-> 호출 주체인 함수를 즉시 실행하는 명령어 -
apply method
-> 매개변수를 배열 형태로 넘겨주는 것이 call과의 차이 -
bind method
-> 함수에 this를 미리 적용 / 부분 적용 함수 구현
-> name 프로퍼티에 'bound'라는 접두어가 붙어 추적하기가 쉽다
-
-
유사배열객체(array-like-object)
- call, apply method
-> length 필수
-> index번호가 0부터 시작해ㅓ 1씩 증가
- call, apply method
-
slice()함수- 배열로부터 시작 index, 종료 index를 인자로 받아 해당 범위를 복사하여 새로운 배열로 반환
-
argumentsNodeList -
Math.maxMath.min -
콜백 함수
- 함수라 this가 사라지기 때문에 bind method를 이용하기
2. DOM 및 JS기초 특강
-
목표
- 내가 했던 것이 'DOM'이었다는 것을 깨닫기
- DOM을 키워드로 구글링 할 수 있는가?
-
DOM(Document Object Model)
-
Parsing: HTMl(Document)를 분석해서 Object로 만드는 과정
-> JS가 동작할 수 있게! -
node마다 속성과 메소드를 가진다
-
⭐ 접근 후 제어!!
-
실습
-
getElementsByClassNamequerySelectorAll
-> 뒤에 '[2]' 등으로 순서 기재!
->querySelectorAll해당 태그 모두 쓰려면 순서 없어도 됨 -
querySelector
->.#선택자 꼭 쓰기 -
createElement에서append를 쓸 때 'body' 안의 원하는 위치에 넣고 싶으면childNodes이용
document.body.childNodes[5].append(p)
-> 5번째 자식인 'div'안에 'p'태그 삽입 성공! -
innerHTML
-> 선택한 태그의 하위 요소로 들어간다 -
innerText
-> '' 안에 태그를 넣어도 '' 안의 내용이 그대로 텍스트로 보인다 -
wirte
-> 조심!document.write('hi')하면 기존 내용 다 지워지고 'hi'만 남게 됨
-
❗
- addEventListner
-> 에디터에서 만들어둔changeBtn함수를 console에서 버튼에 이벤트만 추가하는데
.addEventListener('click', changeBtn())
-> 이렇게 하니 버튼 클릭하지 않아도 바로 바뀌고
.addEventListener('click', changeBtn)
-> 함수 이름만 넣으니 버튼을 눌렀을 때만 바뀜
- DOM에 대해 완전 이해 완료!!!
- 내가 썼던 게 DOM이라니! 이게 DOM이라니!!!!
- 강의자료 + 강의 복습도 하고 나니 특강 전까지만 해도 "DOM에 대해 아무것도 몰라요"했던 내 자신, 이제 BYE!!
- 너무 재밌었다!!
3. Youtube_코딩애플 JS 기초
- 팀원들이 추천해줘서 기초 강의 몇 개 들으며 코드 치는 연습을 했다.
- 오늘 들은 특강 내용과 겹쳐서 저절로 복습이 됐다.
- 파라미터를 이용해 함수 하나로 파라미터 값만 바꿔서 버튼을 눌렀을 때 내용을 열고 닫을 수 있다.
<script>태그를<head>안이 아니라</body>앞에 넣는 이유
-> HMTL 파일을 위에서부터 한 줄 한 줄 읽는데 특히 'jQuery'등의 외부 데이터를 가져오는 경우 다 가져올 때까지 브라우저가 잠시 멈추기 때문에 body 태그 끝나기 전에 넣는 것이 좋다!
🚩
방향성 고민
- 스터디 회의, 팀원들과 대화를 통해 공부 방향성 다시 점검
- 리액트를 이미 듣고 있거나 JS 유료 강의를 들으며 계속 코드치면서 실습을 해보는 동기들이 있어서 나도 공부 방향을 다시 생각해봤다.
- 일단 유데미 react 강의 결제했고 JS 기초가 탄탄해야 한다는 것도 동의해서 다른 분이 알려주신 freecodecamp 채널 이용해서 JS이론은 좀 천천히, 실습을 위주로 공부해야지!
