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): 다중 행 검색
'Books > Node.js 프로젝트 일주일 ✔️' 카테고리의 다른 글
[Node.js 프로젝트 투입 일주일 전] 6장 - json-server 이용하기 (0) | 2022.05.07 |
---|---|
[Node.js 프로젝트 투입 일주일 전] 5장 - Node.js 내장 모듈과 객체 (0) | 2022.05.07 |
[Node.js 프로젝트 투입 일주일 전] 4장 - Node.js 시작하기 (0) | 2022.05.05 |
[Node.js 프로젝트 투입 일주일 전] 2장 - 개발환경 구성 (0) | 2022.05.04 |
[Node.js 프로젝트 투입 일주일 전] 1장 - Node.js (0) | 2022.05.04 |
댓글