[Node.js 프로젝트 투입 일주일 전] 3장 - 서버 프로그램을 위한 자바스크립트

3.1 변수 선언자 이해하기

  - var 선언자

    - 같은 JS 코드 안에서 동일한 변수명 사용 가능 (변수 재선언 가능)

    - 내가 구현하고 있는 프로그램에 외부 JS 라이브러리를 사용할 때,

       전역에 var로 선언된 변수명이 있다면 기존 변수명과 중첩되서 예기치 못한 에러 발생 가능 (에러 추적 힘듦)

  - let 선언자 (ES6)

    - 동일한 변수명 갖는 변수를 재선언해서 사용 불가 (변수 재선언 불가)

    - 코딩 시점에 프로그램 오류 방지하는 장점

    - var 대신 let 사용 권장!!!

  - const 선언자 (ES6)

    - 선언 시점에 값을 할당한 후 같은 변수명으로 재선언뿐만 아니라 이미 선언된 변수의 값도 변경 불가

    - 실무 활용

      - 좋은 애플리케이션은 모든 화면에서 사소한 부분까지 동일한 날짜 포맷 사용 (UX)

      - 날짜 포맷을 const 선언자로 선언해서 다른 값으로 변경되지 못하게 만듦

        - ex) const dateFormat = 'yyyy.MM.dd'; (. - /)

3.2 화살표 함수(Arrow Function)

  - 함수 구문이 매우 짧아서 구현해야 하는 코드의 양이 줄어듦

3.3 Array 내장 함수

  - sort()

    - 문자형 데이터가 있는 경우 오름차순 정렬 (숫자도 문자로 인식)

    - 숫자 값으로 정렬하기 위해서는 정렬 함수를 정의해서 사용해야 함

      - 숫자 오름차순 정렬: array.sort((a, b) => a - b);

        - a - b 의 결과가 음수면 순서 유지, 양수면 순서 바꿈

      - 숫자 내림차순 정렬: array.sort((a, b) => b - a);

    - 정렬된 배열 역순: array.reverse();

    - 실무 활용

      - Object의 특정 키를 기준으로 sort() 함수 많이 사용

  - filter()

    - 특정 조건을 만족하는 배열의 요소만을 찾아서 새로운 배열로 반환

    - 콜백 함수(element, index, array)

  - map()

    - 배열의 데이터가 Object형일 때, 배열에 담긴 Object를 새로운 형태의 Object로 변환해서 배열로 반환

    - 실무 활용

      - DB로부터 가져온 데이터에는 존재하지 않지만,
         가져온 데이터를 활용하여 조합할 때 사용 (Object의 새로운 키로 추가)

      - 서버에서 클라이언트로 데이터를 전송하기 전에 클라이언트에서 필요한 필드만을 담도록 변경하기 위해 사용

        - 네트워크 트래픽을 줄여 성능 향상에 도움이 됨

  - reduce()

    - 배열에 담긴 데이터를 하나씩 순회하며 콜백 함수의 실행 값을 누적하여 결과 값 반환하는 함수

    - 실무 활용

      - 배열에 담긴 데이터의 합계 구할 때 많이 사용

        - 배열에 담긴 데이터가 Object이면 Object의 키를 이용해서 누적 값 구함

      - 콜백 함수(accumulator, currentValue, currentIndex, arr)

3.4 Template Literals

  - 더하기(+) 기호를 사용하지 않고 하나의 문자열로 합칠 수 있음

  - 백틱 이용

  - 문자열에 변수의 값을 병합할 때 매우 효율적으로 사용 가능

3.5 Spread Operator

  - 배열, 문자열과 같이 iteration 형태의 데이터를 요소 하나하나로 모두 분해해서 사용 가능

3.6 Object Destructuring

  - Object에 저장된 데이터를 분해해서 필요한 데이터만 바로 추출해서 사용 가능

3.7 Array Destructuring

  - 배열에 저장된 요소를 분해하여 배열의 순서에 따라 변수 정의 가능

  - 실무 활용

    - 위도, 경도 데이터를 반환받을 때,

       배열의 데이터를 내가 지정한 변수명으로 바로 담을 수 있음

  - 배열에 반환하는 데이터가 많을수록 특정 요소는 바로 변수에 할당,
     나머지 요소 모두 배열에 할당 가능 (... 이용)

  - 배열 안에 배열이 있는 경우도 분해 가능

3.8 Default Function Parameter

  - 함수 호출 시 파라미터가 전달되지 않을 경우 사용할 기본 값을 설정하는 기능

  - 파라미터 값이 전달되지 않아서 생길 수 있는 함수 오류 미리 방지 가능

