76일차 - 노드-react-axios 비동기통신 (2) 새끼 라우터와 리액트 연결

강사님 깃 다운받아 실습
https://github.com/4thdraw/nodeBackreactFront.git

先 node_modules 폴더 생성!

• 리액트 모듈 설치 npm i
• 노드 모듈 설치 npm install underscore --save
  https://velog.io/@kjh950330/Nodejs-NPM%EC%9C%BC%EB%A1%9C-%EB%AA%A8%EB%93%88-%EC%84%A4%EC%B9%98

1. 노드

1-1. routes 방 안에 새끼 라우터 만들어 DB 삽입하고, 리액트와 연결

새끼 파일 생성

server.js - localhost:8080/reactProxy ( contact.js )

contact.js - get.js / post.js 연결 (require & use)

get.js 채우기

post.js 채우기

1-2. get.js에서 보내는 data들 보다 복잡하게 만들어보자

복잡한 DB를 리액트에 보내서 -> 리액트가 받아내 출력하도록 하자!

---

2. 리액트

리액트 접근 주소는? localhost:8080/reactProxy/list 가 된다

src 방의 contact.js

2-1. get.js가 보내는 DB 받아내기 BUT 오류 발생!

2-2. 화면 죽여두고, 방법을 찾아보자

힌트) https://www.daleseo.com/js-json/

JSON 내장 객체는 JavaScript 객체와 JSON 문자열 간의 상호 변환을 수행해주는 두 개의 메서드를 제공합니다.

• JSON.parse(str 변수)
  └ JSON 문자열을 JavaScript 객체로 변환하는 메서드
  └ JSON 문자열을 인자로 받고, 결과값으로 JavaScript 객체를 반환
  └ reviver 함수를 인수로 전달할 경우, 결과를 반환하기 전에 변형할 수 있습니다.

콘솔에 출력해보면 JSON 문자열 형태의 데이터가 JavaScript 객체의 형태로 변환되어 출력되는 것을 확인할 수 있습니다.
JavaScript 객체와 JSON 문자열 간에는 아주 미묘한 차이가 있는 것을 알 수 있습니다.
JSON 문자열에서는 "키(key)"를 나타낼 때 반드시 "쌍따옴표"로 감싸줘야 하는 반면,
JavaScript 객체에서는 쌍따옴표를 꼭 사용할 필요는 없습니다.

{
    name: "홍길동",
    age: 25,
    married: false,
    family: {
        father: "홍판서",
        mother: "춘섬"
    },
    hobbies: [
        "독서",
        "도술"
    ],
    jobs: null
}

이렇게 JavaScript 객체로 변환된 데이터는 . 혹은 [ ] 기호를 사용해 각 속성에 접근할 수 있습니다.

• JSON.stringify()
  └ 반대로 JavaScript 객체를 JSON 문자열로 변환할 때 사용하는 메서드
  └ JavaScript 객체가 많은 양의 데이터를 담고 있는 경우, 3번째 인자로 들여쓰기 공백 지정

'{"name":"홍길동","age":25,"married":false,"family":{"father":"홍판서","mother":"춘섬"},"hobbies":["독서","도술"],"jobs":null}'

<script>

const str2 = JSON.stringify(obj, null, 2); // 3번째 인자로 들여쓰기할 공백의 크기를 지정
console.log(str2);

</script>

보기 쉬워졌다

{
  "name": "홍길동",
  "age": 25,
  "married": false,
  "family": {
    "father": "홍판서",
    "mother": "춘섬"
  },
  "hobbies": [
    "독서",
    "도술"
  ],
  "jobs": null
}