📝 오늘 한 것

1. HTTP / AJAX / XML / JSON / 직렬화 & 역직렬화 / 비동기 콜백 함수 / 콜백 지옥

2. sort() / splice() / slice() / split() / join() / find() / filter() / map() / reduce()

📖 학습 자료

1. 드림코딩 유튜브 '자바스크립트 기초 강의' 9편 복습 / 10 ~ 11편 수강

📚 배운 것

1. 배열 APIs

[TIL] 210906 참고

(1) sort()

const array = [2, 4, 1, 5, 3];

/* 오름차순 정렬 */
const ascending = array.sort((a, b) => a - b);
console.log(ascending); // [1, 2, 3, 4, 5]

/* 내림차순 정렬 */
const descending = array.sort((a, b) => b - a);
console.log(descending); // [5, 4, 3, 2, 1]

(2) splice() / slice() / split() / join()

💡 splice()

자르고 (추가하기) / 자른 배열 리턴 / 원본 배열 바뀜

const array = [1, 2, 3, 4 ,5];

const array2 = array.splice(2, 2, '🙃', '😭');
console.log(array2); // [3, 4]
console.log(array); // [1, 2, '🙃', '😭', 5]

💡 slice()

복사 / 복사한 배열 리턴 / 원본 배열 안 바뀜

const array = [1, 2, 3, 4, 5];

const array2 = array.slice(1, 3);
console.log(array2); // [2, 3]
console.log(array); // [1, 2, 3, 4, 5]

💡 string.split()

※ 배열 API 아님

문자열을 separator(구분자)를 기준으로 끊어 배열로 만듦
limit(끊을 문자열의 최대 개수)를 지정해줄 수 있음

// separator만 지정한 경우
const string2 = 'What are you doing now?';
const array2 = string2.split(' ');
console.log(array2); // ['What'. 'are', 'you', 'doing', 'now?']

// limit를 2로 지정한 경우
const string = '1, 2, 3, 4, 5';
const array = string.split(', ', 2);
console.log(array); // ['1', '2']

💡 array.join()

배열의 모든 요소를 연결해 '하나의' 문자열로 만듦
배열의 각 요소를 구분할 문자열(separator)을 지정해줄 수 있음

const array = ['radish', 'green orion', 'potato'];

const string = array.join();
console.log(string); // radish,green orion,potato

const string2 = array.join(' - ');
console.log(string2); // radish - green orion - potato

※ 아래 (3) ~ (5) 공통 예제

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}

const students = [  
  new Student('A', 29, true, 45),
  new Student('B', 28, false, 80),
  new Student('C', 30, true, 90),
  new Student('D', 40, false, 66),
  new Student('E', 18, true, 88),
];

(3) find()

배열의 요소들 중 콜백 함수 return 값이 true가 되는 첫 번째 요소의 값 반환

// 점수가 90점인 학생 찾기
const studentWith90 = students.find((student) => student.score === 90);
console.log(studentWith90); // Student {name: 'C', age: 30, enrolled: true, score: 90}

(4) filter() / map()

💡 filter()

배열의 요소들 중 콜백 함수 return 값이 true가 되는 요소들만을 모아 새로운 배열을 반환

// enrolled students 배열 만들기
const enrolledStudents = students.filter((student) => student.enrolled);
console.log(enrolledStudents); // [Student, Student, Student]

💡 map()

배열 내의 모든 요소 각각에 대하여 주어진 콜백 함수를 호출한 결과를 모아(바뀐 요소들을 모아) 새로운 배열을 반환

// 학생들의 점수만을 포함하는 배열 만들기
const scores = students.map((student) => students.score);
console.log(scores); // [45, 66, 80, 88, 90]

(5) reduce()

• 빈 요소를 제외하고, 배열 내에 존재하는 각 요소에 대해 리듀서 함수(콜백 함수)를 한 번씩 실행함

• 그러나, 콜백 함수의 return 값은 누산기(prev)에 할당되고, 누산기는 순회 중 유지되므로 결국 리듀서 함수는 하나의 값을 return한다.

// 학생들 점수의 평균값 구하기
const scoreArray = students.map((student) => student.score);
const tatalScore = scoreArray.reduce((prev, curr) => prev + curr, 0);
const averageScore = totalScore / students.length;
cosole.log(averageScore); // 73.8

