Unit 1] [자료구조/알고리즘] 재귀 part.2

SEB _ FE _ 45

Section 3. Unit 1. [자료구조/알고리즘] 재귀

과제1. stringify - json

과제2. Tree UI

 

흠.. 과제를 스스로 풀기가 너무 어렵다.. 결국 레퍼런스에 도움을..ㅜㅜ

Section 2 에서 배운 내용인 DOM 까지 숙지를 하고 있어야 해서 정신이 없는 과제였다...

---

과제에 대한 리뷰 이전에 JSON에 대해서 정리해본다.

JSON ( JavaScript Object Notation ) 은 데이터 교환을 위해 만들어진 객체 형태의 포맷이다.

데이터 교환을 위해서는 발신자와 수신자가 모두 읽을 수 있는 범용 형태(ex. 문자열)여야 한다.

JavaScript에서 객체를 문자열로 변환하기 위해 메서드(Object.toString())나 형변환(String(Object))을 시도하면,

[object Object] 라는 결과를 리턴한다.

이 문제 해결을 위해 JSON을 사용할 수 있다.

• JSON.stringify : 객체를 JSON으로 변환한다. -> 데이터 직렬화(serialize)
• JSON.parse : JSON을 객체로 변환한다. -> 데이터 역직렬화(deserialize)

JSON으로 변환된 데이터 타입은 '문자열'이다.

JSON은 포맷은 JavaScript를 포함한 많은 언어에서 사용된다.

---

JSON 기본규칙

출처 : 코드스테이츠 URCALSS

---

재귀 호출을 이용해 JSON.stringify를 함수 형태로 구현하기!

stringifyJSON은 아래와 같이 작동합니다.
 * - Boolean이 input으로 주어졌을 경우
 * stringifyJSON(true);                // 'true'
 * - String이 input으로 주어졌을 경우
 * stringifyJSON('foo');               // '"foo"'
 * - Array가 input으로 주어졌을 경우
 * stringifyJSON([1, 'false', false]); // '[1,"false",false]'
 * - Object가 input으로 주어졌을 경우
 * stringifyJSON({ x: 5 });            // '{"x":5}'
 * - undefined, function이 주어졌을 경우
 * stringifyJSON(undefined)            // undefined
 * stringifyJSON(function(){})         // undefined
 * stringifyJSON({ x: undefined, y: function(){} })   // '{}'
 * undefined와 function은 JSON으로 생략되거나 null로 변환됩니다.

---

✓ 객체는 문자열 "9"로 변환되어야 합니다.
✓ 객체는 문자열 "null"로 변환되어야 합니다.
✓ 객체는 문자열 "true"로 변환되어야 합니다.
✓ 객체는 문자열 "false"로 변환되어야 합니다.

if(typeof obj === "number" ||	// 입력받은 객체가 숫자타입이거나
  typeof obj === "boolean" ||	// 불린타입이거나
  obj === null){		// obj가 null 이면,
  return String(obj);		// 문자열로 형 변환한 객체를 반환해라
}

입력받은 객체가 null인 경우, typeof null === 'object'가 반환된다.

이에, typeof 메서드를 이용하지 않고, obj 변수의 값이 null인지를 확인하는 것이다.

 

✓ 객체는 문자열 ""Hello world""로 변환되어야 합니다.

if(typeof obj === 'string'){
  return `"${obj}"`;
}

" " 에 감싸져서 반환되는 경우는 `"${obj}"` 밖에 없었다.

 

✓ 객체는 문자열 "[]"로 변환되어야 합니다.
✓ 객체는 문자열 "[8]"로 변환되어야 합니다.
✓ 객체는 문자열 "["hi"]"로 변환되어야 합니다.
✓ 객체는 문자열 "[8,"hi"]"로 변환되어야 합니다.
✓ 객체는 문자열 "[1,0,-1,-0.3,0.3,1343.32,3345,0.00011999]"로 변환되어야 합니다.
✓ 객체는 문자열 "[8,[[],3,4]]"로 변환되어야 합니다.
✓ 객체는 문자열 "[[[["foo"]]]]"로 변환되어야 합니다.

if(Array.isArray(obj)){			// 입력받은 객체가 배열이면,
  const newArr = obj.map((el) =>	// obj요소를 순회하면서
  stringifyJSON(el)); 			// 재귀함수 호출하여 obj 요소를 매핑한다.
  return "[" + newArr + "]"		// 그리고 newArr을 반환한다.
}

 

✓ 객체는 문자열 "{}"로 변환되어야 합니다.
✓ 객체는 문자열 "{"a":"apple"}"로 변환되어야 합니다.
✓ 객체는 문자열 "{"foo":true,"bar":false,"baz":null}"로 변환되어야 합니다.
✓ 객체는 문자열 "{"boolean, true":true,"boolean, false":false,"null":null}"로 변환되어야 합니다.
✓ 객체는 문자열 "{"a":{"b":"c"}}"로 변환되어야 합니다.
✓ 객체는 문자열 "{"a":["b","c"]}"로 변환되어야 합니다.
✓ 객체는 문자열 "[{"a":"b"},{"c":"d"}]"로 변환되어야 합니다.
✓ 객체는 문자열 "{"a":[],"c":{},"b":true}"로 변환되어야 합니다.
✓ 함수와 undefined는 stringify되지 않습니다.

---

과제 2 Tree UI 구현하기

index.html에 있는 root 아이디를 가진 요소를 찾아낸다.

---

---

위 함수 호출하여 index.html에 함수 내용이 적용될 수 있게 한다.

 

TreeUI 구현을 만들면서, DOM 이 기억이 안나서.. 손을 댈 수가 없었다...(다시 공부 해야지 뭐..)

레퍼런스의 내용을 참고해서 내 식으로 코드를 해석한 것을 주석으로 달아보았다.

이번 과제를 통해 실제 코드에서 재귀함수를 어떻게 사용할 수 있는지 알 수 있었다.

(다만... 문제는 이해된 부분을 코드로 어떻게 작성해야 되는지.. 모르겠다는게 문제...)

---

정리 및 회고

이번에 재귀를 공부하면서 Section2 내용의 복습의 필요성을 뼈저리게 느꼈다..

일단, 많이 쳐보고 손을 더럽혀야 한다는데... 진짜 별것 아니더라도, 일단 손에 익을 수 있도록 

많이많이 코드를 쳐보는 연습을 해야 하겠다....

프로젝트 할 때 팀원들에게 폐를 끼치지 않기 위해 더 열심히 노력하자!