2020년 8월 21일 TIL

JSON.stringify()

개요

JSON과 관련해서 쓰이는 유용한 JavaScript method로, JavaScript 객체나 값을 JSON 에서 해석 가능 하도록 변환해 주는 유용한 툴이다. 이번 과제에서는 JSON 의 구조를 이해하고 이와 같은 method 를 나만의 코드로 구현해 보는 시간을 갖았다.

What I learned

• JSON은 가벼운 데이터 교환 포멧으로 인간이 쉽게 쓰거나 읽을 수 있도록 만들어졌다. 기계가 이것을 parse 하거나 만들어내기도 쉽다.
• JSON 자료 형식은 독자적인 언어이나, C, C++, C#, Java, JavaScript 등 언어에서 주로 쓰이는 요소들을 가져다 쓴다.
• JSON은 다음과 같은 두 가지 구조로 이루어져있다.
  • 이름/값 짝
  • 값의 정리된 리스트
• JSON 에 대한 해석의 분기는 크게 object / array 로 나뉘어져 있으며, string, number, whitespace 등의 개념이 있다.
• 객체나 배열은 일반적인 1차원 depth 에 대한 iteration 으로 알 수 없기에 (nested Array 등의 존재 유무), 어제의 getElementsByClassName 과 같이 recursion 을 통해 접근하여 각각의 요소들을 검사해야 했다.
• function 은 빈 객체 처리를 한다.
• 만약 depth 를 계속 iterate 하다가 더 이상 파고들 depth 가 없다면 undefined 가 나오기 때문에 이 것이 바로 기본적인 recursion 의 base case가 된다.
• object 의 key 와 value 를 String() method 등을 써서 stringify 시키려고 하면 {object Object} 라는 결과값이 나온다. console.log 를 이용해 테스트 할 수 있다. 따라서 iterate 되는 각 객체를 배열에 보관하고 이를 :, {}, 등을 join(, ) method 를 통해 연결하여 객체의 모습처럼 구현시키는 것이 필요했다.
• Refactor: Object.key(parameter obj).forEach 를 통해 for ... in 과 마찬가지로 객체를 iterate 할 수 있다.
• 만약 배열을 이용하지 않고 다른 방식으로 해당 method 를 구현할 수 있을까? 생각하게 되었는데, 기존의 객체를 iterate 하여 각각의 내용을 마치 reduce 를 통해 객체를 그룹화 할 때 처럼 넣어 버리면 위에서 언급한 object object 가 나와 버리게 된다.
• object method 를 보던 중 spread 를 통해 구현을 시킬지 실험하는 것이 다음의 학습 목표다

느낀 점

• 객체를 활용하는 법과 이해에 대한 저변을 높여야겠다는 생각이 들었다.
• Object.entries() 를 통한 다른 iteration 방법.
• 다음 학습 목표: console 을 통해 객체에 대해 탐구 해보기.
• 참고 할 웹사이트: https://codeburst.io/useful-javascript-array-and-object-methods-6c7971d93230

Breadth-First Search (너비 우선 탐색)

Graph

• 그래프란 연결의 집합을 모형화 한 것 이다.
• 그래프는 정점(node)와 간선(edge)로 이루어진다. 정점이 목적지다.

Breadth-First Search

• X로 가는 최단 경로는 무엇 일까 등의 문제에 답할 수 있는 알고리즘이다.

• 두 항목 간의 최단 경로를 찾을 수 있다.

  • 체커 게임에서 가장 적은 수로 승리할 수 있는 방법을 계산하는 알고리즘
  • 맞춤법 검사기 (실제 단어에서 가장 적은 개수의 글자를 고쳐서 올바른 단어를 찾기)
  • 가장 가까운 'x' 지점 찾기 등 (Google Map Destination?)

• 가장 적은 정류장을 거쳐 목적지에 도달하는 것을 Shortest-path Problem 이라 한다.

• x 위치에서 y 위치로 가는 방법을 찾으려면 다음과 같은 절차가 필요하다.

  • 문제를 그래프로 모형화 한다.
  • 너비 우선 탐색으로 문제를 푼다.

• 너비 우선 탐색은 두 가지 종류에 대한 질문을 대답하는데 도움이 된다

  • Node A 에서 Node B로 가는 경로가 존재하는가?
  • Node A 에서 Node B로 가는 최단 경로는 무엇인가?

• 가장 가까운 Node 를 우선으로 쓰여진 목록에, 더해진 순서대로 탐색해야 함. 이 경우 대기열(queue) 라는 자료 구조를 씀

• Queue 에는 삽입(enqueue) 과 제거 (dequeue) 라는 두 가지 연산이 있다.

• 먼저 삽입 된 항목이 이후에 삽입 된 항목보다 먼저 제거가 됨.

• 따라서 First in First Out 자료 구조라고도 불림.

• Stack 은 반대로 Last In First Out

• 코드로 그래프를 구현해야 한다. 이때 각 node 간의 관계는 Hash Table 로 표시할 수 있다.

let graph = {}; // maybe use a constructor? 
{} new You = ('alice', 'bob', 'claire')  

Directed Graph / Undirected Graph

• 최종 목적지를 향한 화살표는 있어도 이들로부터 누군가를 향한 화살표는 없다면 directed graph
• Undirected Graph 는 화살표를 가지지 않기 때문에 두 정점은 서로 이어져 있다.

Nodes dependency & Topological Sort

• 알고리즘이 구현되는 방식: 확인할 노드 명단을 넣을 큐를 준비
• 큐에서 한사람을 켬
• 큐에서 목적지로 도달하는 경우가 있을지 확인한다.
• 만약 목적지로 가는 중간 노드라면 작업완료
• 아니면 그 노드와 이어진 다른 노드들을 알아본다.
• 반복문
• 만약 큐가 비어있으면 네트워크에는 망고 판매상이 없다.
• 위성 정렬:

Summary

• 너비 우선 탐색은 a → b 경로를 알려줌.
• 만약 경로가 존재한다면 최단 경로도 찾아줌
• 만약 x 까지 최단 경로를 찾는 문제가 있다면 그 문제를 그래프로 모형화 해야한다.
• 방향 그래프는 화살표를 가지며 화살표 방향으로 관계를 가짐.
• 무방향 그래프는 화살표가 없고 둘 간의 상호 관계를 나타냄.
• 큐는 선입선출
• 스택은 후입선출
• 탐색 목록에 추가된 순서대로 사람을 확인해야함. 따라서 탐색목록은 큐가 되어야 한다. 그렇지 않으면 최단 경로를 구할 수 없다.
• 누군가를 확인한 다음 두번 다시 확인하지 않도록 해야한다. (directed graph). 안그러면 무한 반복에 빠짐

Clone Coding: Form Validator

• 아래의 Form 을 vanilla css / javascript 로만 구현해보는 미니 프로젝트

  

  • 아직 강의로 클론 코딩만 해 본 상태이고, 내일 코드를 초기화한 후 스스로 작성해 보아야겠지만,
  • 비로서 배우고자 했던 regular expression 의 실사용 예를 볼 수 있었으며,
  • function 을 pass in 하고 각 function 들이 맞물려 어떻게 기능을 구현하는 지 지난 twittler 프로젝트에 이어 조금 더 잘 이해하게 되었다.
  • 또한 relative position 등이 왜 쓰이는 지에 대해 이해했다.
  • visibility toggler 이용하기.
  • DOM 를 조금 더 자율적으로 쓰는 방법,
  • if 문으로 하드코딩 하는 것이 아닌 각각의 verifier 를 여러개의 작은 기능을 갖춘 함수로 만들어 능동적으로 기능하게 만드는 것.