[React] axios 데이터 전송하기

1. node.js 를 통한 json 파일 작성

 

npm init -y  (server설치) : 데이터(server) 공간에 서버 설치

npm i express (express 설치)  : express란? 서버기능 구현을 위한 프레임워크

npm i cors (cors 설치) : axios 에러를 잡기 위한 설치 >> 비동기 통신 오류 잡기

 

1) express 관련 코드 삽입

 

 

 

>> server.js 코드 작성

 

** express.Router 사용시 주의사항 ( 관련 코드작성은 todoList.js 파일화면 참조 )

 

1) app.use('/api/todoList' , todoRouter) ->  /api/todoList' 를 검색하는 순간, router의 파일이 함께 구동하게 만듦.

('/api/todoList' ) ==> 이 부분이 주소가 되어 데이터 전송이 보여짐. todoRouter의 파일 경로가 아님!

 

* node 데이터 구동확인

 

>> todoList.js 코드 작성

 

1) npm i body-parser 설치 :

 

** Express 4.16.0 버전부터는 body-parser를 따로 설치하지 않고, body-parser를 기반으로 하는

    Express 내장 미들웨어 express()를 사용

 

기존의 express req.body값의 경우, 기본으로 undefine이 설정되어있어 body-parser를 이용하여 요청 데이터값에 접근.

* body-parser : 분석해서 필요한 형태로 가공해주는 프로그램 (설치한 이후, req.body 라는 property를 사용할 수 있게 됨)

 

**막간 정보

1) bodyParser.json()은 'application/json' 방식의 Content-Type 데이터를 받아줌.

2)bodyParser.urlendoded({...})는 'application/x-www-form-urlencoded' 방식의 Content-Type 데이터를 받아줌(jquery.ajax의 기본타입) 

=> extended 옵션을 false로 하면 내부적으로 querystring library 를 사용, true 의 경우, 내부적으로 qs library를 사용해 URL-encoded data를 파싱함. --> 기본적으로 true지만, deprecated 되었다는 의미 

즉, false 와 true 는 data 를 인코딩하는 방식을 선택하는 옵션. ( querystring 과 qs의 동작 차이는 추가 공부 필요 )

 

 

 

2. client 폴더에서 create-react-app . 설치 

 

1) npm i axios 설치 (비동기통신 데이터 전송)

 

* 주의사항

 

본래 node.js(백데이터) 파일과, React(프론트) 파일을 하나의 폴더를 통해 동시에 구현하자 axios 데이터 연동에 오류 발생

( 본인의 작업물은  node파일을 작성한 뒤, client 파일을 통해 react-app 파일을 실행했었음 )

>> 한 터미널에서, 백데이터와 프론트를 동시에 사용할 수 없음. >> 오류 발생 

>> 터미널을 분리해서 node 구동과 react npm start 를 사용 >> 오류 해결 >> 데이터 전송 확인

 

*두개의 터미널 사용 ( server 터미널을 먼저 구동한 뒤 프론트 파일을 실행해야 오류 발생이 덜함. )

* 데이터 전송확인

 

 

 

*** 시간소요 부분 >>

 

1) cors 에 의한 axios 오류라 생각해 중간 매개체 역할을 해줄 proxy 관련 자료를 찾아보았으나 서버와 프론트 터미널 분리에 대한 오류였음

2) 반복적인 데이터 수정으로 인해, react-app 이 제대로 작동되지 않아 오류파악이 더뎠음.