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 기본규칙
재귀 호출을 이용해 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 구현하기
TreeUI 구현을 만들면서, DOM 이 기억이 안나서.. 손을 댈 수가 없었다...(다시 공부 해야지 뭐..)
레퍼런스의 내용을 참고해서 내 식으로 코드를 해석한 것을 주석으로 달아보았다.
이번 과제를 통해 실제 코드에서 재귀함수를 어떻게 사용할 수 있는지 알 수 있었다.
(다만... 문제는 이해된 부분을 코드로 어떻게 작성해야 되는지.. 모르겠다는게 문제...)
정리 및 회고
이번에 재귀를 공부하면서 Section2 내용의 복습의 필요성을 뼈저리게 느꼈다..
일단, 많이 쳐보고 손을 더럽혀야 한다는데... 진짜 별것 아니더라도, 일단 손에 익을 수 있도록
많이많이 코드를 쳐보는 연습을 해야 하겠다....
프로젝트 할 때 팀원들에게 폐를 끼치지 않기 위해 더 열심히 노력하자!
'SEB_FE_45(코드스테이츠) > section 3.' 카테고리의 다른 글
Unit 2] [사용자 친화 웹] UI/UX part.3 - Figma 클론 과제 (0) | 2023.06.15 |
---|---|
Unit 2] [사용자 친화 웹] UI/UX part.3 - Figma (0) | 2023.06.14 |
Unit 2] [사용자 친화 웹] UI/UX part.2 (1) | 2023.06.13 |
Unit 2] [사용자 친화 웹] UI/UX part.1 (0) | 2023.06.13 |
Unit 1] [자료구조/알고리즘] 재귀 part.1 (0) | 2023.06.10 |