WIL 10주차

🗓️ 배운 내용

• 재귀의 이해, 활용,
• JSON.stringify
• Tree UI
• UX/UI
• Figma 컴포넌트 구현
• Figma 클론

🌈회고

섹션2 대윤님께서 말씀하셨다. 섹션3은 죽을것이라고...정말 하차할뻔... 피그마 때문이라고..
페어분도 피그마에 대해서 잘 모르신다는 말씀에 후다닥 피그마 결제완료!!! 사실상 피그마에 대해서 많은 정보가 없다보니 유료 찬스를 쓸 수 밖에 없었다. 하루 온종일 피그마 강의를 돌리고 돌려서 꾸역꾸역 과제를 마치다보니 맨땅에 헤딩 제대로 했다는 생각이 든다. 물론 나의 페어분이 컴공과라 조금만 알려줘도 바로 습득하는 능력에 놀라움을 연속이였다. 그리고 재귀함수 부터 시작해서 JSON.stringify까지 배운 지식을 공유하고 이보다 더 좋은 자료구조 및 알고리즘 정보도 공유하면서 정말 재미있게 한주를 보낸것같다. 대충 자바스크립트 공부해서 알고리즘 풀면되지 라고 생각 달리 자료구조에 대해서 좀더 세밀하게 공부할 수 있었던 계기였고 페어분 덕분에 정렬구조 중 sort() 에도 다양한 특징과 종류가 있다는 것을 알게 되었을 때 감히 놀라울 수밖에...유레카~라고 외칠뻔했다. 이로써 나의 공부할 양은 점점 늘어나는 구나!!! 또한 sad소식!! 추가!!!속보!!!! 2주뒤 다시 피그마로 나만의 애플리케이션 만들기 보고!!OMG !!! 솔로 프로젝트라 희망의 끈을 놓는 건가...싶다..하...이번 주말도 쉬기는 틀렸구나..헤롱헤롱...🤮

🌳JSON.stringify()

: JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다. 선택적으로, replacer를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함합니다.

JSON.stringify(value[, replacer[, space]])

정리하자면,

• JSON.stringify : 객체를 JSON 으로 바꾼다.
• JSON.parse : JSON을 객체로 바꾼다.

let bts = {
  name: '태태',
  age: 29,
  isSinger: true,
  group: ['dance', 'vocal', 'actor'],
}

let json = JSON.stringify(bts);

console.log(typeof json); //string
console.log(json);

JSON.stringify(bts)를 호출하자 bts가 문자열로 바뀐다.
JSON 으로 인코딩된 객체는 일반 객체와 다른 특징을 보인다.

• 문자열은 큰따옴표로 감싸야 한다. JSON 에선 작은 따옴표나 벡틱을 사용할 수 없다. ('태태' >> "태태" 으로 변경된 것을 통해 이를 확인 할 수 있다. )
• 객체 프로퍼티 이름은 큰따옴표로 감싸야한다. (age:29 >. "age": 29 으로 변경된것을 통해 이를 확인 할 수 있다.)

JSON.stringify 는 겍체 뿐만 아니라 원시값에도 적용할 수 있다.

• 객체 {}
• 배열 []
• 원시형 : 문자형, 숫자형, 불리형(true/false), null

JSON은 데이터 교환을 목적으로 만들어진 언어에 종속되지 않는 포맷이다. 따라서 자바스크립트 특유의 객체 프로퍼티는 JSON.stringify가 처리할 수없다.
JSON.stringify 호출 시 무시되는 프로퍼티는 다음과 같다.

• 함수 프로퍼티 (메서드)
• symbol형 프로퍼티 (키가 symbol인 프로퍼티)
• 값이 undefined인 프로퍼ㅣ

JSON.stringify의 장점 중 하나는 중첩 객체도 알아서 문자열로 바꿔 준다는 점.
이때, 주의해야 하는 사항은 순환 참조가 있으면 원하는 대로 객체를 문자열로 바꾸는 게 불가능하다.

###▶️ Replacer로 원하는 프로퍼티만 직렬하기

let json = JSON.stringify(value[, replacer, space])

• value = 인코딩 하려는 값
• replacer = JSON 으로 인코딩 하길 원하는 프로퍼티가 담긴 배열, 또는 매핑 함수 function(key, value)
• space : 서식 변경 목적으로 사용할 때 공백 문자 수
  : 대다수의 경우, JSON.stringify 엔 인수를 하나만 넘겨서 사용
  : 순환 참조를 다룰 경우 전환 프로세스르 정교하게 조정후 두번 째 인수를 사용
  : JSON 으로 변환하길 원하는 프로퍼티가 담긴 배열을 두번째 인수로 넘겨주면 이프로퍼티 들만 인코딩 할 수 있다.
  

**Space 로 가독성 높이기
JSON.stringfy(value, replacer, space)의 세번째 인수 space는 가독성을 높이기 우해 중간에 산입해 줄 공백 문자 수를 나타낸다.
space 없이 메서드를 호출했기 때문에 인코딩이 JSON에 들여쓰거나 여분의 공백 문자가 하나도 없다. space는 가독성을 높이기 위한 용도로 만들어졌기 때문에 단순 전달 목적이라면 space 없이 직렬화 하는 편이다.

🌞JSON.parse

JSON.parse를 사용하면 JSON을 인코딩 객체를 다시 객체로 디코딩 할 수 있다.

let value = JSON.parse(str, [reviver]);

• str: JSON형태의 문자열
• reviver : 모든(key, value) 쌍을 대상으로 호출되는 function(key, value) 형태의 함수로 값을 변경시킬 수 있다.

⭐️ 정리하기

• JSON은 독자적인 표준을 가진 데이터 형식으로, 대부분의 언어엔 JSON을 쉽게 다룰 수 있게 해주는 라이브러리가 있다.
• JSON은 일반 객체, 배열, 문자열, 숫자, 불린값, Null을 지원한다.
• JSON.stringify을 사용하면 원하는 값을 JSOM 으로 직렬화 할 수 있고, JSON.parse를 사용하면 JSON을 본래 값으로 역 직렬화 할 수 있다.
• 위 두 메서드에 함수를 인수로 넘겨주면 원하는 값만 읽거나 쓰는게 가능
• JSON.stringify는 객체에 toJSON 메서드가 있으면 자동으로 호출해준다.