Node.js(1)

yarn

페이스북이 자체 개발한 것으로 npm과 같은 역할을 하는 JavaScript 패키지 매니저

성능(속도)과 보안 이슈를 보완한 JavaScript 패키지 매니저

sudo npm install -g yarn
yarn -v

pad

padStart와 padEnd 함수는 ES8(ES2017)에 새로 추가된 기능

pad는 좌우에 특정한 문자열로 채우는 기능

첫번째 인자인 maxLength를 받아 문자열의 길이가 maxLength보다 작을 경우 나머지를 두번재 인자인 특정한 문자열로 채워주는 기능. 이때, 두번째 인자를 넘겨주지 않으면 빈 공백으로 문자열을 채움

padStart

현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열 반환

채워넣기는 대상 문자열의 시작(좌측)부터 적용

const result = String(Math.floor(Math.random() * 1000000)).padStart(6, '0');

padEnd

현재 문자열에 다른 문자열을 채워, 주어진 길이를 만족하는 새로운 문자열 반환

채워넣기는 대상 문자열의 끝(우측)부터 적용

const result = String(Math.floor(Math.random() * 1000000)).padEnd(6, '0');

퍼사드 패턴(Facade Pattern)

안에 여러 가지 복잡한 로직이 있더라도, 밖에서 보이는 정면에 있는 함수에서는 비교적 간단하게 흐름을 파악할 수 있음

로직을 모두 분리하여 API를 작성

→가독성 문제, 유지보수성 문제 개선

JavaScript 파일 불러오기 - 내보내기

JavaScript 안에서 파일간의 공유를 위해 파일 내의 함수, 데이터 등을 내보주는 export와 내보내진 함수, 데이터를 특정 파일에서 받아올 수 있도록 import 처리를 해줘야 함

예전에 사용하던 commonJS 방식의 require와 다르게 특정 파일이 필요

퍼사드 패턴을 사용하기 위해서는 해당 폴더에서 package.json을 생성해줘야 함

yarn init

외부에서 함수를 내보내고 불러오기 위해 package.json 에 코드 추가

{
	// ...
	"type": "module"
}

export

// phone.js

export function checkValidationPhone(myphone) {
	// ...
}

export function getToken(count) {
	// ...
}

export function sendTokenToSMS(myphone, token) {
	// ...
}

import

import { checkValidationPhone, getToken, sendTokenToSMS } from './phone.js';

Node.js(2)

구조분해할당(Destructuring)

기존에는 함수 내부에서 Object(객체)의 데이터를 가져오기 위해서 객체명.key값을 사용해서 value값을 가져옴

객체의 구조를 분해한 뒤, 필요한 데이터를 할당해주는 개념

기준이 되는 객체에 반드시 해당 이름을 가진 key가 존재해야 함

const myUser = {
    name: '철수',
    age: 13,
    school: '다람쥐초등학교',
    createdAt: '2010-09-07',
};

// 기존 방식
const result = getWelcomeTemplate(myUser);
const name = user.name;
const age = user.age;
const school = user.school;
const.createdAt = user.createdAt;

// 구조분해할당
const { name, age, school, createdAt } = user;

배열도 구조분해할당이 가능

const classmates = ['철수', '영희', '훈이'];

// 기존 방식
const child1 = classmates[0];
const child2 = classmates[1];
const child3 = classmates[2];

// 구조분해할당
const [child1, child2, child3] = classmates;

객체를 구조분해할당하게 될 경우 객체 안의 존재하는 key 값의 이름으로 재할당을 하므로 순서는 상관없이 할당

배열은 구조분해할당 시, 배열의 순서가 매우 중요

Shorthand property names

객체를 정의할 때 동일한 key와 value의 이름을 사용하게 될 경우, value를 생략

const name = '철수';
const age = 13;
const school = '다람쥐초등학교';
const createdAt = '2010-09-07';

// 기존 방식
const myUser = {
    name: name,
    age: age,
    school: school,
    createdAt: createdAt,
};

// shorthand property names
const myUser = {
    name,
    age,
    school,
    createdAt,
};

Date 객체

const date = new Date()     // 자바스크립트 Date객체를 date라는 변수에 할당

