(3) 블로그 만들기 - 비구조화 할당,axios,cors

axios 를 사용해 글을 작성하고 읽기,삭제, 수정하는 기능을 만들어보자

입력한 값을 저장하기 위해 useState 함수를 사용할 것이다.

 

useState 는 컴포넌트에서 상태를 관리 할 수 있게 해준다.

   *컴포넌트 : 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈

useState 는 기본값을 파라미터로 넣어서 호출하는데 나는 객체를 넣었다.

useState 함수를 호출하게 되면 배열이 반환되는데 , 첫번째원소는 현재상태, 두번째 원소는 Setter 함수이다.

   *Setter 함수 : 변수에 값을 집어넣는 함수

반환된 배열을 추출하기 위해 배열 비구조화 할당을 사용하였다.

   *비구조화 할당이: 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식

 

사용자가 입력을 할 때 마다 함수가 실행되도록 getvalue 함수를 선언해 onChange 에 넣었다.

 

e.target 객체의 name엔 내가 선언한 name 값이 value 엔 사용자가 입력한 값이 들어가있다.

객체 비구조화 할당을 통해 이 두값을 추출하였다.

그다음 setNewpost setter 함수로 newpost 변수에 값을 집어 넣었다.

리액트는 직접 값을 수정하면 안되고 새로운 객체를 만들어서 새로운 객체를 수정해야 하는데 그래야만 변화를 감지할 수 있다.

이런 역할을 하는것이 spread 문법이다.

...newpost 에서 ...이 spread 연산자이다.

기존의 newpost 객체를 새로운 객체로 만든 후 e.target 의 name과 같은 newpost key 값에 e.target 의 value 값을 넣는다.

 

아 어렵다.

 

!!!!!!!!!! [name]: value 에서 name 을 [ ]로 감싸는 이유를 모르겠다-->객체 프로퍼티라 그런가 !!!!!!!!!!!!!!

 

아무튼 console.log 로 확인하면 잘 나온다.

 

이제 newpost를 서버쪽으로 보내보자.

그러기 위해 axios 를 사용할 것이다.

설치한다.

submit 함수를 만들어줍니다.

newpost 를 객체 비구조화 할당을 통해 값을 추출한 후

axios.post 를 사용해 서버쪽으로 데이터를 보내줍니다.

이때 보내주는 데이터는 json 형식입니다. (axios 에서 자동으로 json 형태로 바꿔줌)

요청이 끝나면 alert 함수를 실행하도록 하였습니다.

 

서버쪽도 만들어 줍니다.

server 폴더를 만들고 app.js 파일을 만들어줍니다.

서버쪽에서 express npm을 설치해 주고 app.js 를 작성합니다.

cors 는 내용이 많으니 나중에 따로 정리하겠습니다. 일단 이렇게 쓰면 작동합니다...

요청한 데이터를 파싱하기 위해 express.json 를 사용하였고 객체안의 객체를 파싱하기 위해 urlencoded도 true 로 설정했습니다.

보내줄 데이터가 없으므로 그냥 res.end()를 사용합니다.

잘 작동 됩니다.

 

mysql을 사용해 받은 데이터를 데이터베이스에 저장합시다.

npm 설치해줍니다.

데이터 베이스와 테이블을 만들어 주고

서버쪽에서도 mysql 을 사용하기 위해 세팅해 줍니다.

서버쪽에서 이렇게 작성해주고 한번 테스트해봅시다.

잘 작동됩니다.

 

이제 db에 있는 글들을 읽어서 프론트로 보내주고 출력해봅시다.

useEffect 를 사용해 axios.get을 요청합니다.

res.data 값이 배열로 들어오네요

 

배열또한 불변성을 지켜주어야합니다. concat 함수를 사용해 받은 res.data값을 postlist에 넣어 줍시다.

그다음 map 함수로 배열안에 각 요소들을 출력해줍니다.

출력은 되는데 에러가 발생한다.

리액트에서는 배열을 랜더링 했을때 key를 사용해 어떤 원소에 변동이 있는지 알아낸다고 한다.

키 값으로 id 를 사용하기 위해 server 에서 select sql문을 바꿔주자...

그다음 li 에 키값을 넣어주고 실행하면 에러가 사라진다!

 

이정도만 하고 다음글에서 개별 포스트 읽는거랑 수정, 삭제를 구현해 봐야겠다.

 

 

******************************************************

정보들은 구글링해서 가져왔습니다...

틀린정보가 있을 수도 있어요!!