웹서버에서 리액트를 가져다 쓰고 싶을 때
웹 서버란 -> 유저가 웹 문서를 요청했을 때 웹 문서를 보내주는 것
서버 -> 유저가 데이터 요청했을 때 데이터 보내주는 것
등.. 데이터 주는 곳이라고 생각하면 됨
리액트란 html을 예쁘게 만들어주는 툴
리액트연동
예를 들어,
유저가 내가 만든 포트폴리오 주소를 주소창에 침
유저 : 서버야 주소 입력 했으니 주소 html 줘
서버 : 리액트로 만든 html 파일 보내줌
서버 만드는 법
- node.js 검색해서 설치
- 작업 폴더 만들고 에디터로 오픈
- server.js 만들어서 코드 붙여넣기
// server.js
const express = require('express');
const app = express();
const path = require('path');
app.listen(8080, function(){
console.log('listening on 8080');
});- 터미널 열어서 npm init -y (default 값으로 설정된 package.js 를 만듬, y..? —> Yes)
- npm install express
이러면 서버가 만들어짐
리액트 프로젝트 열어서 빌드 함 --> 빌드하는 법 (npm run build)
https://min-ji07.tistory.com/entry/Github-github%EC%97%90-%EC%9B%B9-%EC%82%AC%EC%9D%B4%ED%8A%B8-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%98%AC%EB%A6%AC%EA%B8%B0
빌드 폴더 생성하면 서버에서 가져다 쓸 수 있음
리액트 프로젝트를 서버 프로젝트 안에 넣음(node_modules) 파일과 같이 있으면 됨
누가 메인 페이지를 접속 했을 때 내가 만든 index.html 파일을 보여주고 싶을 때 입력 코드
메인 페이지 접속했을 때 초록색으로 보이는 파일 보여주세요
// server.js 파일 밑에 입력해주면 됨
app.get('/', function(요청, 응답){
응답.sendFile(path.join(__dirname, '리액트로 만든 html 파일 경로(index.html)'));
// react-project/build/index.html
});저렇게 코드를 짜주고 해당 코드 위에 아래 코드를 추가해줌
해당 폴더 안에 있는 static 코드를 가져다 쓰겠다는 뜻임
app.use(express.static(path.join(__dirname, 'react-project/build')));
리액트 라우터 사용시 추가 해 줄 코드
최하단 작성
app.get('*', function(요청, 응답){
응답.sendFile(path.join(__dirname, 'react-project/build/index.html'));
});유저가 주소창에 없는 경로를 입력했을 때 index 페이지로 이동
디비에 있던 데이터를 리액트에서 보여주고 싶을 때
서버에서 디비 데이터를 뽑아 그대로 프론트엔드로 보냄
유저가 상품 페이지 접속했을 때 데이터 베이스에 있던 상품을 보여주려면
app.use(express.json());
// 유저가 보낸 array/object 데이터 출력할 때 필요
let cors = require('cors');
// cors 사용시 npm install cors 입력
app.use(cors());
// cors는 다른 도메인주소끼리 ajax 요청 주고 받을 때 필요함
// 해당 코드 추가해야 ajax 잘 된다고 함
app.get('/product', function(요청, 응답){
응답.json(필요한 데이터)
// 서버 /product 주소에 데이터 요청함
// 리액트는 해당 주소에 GET 요청 하면 됨
});
완성 된 server.js 파일
// server.js
const express = require('express');
const app = express();
const path = require('path');
app.listen(8080, function(){
console.log('listening on 8080');
});
app.use(express.json());
let cors = require('cors');
app.use(cors());
app.use(express.static(path.join(__dirname, 'react-project/build')));
app.get('/', function(요청, 응답){
응답.sendFile(path.join(__dirname, 'react-project/build/index.html '));
});
app.get('/product', function(요청, 응답){
응답.json(필요한 데이터)
});
app.get('*', function(요청, 응답){
응답.sendFile(path.join(__dirname, 'react-project/build/index.html'));
});작성 후 서버 실행 코드 입력
node server.js
localhost:8080에서 서버 확인
에러 검색하다 찾았는데 참고 할 것!
https://xiubindev.tistory.com/115
나를 너무나 힘들게 했던 CORS 에러 해결하기 😂
🔥 사건의 발단 : 외부 API 호출 때는 바야흐로 2020년 3월. 프론트엔드 공부를 시작한 지 얼마 되지 않은 채 홀로 토이 프로젝트를 진행하던 중이었다. 코로나 바이러스 관련 웹서비스를 만들고자
xiubindev.tistory.com
'개발 > React' 카테고리의 다른 글
| [React] gh-pages route 오류 (0) | 2022.11.07 |
|---|---|
| [React] 이벤트 버블링 막기 (0) | 2022.11.02 |
| [React] input 상태 관리 (0) | 2022.05.16 |
| [React] props(Propeties) (0) | 2022.05.12 |