• 위에서 reduce() 메서드 안에 화살표 함수로 표현되어 있는 콜백 함수를, 익명 함수로 다시 써보면 아래와 같다.

students.reduce(function (prev, curr) {
  return prev + curr;
}, 0);

students.reduce(function (누적된 콜백 함수 반환값, 처리할 현재 요소) {
  return 누적된 콜백 함수 반환값 + 처리할 현재 요소;
}, 초깃값);

💡 prev

• 누적된 콜백 함수 반환값 (누산기 accumulator)
• 다만, 누적된 값이 아직 없는 콜백 함수 최초 호출 시

초깃값 지정 O → prev = 초깃값 (curr = 배열의 첫 번째 요소)
초깃값 지정 X → prev = 배열의 첫 번째 요소 (curr = 배열의 두 번째 요소)

2. JSON

1) HTTP(Hypertext Transfer Protocol)

• 클라이언트가 서버와 데이터(hypertext)를 주고받을 때 사용되는 프로토콜(통신 규약)

• 하이퍼텍스트(hypertext)는 하이퍼링크 + 문서 + 이미지 파일 등 전반적으로 사용되는 리소스들을 포함한다.

• 클라이언트가 데이터를 request 하면, 서버가 response 한다.

2) AJAX(Asyncronous JavaScript And XML)

• 웹 브라우저가 자바스크립트를 이용하여 웹 서버와 비동기적으로 데이터를 주고받고, DOM을 이용해 웹 페이지를 동적으로 갱신하는 프로그래밍 기법

• 대표적으로 XHR(XMLHttpRequest)이 있다. 최근에는 fetch() API를 사용한다.

💡 XML이란?

Tag를 이용해 데이터를 나타내는 마크업 언어 중 하나
불필요한 태그들이 많이 들어가 파일 사이즈가 커지며, 가독성도 좋지 않다

💡 AJAX와 XHR에 모두 XML이 들어간다. 그렇다면 서버와 데이터를 주고받을 때는 XML만 가능한 것인가?

아니오. 다양한 파일 포맷을 주고받을 수 있다.
그 중 하나가 JSON이다.

다만, AJAX과 XHR에 모두 XML이 들어가는 것은 이들이 개발되던 당시 개발팀이 XML을 사용하고 있었기 때문이다.

3) JSON(JavaScript Object Notation)

• 키-값 쌍으로 이루어진, 경량의 데이터 교환 규칙(데이터 포맷)

• '브라우저나 모바일에서 서버와 데이터를 주고받을 때' 혹은 서버와 통신하지 않아도 '오브젝트를 파일 시스템에 저장할 때' 사용할 수 있다

• 사람 눈으로 읽기 편하며, 텍스트(string)를 기반으로 해 가볍다

• 서버와 데이터를 주고받을 때 데이터를 직렬화하고 전송하는 데 사용된다

• 프로그래밍 언어나 플랫폼에 상관없이 사용할 수 있다.

💡 브라우저와 서버가 JSON을 이용해 통신하는 과정

오브젝트를 서버에 전송하기 위해서는 직렬화(serialize)를 해야 한다. 직렬화란 오브젝트를, { key: value } 형태의 텍스트 즉 JSON으로 변환하는 것을 말한다.

JSON으로 직렬화된 오브젝트를 브라우저에 표기하기 위해서는 역직렬화(deserialize)를 해야 한다. 역직렬화란 { key: value } 형태의 텍스트 즉 JSON을, 오브젝트로 다시 변환하는 것을 말한다.

4) 직렬화(serialization)

JSON.stringify()를 사용하여 자바스크립트 값이나 오브젝트를 JSON 문자열로 변환할 수 있다.

🔎 boolean → json

let json = JSON.stringify(true);
console.log(json); // true
console.log(typeof json); // string

🔎 배열 → json

• JSON에서는 ''가 아니라 ""를 사용한다.

json = JSON.stringify(['apple', 'banana']);
console.log(json);
// ["apple", "banana"] → 배열처럼 보이지만, 문자열이다. 
console.log(typeof json); // string

🔎 오브젝트 → json

• 함수(오브젝트에 있는 데이터 x)와 Symbol(자바스크립트에만 있는 특별한 데이터)이 json으로 변환될 때는, 객체 안에 있을 경우 생략되고, 배열 안에 있을 경우 null로 변환된다.

