Junnnho

React와 Nodejs(express)를 연동

React                                                                                            

1. React => create-react-app 을 통해 환경을 편하게 구성 가능

2. create-react-app 작업할곳이름

3. 지정한 폴더로 이동하면 다음과 같이 환경구성이 끝났음을 알 수 있다.

4. npm start 를 통해 실행되는지 확인

Nodejs(express)                                                                            

express framework를 이용하여 backend 환경을 구성

React 내에서 연동하기 위해 폴더를 나누어 사용한다.

서버 사용을 위한 폴더내에 라우더 폴더/index.js 를 생성하고, 라우팅을 위한 server.js를 생성한다. 

기본 환경 구성

React는 기본적으로 3000번 포트를 사용하도록 설정되어 있기 때문에,

server단은 3001번 포트로 설정해주었다.

server.js

index.js

서버실행을 편하게 하기위해 script를 추가해준다.

서버가 작동하는지 확인

** script를 사용하는 명령어는 'run'을 꼭 사용해야한다.

다음과 같이 잘 작동하는 것을 확인할 수 있다.

서버 사용팁

클라이언트의 경우 코드를 수정하고 저장하면 수정된 코드까지 포함하여 처음부터 페이지에 렌더링된다.

즉 바로바로 작동하게 되는데,

위와 같이 서버를 사용하면 코드를 수정 후 저장하여도 재작동하지 않아서 서버를 끈 후에 다시 실행해야 한다.

이 불편함을 해결하는 것이 nodemon 이다.

nodemon을 설치하고,

script의 node를 nodemon으로 수정한다.

앞으로 서버단의 코드를 변경하면 재작동하게 되어 편하게 사용할 수 있다.

Proxy                                                                                              

위까지 환경을 구성했어도, 당장 클라이언트와 서버사이는 통신이 불가능하다.

proxy는 클라이언트와 서버 사이의 네트워크 통신을 '대리'로 수행하는 미들웨어이다.

Proxy 설치

proxy 설정을 위한 js를 src폴더에 생성

cross-origin resource sharing(CORS)                                                

일반적으로 하나의 페이지는 보안상 같은 포트를 사용하는 페이지에서만 접근할 수 있도록 구성(CORS)되어 있다.

현재 구성한 포트는 3000, 3001번 이므로 서로 데이터에 접근하게 되면 CORS를 위배하여 오류가 발생한다.

Nodejs에서는 이를 해결하기 위해 cors 모듈을 제공한다.

CORS 설치

server.js 에 cors 코드를 삽입

여기까지하면 React와 NodeJs(express)의 연동이 끝난다.

클라이언트와 서버가 데이터를 주고받는 방법은 여기!에서 포스팅하겠다.

개발자들은 좋은 기능이 탑재된 최신버전의 ECMAScript로 개발하기를 원한다

그래서 개발할 때는 최신 버전의 ECMAScript를 사용하고

사용자에게 배포할때는 Javascript transcompiler 를 이용해서

변환된 코드를 생산해주는 transcompile이 가능한 것이 바로 babel

바벨(babel)은 자바스크립트 코드를 변환해주는 컴파일러다.

바벨을 사용하면 최신 자바스크립트 문법을 지원하지 않는 환경에서도 최신 문법을 사용할 수 있다.

ES6가 막 나왔을 때는 대부분의 브라우저가 ES5만 지원하고 있었기 때문에 ES6문법을 사용할 수 없었다.

그때 바벨이 Es6 문법으로 작성된 자바스크립트 코드를 ES5 문법으로 변환해 줬다.

ES6 문법을 사용하고 싶어 하는 개발자가 많았기 때문에 바벨의 인기도는 높아졌다.

바벨은 자바스크립트 최신 문법을 사용하는 용도 외에도 다양하게 활용될 수 있다.

이를테면, 코드에서 주석을 제거하거나 코드를 압축하는 용도로 사용될 수 있다.

리액트에서는 JSX 문법을 사용하기 위해 바벨을 사용한다.

바벨이 JSX 문법으로 작성된 코드를 createElement 함수를 호출하는 코드로 변환해준다.

즉, JSX가 아닌 createElement 함수를 호출하는 것이 render 메서드의 기본이지만,

createElement는 가독성이 떨어지기 때문에 흔히 사용하는 JSX 문법으로 컴포넌트를 구현하게 되고,

자바스크립트 표준이 아닌 JSX 문법을 적용하기 위해 createElement 함수로 컴파일하여 돔에 렌더링하는 과정을 거친다.

이 컴파일 역할을 하는 것이 바벨(babel) 이다. 

바벨을 사용하기 위해서는 패키지 설치가 필요하다.

$ npm install @babel/core @babel/cli @babel/preset-react

@babel/cli에는 커맨드라인에서 바벨을 실행할 수 있는 바이너리 파일이 들어있다.

@babel/preset-react에는 JSX로 작성된 코드를 createElement 함수를 이용한 코드로 변환해주는 바벨 플러그인이 들어있다.

사용법은 다음과 같다

npx babel --watch src --out-dir . --presets @babel/reset-react 또는 ./node-modules/.bin/babel

위의 명령어를 실행하면 src 폴더에 있는 모든 자바스크립트 파일을 @babel/preset-react 프리셋을 이용해서 변환 후 현재 폴더에 같은 이름의 자바스크립트 파일을 생성한다. watch 모드로 실행했기 때문에 src 폴더의 자바스크립트 파일을 수정할 때마다 자동으로 변환 후 저장해준다.

createElement 함수의 구조는 다음과 같다.

React.createElement(component, props, ..children) => ReactElement

component

일반적으로 문자열이나 리액트 컴포넌트를 사용한다

인수가 문자열이면 HTML 태그에 해당하는 돔 요소가 생성된다.

예를 들어, 문자열 p를 입력하면 HTML p태그가 생성된다.

props

컴포넌트가 사용하는 데이터를 나타낸다. 돔 요소의 경우 style, className 등의 데이터가 사용될 수 있다.

children

해당 컴포넌트가 감싸고 있는 내부의 컴포넌트를 가리킨다.

ex_

<div>

    <p>hello</p>

    <p>world</p>

</div>

createElement(

    'div',

    null,

    createElement('p', null, 'hello'),

    createElement('p', null, 'world'),

)

위의 html 코드를 아래의 코드로 동일하게 만들 수 있다.

대부분의 리액트 개발자는 createElement를 직접 작성하지 않는다.

일반적으로 babel의 도움을 받아서 JSX문법을 사용한다.

이는 createElement 함수보다는 JSX 문법으로 작성하는 리액트 코드가 훨씬 가독성이 좋기 때문이다.