22_02_10_Thu.md

[22.02.10.Thu] - Day 12

Vanilla JS

• 에러 핸들링
  • JS는 에러 발생하면 에러 발생한 곳에서 멈춰버리고 아래 코드는 실행되지 않음
    • ex. 화면이 열리다 중단될 수 있음
  • try ... catch 구문
    • 에러 발생하더라도 멈춰버리지 않고 다음 코드 실행되도록 만들어 줌
    • 예기치 못한 에러 발생하더라도 다음 코드 실행 가능
    • catch 구문에서 에러 잡아서 정보성 에러 표시 (프로그램 중단 X)
    • ex. 외부에서 제공해주는 API 데이터 받아올 때 에러 발생 가능
      • 작은 에러 하나 발생해서 나머지 데이터 모두 표시 안될 수 있음
      • 사용자 경험 안좋게 되는 문제 발생 가능
      • 내가 control 할 수 없는 코드 부분에 한해서만 try catch 구문 작성하기!
      • 모든 구문에서 작성할 필요 없음
      • 실무에서 사실 거의 사용하지는 않음
        • 개발 서버에서 테스트할 때 다 표시됨
        • 써드 파트 라이브러리 (외부 시스템)로부터 데이터 통신할 때는 우리가 모르는 장애 발생 가능
        • 그럴 경우네는 try ... catch 구문 사용해야 함
        • catch 구문에서 에러 처리 가능
    • 비동기 처리 관련
      • ex. try 구문 안 setTimeout() 에서 에러 발생하면 catch 구문에서 안잡힘...
        • setTimeout 비동기 함수 내의 콜백 함수에서 try ... catch 구문 사용해야 함
    • finally 구문은 에러 나든 안나든 상관없이 무조건 실행할 구문 작성
      • ex. 엑셀 파일 close 관련해서 finally 구문에서는 반드시 사용 (자바, 노드; 서버 프로그래밍)
      • 가독성 관련해서도 작성 가능
    • 일부러 에러 발생시킬 수도 있지만 사실 거의 그렇게 하지는 않음
  • 에러의 종류
    • ReferenceError; 참조 에러
    • TypeError; 타입 에러
    • SyntaxError; 구문 에러
• script mode
  • ES5, 엄격한 모드
  • 'use strict';
  • JS가 암묵적으로 허용했던 에러들을 잡아줌
• 정규식
  • 문자열에서 내가 원하는 특정 문자열 패턴 찾아내기
  • 정규식 내장 함수
    • test
      • boolean 값 반환
      • regexp.test(str)
      • 정규식이 str에 패턴 있으면 true return
  • 문자열 내장 함수
    • search
      • str.search(regexp)
      • str에 regexp 패턴 있으면 처음 인덱스 번호 반환
      • indexOf 메서드로 단순하게 찾을 수는 있지만
        복잡한 패턴 있을 때 search 메서드 활용 가능
    • match
      • str.match(regexp)
      • str에 regexp 패턴 있는것 다 찾아서 배열에 담아줌
  • 중괄호는 글자수 제한
  • 대괄호 밖 ^와 $는 각각 시작/종료 패턴
  • +는 최소 1개 이상
  • *는 0개 이상 (있을 수도 있고 없을 수도 있음)
  • ?는 0개 또는 1개
  • ex. 이메일 체크 정규식
    • 이메일 형식은 맞지만 실제로 이메일이 존재하는지 확인하려면?
      • 그것만 제공해주는 서비스도 있음 (이탈리아 서비스)
        • 구독자 BM
      • 실제로 메일 보내서 확인해서 반송해주는 것 구현하는 것 쉬움
        • 이메일 테스트 서버
        • email-existence 모듈 있음 (npm)
          • 모든 메일 처리 못하는 단점 존재
• DOM
  • 시작; element 접근 (찾기)
    • id로 접근
      • document.getElementById('')
    • 태그로 접근
      • document.getElementsByTagName('')
      • 배열 return
    • 클래스로 접근
      • document.getElementsByClassName('')
    • element 속성 중 name을 이용하는 방법
  • 이후 element 속성 값 제어 (get, set)
  • element에 대한 event 제어
  • element에 대한 디자인 스타일 제어

[Note]

• 정규식 충분히 이해하기!
  • 정규식 알아도 만드는 것이 쉽지 않음
  • ex. 핸드폰 번호
• json-server 비슷한 GUI 시각적인 툴인 Postman
• DOM; Document Object Model
  • DOM 트리
  • html
    • head
    • body
      • label, input, br, button, ...
• jQuery에서는 DOM 접근하는 것을 함수로 제공해서 편했었음
• 궁금증
  • DOM attribute 속성 값 직접 제어 vs. getAttribute('')
  • 실시간 데이터 여부로 구분됨
• select 박스에서 세부 select에 대한 정보를 DB로부터 받아오기 전에 disabled => 받아오면 풀도록 처리 가능
• 시스템에서는 country code로 관리해야 함
  • country list json 정보 제공해주는 외부 라이브러리 있음
  • country list excel
    • DB에서 excel import 가능
• 단순한 서비스 구현 하나만으로도 B2B 서비스 운영 가능

Source Code