const rabbit = {
  name: 'happy',
  color: 'white',
  size: null,
  birthDate: new Date(),
  symbol: Symbol("id"), // json 변환 시 생략
  jump : () => { // json 변환 시 생략
    console.log('you can jump!');
  },
};

json = JSON.stringify(rabbit);
console.log(json);
// {"name":"happy","color":"white","size":null,"birthDate":"2021-10-11T06:28:27.059Z"}
console.log(typeof json); // string

💡 replacer

MDN 사이트 참고

• JSON.stringify()의 매개변수로 replacer를 추가함으로써 JSON 문자열을 좀 더 세밀하게 통제할 수도 있다.

• replacer는 함수 또는 배열이 될 수 있다.

• replacer는, JSON 문자열에 추가되어야 하는 값을, 반환해야 한다. return value;

• replacer가 undefined를 반환하면, 그 속성은 JSON 문자열 결과에 포함되지 않는다.

• replacer 값이 null 이거나 제공되지 않으면, 객체의 모든 속성들이 JSON 문자열 결과에 포함된다. (Symbol, 함수 등 제외)

🔎 replacer가 배열인 경우

• 배열의 요소는 '속성'이어야 한다.
• 해당 속성과 그 값만이 JSON에 포함된다.

json = JSON.stringify(rabbit, ['name', 'size', 'color']);
console.log(json); // {"name":"tori","size":null,"color":"white"}

🔎 replacer가 콜백 함수인 경우

• 매개변수로는 '문자열화 될 key와 value'를 받는다.
• 맨 처음에는 문자열화 될 객체 자체가, 이를 나타내는 비어 있는 그 key와 함께 호출된다. 📌
  그 다음에는 문자열화 될 그 객체의 각 속성에 대하여 호출된다.

// replacer의 매개변수(key, value)가 무엇을 의미하는지 알아보자

json = JSON.stringify(rabbit, (key, value) => {
  console.log(`${key}, ${value}`);
  return value;
});

// console 창 결과

/*
, [object Object] 📌 문자열화 될 객체 자체가, 비어 있는 그 key와 함께 호출됨
name, happy
color, white
size, null
birthDate, 2021-10-11T07:42:51.692Z
jump, () => {
    console.log(`${name} can jump!`);
  }
*/

• key와 value가 replacer(콜백 함수)를 한 번씩 거쳤다가 JSON으로 바뀐다

/* 예시 1 */
json = JSON.stringify(rabbit, (key, value) => {
  return key === 'name' ? 'syong' : value; 
});

console.log(json);
// {name: 'syong', color: 'white', size: null, birthDate: Mon Oct 11 2021 16:32:18 GMT+0900 (한국 표준시), jump: ƒ}

/* 예시 2 */
json = JSON.stringify(rabbit, (key, value) => {
  if (typeof value === 'string') {
    return undefined;
  }
  return value;
});

console.log(json); // {"size":null}

5) 역직렬화(deserialization)

JSON.parse()를 사용하여 JSON 문자열의 구문을 분석하고, 자바스크립트 값이나 오브젝트를 생성할 수 있다.

json = JSON.stringify(rabbit);
const obj = JSON.parse(json);
console.log(obj);
// {name: 'happy', color: 'white', size: null, birthDate: '2021-10-11T11:31:25.142Z'}

💡 주의!

직렬화를 통해 만들어진 JSON 문자열에는 jump 함수가 포함되지 않았으므로 역직렬화를 통해 만들어진 오브젝트에도 jump 함수는 포함되어 있지 않다. 따라서, jump() 메서드를 실행하면 오류가 뜬다.

마찬가지로, 직렬화를 통해 만들어진 JSON 문자열에서 birthDate 속성의 값이 Date 객체가 아니라 문자열이었으므로 역직렬화를 통해 만들어진 오브젝트에서도 birthDate 속성의 값은 문자열이다. 따라서, getDate() 메서드를 실행하면 오류가 뜬다.

console.log(rabbit.jump()); // you can jump!
console.log(obj.jump()); // not a function 오류

console.log(rabbit.birthDate.getDate()); // 11
console.log(obj.birthDate.getDate()); // not a function 오류

💡 reviver

• JSON.parse()의 매개변수로 reviver 함수를 추가함으로써 오브젝트를 좀 더 세밀하게 통제할 수도 있다.

const obj = JSON.parse(json, (key, value) => {
  return key === 'birhDate' ? new Date(value) : value;
});

console.log(obj.birthDate.getDate); // 11

