5/21 토요일

< 모던 딥 다이브 자바스크립트 책 > < 두잇 자바스크립트 >

해야할 것

1. 지금 보는 유투버 쿼리셀렉터 부분 볼 것 ( 쿼리셀럭터 후 () 이 부분에 아이디값 호출 할 때 아래 예시처럼 #을 사용한다.)

   const inputType = document.queerySelector("#typing")

?? 2. 쿠기, 섹션 뭔지

?? 3. forEach(콜백함수) 뭔지

4. 오늘 Array 내장 함수 4가지 map, filter, concat, from 꼭 이해 해야함 ( 바탕화면에 사진 넣어둠 다시 볼 것 ! )

! 5. cs 스터디 발표할 때 읽은 내용에서 ( 다들 읽고 오는 걸 기반으로 하기에) 중요한 핵심 키워드들 몇 개를 사진과 함께 이해를 쉽게 만든다!

6. Array.from() 이거 유사배열 복사해서 새로운 배열 만드는 법 말고 아예 새로운 배열 만드는 법에 대한 더 공부할 것.

7. filter()에서 indexof() 뒤에 붙혔을 때가 헷갈린다.

?? 8. dom요소가 아닌 react 요소다 뭔 소린지..?

9. 리액트는 if는 무조건 삼항연산자 아니라면은 {1== "1" ? name : "1"}

??10. 자바스크립트에서 딕셔너리라 불리는 자료형이 무엇인가?

배운 것

키워드 과제 < 다시 그 영상 밥 먹을 때 보고 대균님 내용의 이벤트 리스너 부분을 다시 이해 해보기 >

1. 이벤트란 예시( 웹페이지 사용자가 버튼을 클릭했다. 클릭 이벤트! 키보드 눌렀다. 키다운 이벤트! < 각 이벤트에 함수를 넣어 변화를 줄 수 있음 >

   "이벤트 핸들러"란 : 이벤트가 발생되면 실행될 코드 블록을 얘기함. < 주로 함수가 이 역할을 담당한다. >

   이벤트 핸들러 역할을 수행할 함수 정의하는 걸 "이벤트 핸들러 등록"이라고 한다.

   그래서 항상 이벤트 리스너가 필요함. 이벤트 리스너가 있어야 웹페이지 사용자가 하는 내가 필요로 하는 동작을 캐치해서 그 이벤트를

   핸들러에게 보내 핸들러가 작동하여 핸들러 안에 정해둔 코드를 실행시켜 내보낸다.

   // 쿼리셀럭터 후 () 이 부분에 아이디값 호출 할 때 아래 예시처럼 #을 사용한다.)

   const inputType = document.queerySelector("#typing")

   // 이벤트 핸들러 부분은 변수명을 거의 const handleClick = function() {} ... 이런 식으로 핸들 + 타겟 이름으로 이름을 만든다.

// inputType 에서 keydown 이벤트가 발생했을 때 ---> inputType.onkeydown = handleTyping 이런 식으로 위에 함수가 발생하도록 만든다.! 함수 뒤에 () 안 써야함!

// 이벤트 핸들링: 이벤트 핸들러 함수를 만들어서 개별 타겟에 이벤트 속성에다가 핸들러 함수를 대입하는 과정을 '이벤트 핸들링'이라고 한다.

@@@ 대균님 꺼 예시 사용

2. array 내장 함수 4개 < map , filter , concat ,from >

3. <App.js 파일! >리액트는 노드라는 런타임 위에서 돌아감 그래서 NVM이라는 파일로 노드 버전을 계속 업데이트 해주는 것임. ( NVM은 이 폴더에서는 이 노드버전을 쓸 거야. 라는 식으로 한 줄로 간단히 해결할 수 있다.)

4. 리액트에서는 JSX라는 문법을 사용해서 리액트 요소를(우리가 보는 뷰를 그린다) 만들어주고 이 요소를 돔에 렌더링 시켜줌 ( 돔에 띄어준다는 의미. 리액트에서 는 html 문법이랑 좀 다름....)

5. JSX가 정확히 무엇일까? html을 품은 자바스크립트 파일이 JSX이다.

6. 리액트 프로젝트에서는 .html 파일이 하나있다. ( 그럼 웹페이지에 많은 걸 어떤 방법으로 표현할까? )

7. jsx문법은 앞에 처럼 쓰고 맨 뒤에 / 이걸로 닫아줘야함 html은 안 그랬음

8. jsx에서는 리턴, 반환하는 요소(엘리먼트)는 무조건 하나. js에서는 두 개도 가능했음 리액트에서는 값을 하나 하나 써줘야함. 그러므로 여러개 반환할 때

   안에 넣어서 하나의 형태로 반환해야함

9. 요소가 하나도 없어서 리턴을 안 해줘도 오류가 남. 무조건 하나의 형태로 만들던가. 아예 쓰지말아야함. ( 아무것도 없으면 null<빈공간을 의미하는 객체> 이라도 넘겨줘야함)

!10. 자바스크립트나 jsx나 return 뒤에 if문 쓸 수 없음 그래서 삼항연산자 쓰는 거임 ! ( 리액트서 하나의 값을 반환해야하므로 if문도return 의