22_01_27_Thu.md

[22.01.27.Thu] - Day 10

Vanilla JS

• Set 객체 / Map 객체 (ES6)

  • Set 객체
    • 배열처럼 데이터의 집합.
    • 순서가 없음
    • value 값이 무조건 유일한 값만 유지 (유일한 값 보장)
    • 메서드
      • has; 불리언 값 반환 (원하는 요소 찾을 때 유용, 배열에서도 활용 가능)
      • delete
      • clear
  • Map 객체
    • key-value 쌍
      • object와의 차이점?
      • object는 보통 동적으로 확장시키지 않음
        • 그냥 DB로부터 가져옴
      • 동적으로 대량으로 뭔가 확장시키고 줄일 때 Map 객체 이용
      • 키로 문자뿐만 아니라 숫자, 함수 등 여러 타입 넣을 수 있음 (문자 사이 띄어쓰기도 가능)
    • 메서드
      • has; 특정 키 있는지 확인
      • set
      • get
      • delete
      • clear
    • 프로퍼티
      • size; 바로 size 알려줌

• Math 객체

  • round
    • 반올림 처리
  • ceil
    • 무조건 올림 처리
    • 실무) 게시판 페이징 처리할 때 총 페이지 수, 공간 대여 인원수, ...
  • floor
    • 무조건 내림 처리
  • trunc
    • 소수부 무조건 버림
    • 음수일 때 floor와 trunc 차이 발생
    • floor는 음수일 때 내리지만, trunc는 소수점 잘라냄
  • sign
    • 양수인지 음수인지 확인하기 위함
    • 음수이면 -1 반환, 양수이면 +1 반환, 0이면 0 반환
  • pow
    • 거듭제곱
  • sqrt
    • 제곱근
  • abs
    • 항상 양수로 반환
  • min
    • 가장 작은 값
  • max
    • 가장 큰 값
  • random
    • 난수 (무작위 수)
    • 0.0 이상 1.0 미만

• JSON 객체

  • JSON; 클라이언트-서버 통신 데이터 형식
  • JSON 데이터 포맷을 JS에서 처리하기 위한 객체
  • JavaScript Object Notation
  • 무조건 키는 문자열
  • 만약 값이 배열이면 문자열 형태로 다 바꿔줘야 함
  • 메서드
    • stringify
    • parse

• window 객체

  • alert; 경고창
  • confirm
  • prompt
  • open
    • 새창 띄움
    • ex. 테이블 상세 보기
  • setTimeout / clearTimeout
    • 지정된 특정 시간 지난 후에 실행
    • ex. 광고, 휴대폰 인증(3분), ...
    • 실무) 조회 버튼 누르는 순간 눈깜짝할 새 innerHTML DOM에 렌더링
      • 밑에 코드가 먼저 실행되서 null 뻑 날 수 있음
      • setTimeout 이용해서 코드 짬
  • setInterval / clearInterval
    • 특정 주기마다 반복
    • ex. 슬라이드 화면 주기 반복, 데이터 일정 시간마다 갱신 (주식차트)

• Symbol 타입

• 고급 문법

  • this
    • 일반 함수 내에서는 window
    • 객체 리터럴 내 메서드에서의 this는 객체 그 자체
    • 이벤트 핸들러 내의 this는 이벤트 달린 해당 DOM 요소
  • 스코프
    • 선언된 변수에 대한 접근성
    • Global Scope; 함수 밖에 선언된 변수는 함수 안이든 밖이든 다 참조 가능
    • Local Scope; 함수 안에 선언된 변수는 함수 안에서만 참조 가능 (밖에서는 참조 불가)
    • 다른 스코프에서는 동일한 이름의 변수 선언 가능
  • 기본 매개변수
  • 나머지 매개변수
    • 파라미터 개수 제한 X
    • 자동으로 배열에 다 들어감
  • 화살표 함수
  • 템플릿 리터럴

[Note]

• ECMAScript (JS 표준)
• 이터러블; forEach 메서드 사용 가능 (ex. set, map, ...)
• 배열에서 요소 찾을 때 includes 메서드는 내부적으로 for-loop 돎
  배열을 set 객체로 바꿔서 has 메서드 이용하는 것이 훨씬 빠름
• 유일한 요소 모을 때 Object의 key는 unique하다는 특성 이용해서 활용 가능
• UX 중요한 부분 오른쪽으로 가도록 바뀜 (버튼 - 취소 / 확인)
• 채팅은 HTTP 통신이 아닌 소켓 통신을 함
  • 서로 연결되어 있어서 양방향 통신 가능
  • 웹 소켓
  • 서버에서 특정 주기마다 계속 데이터 내려줄 수 있음
• setInterval과 소켓은 매우 큰 퍼포먼스 차이 발생
  • ex. 주식 차트 수만명 이상 보는 중
  • 서버에서 클라이언트로 쏴주면 10000번 통신만 일어남 (1명당 1번만)
  • 만약 기존 setInterval 방식이면 10000 * 2

Source Code