cf. 알아두면 유용한 사이트

① JSON Diff : 서버에 요청해서 받아온 2개의 데이터가 다른 곳이 어딘지를 알려줌

② JSON Beautifier : 서버에서 받아온 JSON을 복붙할 때 포맷이 망가진 경우 원상복귀시켜줌

③ JSON Parser : JSON을 오브젝트 형태로 바꿔줌

④ JSON Validator : JSON에서 오류가 발생한 곳을 알려줌

3. 콜백 함수

1) 동기적 vs 비동기적

자바스크립트는 동기적이다.
동기적(synchronous) : 요청과 결과가 동시에 일어남
즉, 자바스크립트 코드는, 호이스팅이 된 후에는, 작성된 순서에 따라 동기적으로 실행된다.

cf. 호이스팅(hoisting)
변수 var와 함수 선언식이 자동으로 제일 위로 올라가는 것

console.log(1);
console.log(2);
console.log(3);

// 1
// 2
// 3

한편,
비동기적(asynchronous) : 요청과 결과가 동시에 일어나지 않음
즉, 코드가 언제 실행될지 예측할 수 없음을 의미한다.

console.log(1);
setTimeout(() => console.log(2), 1000);
console.log(3);

// 1
// 3
// 2

2) 동기적 콜백 함수 vs 비동기 콜백 함수

💡 synchronous callback

function printImmediately (print) {
  print();
}

printImmediately(() => console.log('sync callback'));

💡 asynchronous callback

비동기 콜백 함수를 포함해, 위의 예시들을 전부 합쳐서 아래와 같이 작성되어 있다고 하자.

'use strict';

console.log(1);
setTimeout(() => console.log(2), 1000);
console.log(3);

function printImmediately (print) {
  print();
}

printImmediately(() => console.log('sync callback'));

function printWithDelay (print, timeout) { // setTimeout을 wrapping하고 있는 함수
  setTimeout(print, timeout);
}

printWithDelay(() => console.log('async callback'), 2000);

이 코드를 자바스크립트 엔진은 아래와 같이 이해한다.

'use strict';

// 함수 선언식 호이스팅(hoisting)
function printImmediately (print) {
  print();
}

function printWithDelay (print, timeout) {
  setTimeout(print, timeout);
}

console.log(1); // 동기적 실행
setTimeout(() => console.log(2), 1000); // 비동기적 실행
console.log(3); // 동기적 실행

printImmediately(() => console.log('sync callback')); // 동기적 실행

printWithDelay(() => console.log('async callback'), 2000); // 비동기적 실행

// 1
// 3
// sync callback
// 2
// async callback

3) 콜백 지옥

콜백 함수 중첩 사용을 의미한다

예제

• 사용자에게 id와 password 입력 값을 받아와라

• id와 password를 이용해 서버에 로그인 되도록 요청해라
  (서버와의 통신은 setTimeout 함수로 대체해라)

• 로그인을 성공적으로 했다면
  로그인한 사용자의 id를 이용해 사용자의 roles를 요청해 받아와라

• roles가 성공적으로 받아졌다면
  클라이언트는 사용자의 이름과 역할이 들어 있는 오브젝트를 가지고 있을 것, 이를 출력해라

class UserStorage {
  loginUser (id, password, onSuccess, onError) {
	setTimeout(() => {
      if (id === 'syong' && password === 'happy' ||
          id === 'corder' && password === 'nice') {
        onSuccess(id);
      } else {
        onError(new Error('not found'));
      }
    }, 2000);
  }
  
  getRoles (user, onSuccess, onError) {
	setTimeout(() => {
      if (user === 'syong') {
        onSuccess({ name: 'syong', role: 'admin' });
      } else {
        onError(new Error('no access'));
      }
    }, 1000);
  }
}

const userStorage = new UserStorage();

const id = prompt('id를 입력해주세요');
const password = prompt('password를 입력해주세요');

userStorage.loginUser(id, password, user => {
  userStorage.getRoles(user, userWithRoles => {
    alert(`${userWithRoles.role} ${userWithRoles.name}님, 환영합니다!`);
  }, error => {
    throw error;
  });
}, error => {
  throw error;
});

이렇게 작성하면 가독성이 매우 좋지 않아 디버깅과 유지·보수를 하기가 매우 어렵다.

✨ 내일 할 것

1. 강의 계속 듣기 (promise, async, await)