오랜만에 쓰는 게시글이다.
이번에는 React를 공부하면서 'Front에서 모든 데이터를 다 처리해야하나? 다른 Back-end 없이?' 라는 생각이 들어서 검색을 열심히 해본결과, Express랑 연동을 하면 된다는 정보를 찾아서 간단한 예제부터 만들어보기로 했다.
먼저 Directory Struct부터 보면 간단하게 구성을 했다.
React_Express
|--Server
|--Client
다음으로는 Express 설치와 React 설치를 진행한다.
|
1
2
3
4
5
|
npm install -g express-generator
npm install -g create-react-app
express server
create-react-app client
cd server && npm install
|
cs |
Express설치 후 express 명령을 통해 server 폴더를 생성하고 create-react-app을 이용하여 client 폴더를 생성한 뒤, express에 필요한 파일을 설치하였다.
제대로 설치가 되었디면 server, client폴더에서 아래의 명령어를 실행했을 때 각각의 페이지가 나오면 성공이다.
|
1
|
npm start
|
cs |
이제 여기서 React가 Express를 호출하도록 proxy 설정을 해주어야하는데 이는 client 폴더의 package.json에서 설정이 가능하다. 아래와 같이 최하단에 proxy 설정을 해주면 되는데, 이 때 접속 route는 Express가 사용하는 route를 적으면 된다. 필자는 3000번 포트를 이용하기 때문에 아래와 같이 작성하였다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:3000/"
}
|
cs |
여기까지 진행을 하였으면 일단 React가 Express에 접근을 할 수 있게 설정을 한 것이다.
'Web' 카테고리의 다른 글
| IntelliJ에서의 Servlet 프로젝트 설정 방법 (0) | 2019.09.19 |
|---|---|
| 젠킨스 사용해보기 (0) | 2017.12.31 |
| Servlet 기초(2) (0) | 2016.11.11 |
| Servlet 기초(1) (0) | 2016.11.11 |