date.getFullYear();         // 연도를 반환
date.getMonth();            // 월을 반환. 0(월)부터 시작!
date.getDate();             // 일을 반환
date.getDay();              // 요일을 반환(일요일: 0)
date.getHours();            // 시를 반환
date.getMinutes();          // 분을 반환
date.getSeconds();          // 초를 반환
date.getMilliseconds();     // 밀리초를 반환

HTTP 통신

데이터 저장 방식

문자열과 숫자 등의 데이터는 변수의 메모리에 그 값이 직접 저장

// 문자열
const child = "철수";
const child2 = child;

child2;  // 철수

// 숫자
let money = 1000;
let money2 = money;

money2;  // 1000

money = 500;

money2;  // 1000

배열과 객체는 변수의 메모리에 그 값 자체가 아닌 그 주솟값이 저장 ⇒ 실제 데이터가 저장

원본 객체의 변화가 복사된 객체에 영향을 줌

// 객체
const profile = {
	name: '철수',
	age: 8,
	school: '다람쥐초등학교',
};
const profile2 = profile;  // 주솟값 복사

profile2;  // { name: '철수', age: 8, school: '다람쥐초등학교' };

profile.name = '영희';

profile2;  // { name: '영희', age: 8, school: '다람쥐초등학교' };

// 배열
const arr = [1, 2, 3];
const arr2 = arr;  // 주솟값 복사

arr2.push(4);

arr;  // [1, 2, 3, 4]

얕은 복사(스프레드 연산자)

객체를 그대로 복사하는 것은 가능하나, 만약 그 안에 또 다른 객체나 배열이 존재한다면 그 부분까지는 완전하게 복사하지 못하고 얕은 깊이만을 복사하는 방식

실제 값이 아닌 주솟값을 복사하는 방식

spread 연산자를 통한 복사는 실제 값을 복사하되 그 안의 객체, 배열은 주솟값을 복사

깊은 복사(JSON.parse(JSON.stringify))

객체를 문자열 형태로 변환하고, 다시 그 문자열을 객체로 변환한다면 해당 객체는 문자열에서 탄생한 객체이기 때문에 원본과는 완전히 무관한 객체가 됨

JSON 메서드는 객체 뿐만 아니라 배열의 깊은 복사에도 활용 가능

JSON.stringify()

인자로 들어온 데이터를 문자열로 변환 → 원본 객체와는 전혀 다른 객체 모양을 한 문자열을 돌려받음

const newProfile = {
	name: '철수',
  age: 13,
  school: '다람쥐초등학교',
  hobby: {
		one: '수영',
    two: '프로그래밍',
  }
}

JSON.stringify(newProfile);
// '{"name":"철수","age":13,"school":"다람쥐초등학교","hobby":{"one":"수영","two":"프로그래밍"}}'

JSON.parse()

JSON.stringify() 를 통해 얻어낸 문자열을 객체 형태로 변환

JSON.parse(JSON.stringify(newProfile));
/*
  {
    name: '철수',
    age: 13,
    school: '다람쥐초등학교',
    hobby: {
      one: '수영',
      two: '프로그래밍',
    }
  }
*/

REST 파라미터

구조분해할당을 활용하여 원본 객체를 제어하지 않고 객체에서 특정 키에 해당하는 값을 제외(delete 메서드 사용)

const child = {
  name: '철수',
  age: 8,
  school: '다람쥐초등학교',
  money: 2000,
  hobby: '수영',
};

// 기존 방식
delete child.money;
delete child.hobby;

child
/*
  {
    name: '철수',
    age: 8,
    school: '다람쥐초등학교',
  };
*/

// 구조분해할당
const { money, hobby, ...rest } = child;

money; // 2000
hobby; // "수영"
rest; // { name: '철수', age: 8, school: '다람쥐초등학교' }

…rest의 rest는 변수명이므로 임의 지정이 가능

const { money, hobby, ...a} = child;

money; // 2000
hobby; // "수영"
a; // { name: '철수', age: 8, school: '다람쥐초등학교' }

Rest parameter를 통해서 생성되는 객체는 스프레드 연산자를 사용했을 대와 같이 얕은 복사로 생성되는 객체