22_01_26_Wed.md

[22.01.26.Wed] - Day 09

Vanilla JS

• String 객체
  • padStart(), padEnd()
    • 매개변수: 자릿수, 채우고 싶은 것
    • padStart()는 앞에 채워줌
    • padEnd()는 뒤로 채워줌
  • charAt()
    • 매개변수: 인덱스
    • 인덱스에 해당하는 문자 1개만 가져옴
    • 실무) 계정의 앞 1글자는 권한 의미 (관리 체계)
      • Admin, Manager, ...
      • 맨 앞 1글자 또는 맨 끝 1글자 체크할 때 보통 사용
  • charCodeAt()
    • 매개변수: 인덱스
    • 유니코드 값 반환
  • split()
    • 매우 많이 사용
    • 특정 구분자를 기준으로 분리해서 배열 반환
    • 실무) 해시태그, 쉼표 분리
      • 년/월/일 분리할 때 매우 편함 (substring보다 더 편함)
  • startsWith(), endsWith()
    • 문자열이 주어진 매개변수로 시작/끝인지 확인
    • 불리언 값 반환
    • 생각보다 많이 사용함
    • ex. url 시작/끝 주소 확인, 사용자가 업로드한 파일 형식 확인
• Number 객체
  • toString()
  • toExponential()
    • 지수 표기법
    • 문자열 타입으로 반환
  • toFixed()
    • 소수점 자릿수 맞추기 (반올림)
    • 문자열 타입으로 반환
    • 실무) 금액 소수점 자릿수 맞춰서 화면에 표현 (해외)
  • toPrecision()
    • 정수, 소수 합한 자릿수
  • parseInt()
    • 문자를 숫자로 바꿔줌
    • 소수점 이하 버림
  • parseFloat()
    • 부동 소수점 수로 바꿈
  • Number.MAX_SAFE_INTEGER
    • 안정적임
  • Number.MIN_SAFE_INTEGER
    • 안정적임
  • Number.MAX_VALUE
  • Number.MIN_VALUE
• Array 객체
  • toString()
    • 한 문자열로 만들어줌 (무조건 쉼표 붙임)
  • join()
    • 서버로부터 받아온 데이터를 화면에 출력할 때 많이 사용
    • 결합시킬 때의 중간 문자 지정해서 하나의 문자열로 합칠 수 있음
  • push()
    • 배열 뒤에 요소 추가
  • pop()
    • 배열 뒤의 요소 빼기
  • shift()
    • 배열 맨 앞 요소 빼기
    • 실무) 대량으로 서버에서 고객한테 문자/이메일 발송
      • 이벤트 처리하는 큐를 하나 만듦
      • 사용자 요청이 들어 올 때 마다 push로 계속 쌓아놓음
      • 앞에서부터 하나씩 빼면서 이벤트 처리
  • unshift()
    • 배열 맨 앞에 요소 넣기
  • splice()
    • 특정 위치에 내가 원하는 요소 추가 가능
      • 추가시킬 인덱스, 삭제하고 싶은 개수, 추가하고 싶은 것
      • ex. 엑셀 행, 열 중간 삽입
  • concat()
    • 배열 결합
    • 스프레드 문법 사용하면 더 편함
  • slice()
    • 원하는 요소 잘라냄
    • 시작 인덱스, 종료 인덱스
    • 문자열의 slice()와 동일
  • sort()
    • 문자열 기준 sort
    • 배열 요소들을 하나하나 차례대로 비교하면서 바꿈
      • 음수 값이면 자리 안바꿈
      • 양수 값이면 자리 바꿈
    • ex. DB 데이터 조회할 때 특정 조건으로 검색해서 화면에 뿌릴 때 유용
    • 1차 정렬, 2차 정렬 등 지정할 때는?
      • if else if else 잘 써서 순서대로 정렬시키면 됨
  • filter()
    • 콜백 함수가 true 반환하는 것만 모아서 새로운 배열로 반환
    • 매우 많이 사용
    • 특정 조건에 맞는 요소만 필터링할 때 유용
  • map()
    • 여러 곳에 반복해서 화면에 배열 데이터 뿌려줄 때 유용
    • 배열 안의 기존 object 말고 새로운 object 만들어서 반환
    • 서버에서 많은 필드 다 던져주면 네트워크 패킷 비용 증가
    • 하나 가지고 여러 곳에서 계속 사용하는 것이 아니라
      서버에서 클라이언트로 상황에 맞는 필요한 object 만들어서 던져주면 훨씬 구현 편해짐
  • reduce()
    • 합 구할 때 많이 사용
• Date 객체 (날짜 다루기 위함)
  • 컴퓨터 시간 기준으로 나옴
  • 정확한 날짜 필요할 때는 서버에서 실시간 날짜 가져와서 체크해야 함
  • padStart 활용해서 0 붙이기 유용
  • getFullYear()
  • getMonth()
    • 0 ~ 11
    • 항상 + 1 해주기
  • getDate()
  • getDay()
    • 0 ~ 6 (일 ~ 토)
  • getHours()
  • getMinutes()
  • getSeconds()
  • getMilliseconds()
  • getTime()
    • 1970년 1월 1일 기준으로 현재 시간까지의 총 milliseconds
  • setFullYear(), ...
  • 실무) 화면에서 데이터 리스트 조회할 때 시작/종료 날짜 지정
    • 보통 날짜 조회하는 기업 업무 시스템
    • 종료 날짜는 무조건 오늘 날짜로 자동 default 세팅
    • 조회 시작 날짜는 업무 화면별로 업무 담당자와 상의해서
      일주일/2주/한 달 전 등 기본 시작 default 날짜 세팅
    • 사용자는 바로 조회 버튼 눌러버림

[Note]

• String.prototype 치면 내장 함수 다 나옴
• document에 HTML 핸들링 하기 위한 모든 내장 함수 가지고 있음
• 문자열 결합 많아질수록 성능에 안좋음 (수십, 수백건 이상 될 때)
  • 배열에 문자열 push해서 넣는 것이 훨씬 빠름
• 내장 함수의 기능에 초점을 맞추면 안되고 용도를 생각해야 함
• 배열 내장 함수 매우 중요!!!

Source Code