[React]리액트와 NodeJS 서버 연동하기
NodeJS 서버 만들기
1.express 라이브러리 설치
리액트 작업폴더를 오픈하여 터미널에서 다음 명령어를 입력한다.
npm init
npm install express
2.Node express 서버 실행
터미널에서 서버를 실행하기 위해 다음 명령어를 입력한다.
방법1> node server.js
방법2> nodemon server.js
nodemon으로 서버 실행을 하면 수정 후 서버를 다시 실행하지 않아도 된다.
터미널 결과
locahost 접속
3.server.js 파일 생성
const express = require('express');
const path = require('path');
const app = express();
const http = require('http').createServer(app);
http.listen(8080, function () {
console.log('listening on 8080')
}); 4.html 응답하기
server.js
// 메인 페이지 접속시 html 응답하는 방법
// 미들웨어 : html, css, js, img 파일들이 담긴 곳 명시
app.use(express.static( path.join(__dirname, 'public')))
app.get('/',function(request, response){
response.sendFile( path.join(__dirname, 'public/main.html'))
})main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>안녕하세요. 메인페이지에 오신 것을 환영합니다.</h4>
</body>
</html>결과 화면
리액트 프로젝트 만들기
[React]리액트 시작하기HTML 조작하기
함수와 파라미터 사용하기
이벤트 리스너(Event Listener)
제이쿼리(jQuery)
부트스트랩(Bootstrap) 활용하기
조건문(if, else)
변수 활용하기
애니메이션(Animate)
정규식
이미지 슬라이드(Carousel)
라이브러리 활용하기
스크롤 이벤트(Scroll)
탭메뉴 만들기(반복문)
이벤트 버블링(Event Bubbling)
Array & Object 자료형
form 응용하기
상품 정렬하기(sort, filter, map)
Ajax(에이젝스)
position : sticky 응용하기...
프로젝트를 생성 & 빌드
리액트 프로젝트 생성
npx create-react-app 프로젝트명
yarn create-react-app 프로젝트명
리액트 프로젝트 빌드
npm run build
yarn build
리액트와 NodeJS 서버 연동하기
리액트로 만든 html 응답하기
// server.js
app.use(express.static( path.join(__dirname, 'shop/build')))
app.get('/',function(request, response){
response.sendFile( path.join(__dirname, 'shop/build/index.html'))
})
리액트 라우터 처리하기
// server.js
// 리액트 라우팅 처리하기
app.get('*',function(request, response){
response.sendFile( path.join(__dirname, 'shop/build/index.html'))
})
특정 주소 접속시 리액트 페이지 보여주는 방법
/react 로 접속하면 리액트 페이지 보여준다.
server.js
app.use('/',express.static( path.join(__dirname, 'public')))
app.use('/react', express.static( path.join(__dirname, 'shop/build')))
app.get('/',function(request, response){
response.sendFile( path.join(__dirname, 'public/main.html'))
})
app.get('/react',function(request, response){
response.sendFile( path.join(__dirname, 'shop/build/index.html'))
})
package.json
"homage":"/react" 추가한다.
개발할 때 매번 빌드해서 적용하는 번거러움을 줄여주는 proxy 라이브러리를 사용하면 라이브로 개발을 할 수 있다.