3.9 Rest Parameter

  - 몇 개의 파라미터가 전달되지 모를 경우 매우 유용

  - 전달받은 파라미터 값은 배열로 저장됨

3.10 Promise

  - JS에서 비동기 처리에 사용되는 객체

    - 비동기: 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행할 수 있게 해주는 방식

  - Node.js; 파일 쓰기, DB 트랜잭션(CRUD) 등 비동기 함수 처리에 많이 활용

  - new 생성자 함수를 사용하여 생성

  - resolve (요청에 대한 응답 성공), reject (요청에 대한 응답 실패)

3.11 Async/Await

  - Promise와 동일한 목적으로 사용

  - Async는 비동기로 실행, Await는 비동기를 실행하는데 결과가 올 때 까지 기다린다는 의미

3.12 클래스(Class)

  - Class 정의

    - 클래스는 객체를 생성하기 위한 템플릿

    - 데이터와 데이터를 조작하는 코드를 하나로 추상화

    - 반드시 constructor() 생성자 함수 가짐

      - class 객체 생성 및 초기화 역할

  - Class 사용

    - new 키워드를 사용해서 객체 생성 가능

  - Class 내부 함수 정의

  - Class 상속

    - 부모 자식 관계처럼 정의된 클래스를 상속받아서 새로운 클래스 정의 가능

3.13 정규 표현식(Regular Expression)

  - 정규식 활용

    - 클라이언트로부터의 요청을 처리하는 라우트 경로를 만들 때 정규식 사용 가능

  - 정규식 만들기

    - 슬래시(/)로 감싸는 패턴인 정규식 리터럴 사용

    - RegExp 객체의 생성자 함수 사용

      - 정규식이 실행 시점에 컴파일됨

      - 정규식 패턴이 변경되거나,
        사용자 입력 및 DB 등 다른 출처로부터 오는 정보에 따라 정규식 패턴을 동적으로 적용할 때 활용

  - 정규식 함수

    - exec: 정규식을 통해 찾고자 하는 문자열 패턴을 찾고 배열 반환

    - test: 대응되는 문자열이 있는지 검사하고 boolean 값 반환
    - search: 대응되는 문자열이 있는지 검사하고, 대응되는 첫 번째 문자열의 index 반환

    - match: 대응되는 문자열을 찾고 배열로 반환하는 String 객체 내장 함수

    - replace: 대응되는 문자열을 찾고 다른 문자열로 치환하는 String 객체 내장 함수

    - split: 대응되는 문자열을 찾고, 문자열 기준으로 나누어서 배열로 반환하는 String 객체 내장 함수

  - 정규식 특수 문자

    - ^: 입력의 시작

    - $: 입력의 끝

    - {n}: 앞 표현식이 n번 나타남

    - {n,m}: 앞 표현식이 최소 n번, 최대 m번 나타남

    - *: 앞 표현식이 0회 이상 반복

    - +: 앞 표현식이 1회 이상 반복

    - ?: 앞 표현식이 0 또는 1회 등장

    - .: 단일 문자

    - (x): 괄호 안의 패턴 전체에 적용됨, 대응되는 결과 기억 ($1, $2, ...) (catpuring parenthesis)

    - (?:x): (x)와 사용법은 동일하지만, 대응되는 결과 기억 안함 (non-catpuring parenthesis)

    - x(?=y): x 뒤에 y가 뒤따라오는 경우에만 대응됨 (lookahead)

    - x(?!y): x 뒤에 y가 없는 경우에만 대응됨 (negative lookahead)

    - x|y: x 또는 y에 대응됨

    - [xyz]: 문자셋, 하이픈을 사용해서 문자 범위 지정 가능

    - [^xyz]: 부정 문자셋

    - [\b]: 백스페이스

    - \b: 문자열에 있는 단어의 경계 (시작 문자와 종료 문자에 대응됨)

    - \B: 단어 경계가 아닌 부분

    - \d: 숫자 문자에 대응됨 [0-9]

    - \D: 숫자 문자가 아닌 문자에 대응됨 [^0-9]

    - \s: 하나의 공백 문자

    - \S: 공백 문자가 아닌 문자

    - \w: 밑줄 문자를 포함한 숫자, 알파벳에 대응됨 [A-Za-z0-9_]

  - 정규식 플래그

    - g(global): 전역 검색 (대응되는 문자 전부 검색)

    - i(ignoring case): 대소문자 구분 없는 검색

    - m(multiline): 다중 행 검색