22_01_25_Tue.md

[22.01.25.Tue] - Day 08

Vanilla JS

• switch문

  • 조건식을 넣을 수 없음
  • 반드시 변하지 않는 상수값 하나 가지고 이용
  • if문보다 훨씬 빠를 수 있음
  • 사실 실무에서는 if문, switch문 모두 안씀

• 반복문

  • 특정 코드 블록을 특정 횟수만큼 반복해서 실행되게 만드는 것
  • for-loop
  • for-in
    • 배열 인덱스
    • object 프로퍼티
  • for-of
    • 배열 요소
    • 문자열의 문자
  • while문
    • do...while 문
    • 반복 횟수 모를 때 while문 매우 유용

• 함수

  • 반복적으로 사용되는 특정 기능 수행하는 하나의 실행 단위
  • 함수 사용 이유
    • 코드의 재사용성 (재활용)
    • 유지 보수성 (운영 및 관리 편해짐)
  • 함수 만들기
    • 함수 선언식
      • JS 엔진이 함수 호이스팅
      • 위치 상관없음
    • 함수 표현식
      • 변수 선언과 동일
      • JS 엔진이 변수 호이스팅
      • 위치 매우 중요
      • 코드 많이 있을 때, 가독성 위해 함수 선언문 대신 함수 표현식 활용 가능
    • Function 생성자 함수
      • 동적으로 함수 생성

• 객체

  • 모든 객체는 내장 함수를 가지고 있음
  • String 객체
    • length 프로퍼티
    • indexOf 메서드
      • 사용자가 입력한 문자 있는지 체크 위한 용도 (tel; -)
      • 몇 번째에 있는지 찾기보다는 입력한 키워드 또는 문자 있는지 알고 싶을 때 사용!
    • lastIndexOf 메서드
      • 가장 마지막에 나타난 인덱스
    • slice 메서드
      • slice([startIndex, endIndex + 1])
      • 시작 인덱스만 있어도 됨
      • 마이너스 값 사용 가능
        • 실무) 마지막 특정 문자 확인할 때 유용 (substring 메서드보다 훨씬 편함)
        • slice(-1)
    • substring 메서드
      • slice 메서드와 기능은 동일하지만 무조건 시작 인덱스, 종료 인덱스 필요
      • 마이너스 값 사용 불가
    • substr 메서드
      • 시작 인덱스와 길이를 줌
      • 그 길이만큼 잘라냄
      • 잘라낼 대상의 길이 정확히 알 경우 substr 메서드 매우 편함
        • 실무) 날짜 구분해서 자르기
    • replace 메서드
      • 문자열 내의 특정 문자를 다른 문자로 교체
      • 첫 번째 발견되는 것만 바꿔줌
      • 전부 다 바꿔주기 위해서는 정규 표현식 사용
    • toUpperCase 메서드
      • 모두 대문자로 바꾸기
    • toLowerCase 메서드
      • 모두 소문자로 바꾸기
    • concat 메서드
      • 여러 문자열 더하기/결합하기
    • trim 메서드
      • ex. 사용자명 검색
        • 사용자가 검색창에 공백 포함해서 입력할 수 있음
        • 또는 DB에 저장되어야 하는 값일 때 활용
      • 앞뒤 공백 제거
        • 사이 사이 공백까지 제거하려면 replace, 정규식 이용

[Note]

• 코드 내 성능보다 사실 제일 중요한 건 UX임!
  • 사용자의 실행/사용 측면에 집중을 많이 해야 함!
  • 실제 사용자가 앱을 사용하는데 특정 행위 분석하고 속도 고려하는 것이 더 중요
• object 프로퍼티를 동적으로 접근할 때는 [ ] 이용
  • 정적으로 접근할 때는 . 이용
• 리드 개발자
  • common.js 파일에 자주 사용할 함수들 미리 만들어놓음
  • 다른 개발자들은 그 js 파일을 import해서 사용 (만약 그 화면에서 필요하면)
  • 해당 화면에서만 사용하는 함수면 해당 js 파일에서 만들어 사용
  • 만약 공통적으로 사용될 것 같으면 common.js 또는 다른 공통 js 파일에 포함
  • 동일한 이름의 함수가 여러 개 존재하면 오버라이딩됨
• 처음부터 완벽하게 코드를 짤 수는 없음
  • 필요한 기능 빠르게 구현하고 계속 리팩토링
• 단순히 사용법이 아니라 메서드 용도를 아는 것이 제일 중요!
• HTML상에서 CSS로 lower/upper case로 바꾼 건 화면상에서만 바꾼 것임
  • 실제 데이터는 소문자로 저장됨
  • 비교를 위해 str.toUpperCase/toLowerCase 메서드 사용

[Q&A]

Source Code