[Normard Coder] 바닐라 JS로 크롬 앱 만들기_정리

 

---

Normard Coder_JS 강의

---

▶ 0

프로젝트의 규모와 상관없이

Javascript의 실용적이고 매우 유용한 함수, 지식들을 가르쳐주는 강의다.

직접 예시를 들어주며 꼼꼼하고 이해하기 쉽게 설명해주신다.

2021년에 리뉴얼된 강의라서 최신 문법과 함께 자주 쓰이는 기능들을 소개해주신다.

 

 

▶ 1

• 브라우저 내 Javascript가 포함되어 있다.
• 브라우저는 HTML을 읽는데 HTML에 의해 CSS, JS가 불러와진다.
• camelCase → Javascript
  snake_case → Python
• ` ` 백틱
  • `Hello ${ username }`
• const : 상수
  let : 변수
  • 권장 사용 : const → let → var (X)
• null : NOTHING (값이 비어있음)
  • let abc = 값을 받거나 할당을 하지만 아무것도 없을 때
• undefined : 메모리에는 있지만, 값이 존재하지 않음
  • let abc; (정의를 하지 않음)
• number : integer, float
• boolean : true / false
• array : [ ]
• object : { }
  • const object의 속성은 변경가능
• function( ) { }
• typeof( 변수나 data )
  • 해당 data의 자료형 반환
• parseInt("string") : string → integer
• isNaN( ) : Not a number → 숫자가 아닌지 판별
  • 숫자, 숫자로만 이루어진 문자열, null, 공백은 false 반환

 

 

▶ 2

• *.querySelector(".class tag ..")
  (위 표현과 동일) .getElementByClassName(" tag ")
  *.querySelector("#id tag ..")
  (위 표현과 동일) .getElementById(" tag ")
  
  
  • 해당 되는 여러 대상 중 첫 번째 것만 가져온다.
• *.querySelectorAll(" ")
  
  • 해당 되는 여러 대상을 모두 배열 형태로 가져온다.
• 기능 구현 순서 : 요소 선택 → 이벤트 등록 → 이벤트 작성
  • 이벤트 등록 : *.addEventListener(" ", function)
• CSS에 class를 만들고
  Javascript에서 classname을 수정하며 동작하게 만들기
  • 수정 → 해당 요소의 class에 추가, 삭제를 하기
• *.classList.toggle(" ") : 해당 요소의 class 목록에 선택한 class가 있으면 추가, 없으면 삭제
  • (위 표현과 동일)
    if( *.classList.contains(" "))
      *.classList.remove(" ")
    else
      *.classList.add(" ")
• document.querySelector("#id tag")
  • id요소들 중 tag 인 것만 선택됨
• console.dir(어떠한 tag)
  • 해당 tag의 객체 속성을 알 수 있다.
• function handleClick(event) {
    event.preventDefault( );
  }
  • 자동으로 실행되는 거 멈춤
    ex) 새로고침, 링크이동
• *.addEventListener("click", handleClick)
  • 직접 실행하지 않고, 브라우저가 해준다.
    브라우저가 실행 + event 정보 담기 해준다.

 

 

▶ 3

• setInterval( function, 1000 )
  • 매개변수 : 실행할 함수(콜백 함수), ms 단위
  • 매 시간마다 콜백함수를 실행한다
  • waiting → 콜백함수 → waiting → 콜백함수 → ...
• const data = new Date( );
  • date.getHours( );
  • date.getMinutes( );
  • date.getSeconds( );
• Timeouts( function, 1000 )
  • 매개변수 : 실행할 함수(콜백 함수), ms 단위
  • 기다린 후 1번만 콜백함수를 실행한다
• "string".padStart( 2, "0" )
  • 매개변수 : 채워야하는 문자열 길이수, 채워야하는 문자
  • 00:00 , 00:01 이런 거 채워야 할 때 사용

 

 

▶ 4

• Math.random( )
• Math.ceil( ) : 올림
  Math.round( ) : 반올림
  Math.floor( ) : 내림 → 배열에서 무작위로 추출할 때 사용
• document.createElement(" tag 이름 ")
  • tag 만들기
• document.body.appendChild( 선택된 요소 변수 )
  • Javascript에서 만든 tag를 HTML의 body 맨 뒤에 추가
• document.body.prependChild( 선택된 요소 변수 )
  • Javascript에서 만든 tag를 HTML의 body 맨 앞에 추가
• 선택된 요소 변수.remove( )
  
  • HTML에서 삭제

 

 

▶ 5

• 여러 li tag 중에서 어떤 tag인지 알아가는 과정
  • addEventListener 로 함수를 연결하면 그 함수의 첫 인자로 정보를 넘긴다.
    function deleteToDo( event ) {
      console.log( event.target.parentElement )
      // 클릭된 요소의 부모요소(li tag)가 출력된다.
    }
• JSON.stringify( 객체든 배열이든 어떤 코드든 )
  • 모두 String으로 바꿔준다.
• JSON.parse( 객체든 배열이든 어떠한 문자열 )
  • 객체 문자열 → 객체
    배열 문자열 → 배열
    로 변환하여 반환한다.
• 위 2가지를 활용하면
  • 저장
    localStorage.setItem( JSON.stringify( 배열 ) )
  • 출력
    JSON.parse( localStorage.getItem( "배열" ) )
    localStorage.getItem( "배열" ) → 문자열
    JSON.parse( localStorage.getItem( "배열" ) ) → 문자열을 원소로 가진 배열

 

 

▶ 6

• 배열.foreach( 콜백 함수 )
  • 배열의 각 원소마다 함수를 실행한다.
• 배열.push( 추가할 원소 )
• 배열.filter( 콜백 함수)
  • 각 배열 원소에 대하여 콜백 함수를 실행 했을 때 true인 원소만 뽑아서 배열로 반환

 

---