[23.10.31] 61차
<<진도>>
[DB 연동 응용SW 개발]
- React SPA 미니 프로젝트 점검/확인
- DB 연동 기본개념
- mongo DB
- express
<<팁>>
- 사용자입장에서 사용자가 이용하기 편하게 만들기
- 터미널에서 npm run dev중인 서버 연결끊기 (ctrl + c) * 2
향후 스프링활용 –
스프링은 (리액트와 마찬가지로) Front + Back형태, 스프링은 둘을 명확하게 구분하기 좋다.
|
[사용자(client)] URL로 request (req) ---> [서버(server)]
<--- response(res) |
** 스프링도 ( ex)React App.js ) 컴포넌트 view들의 URL에따라 처리되는 작업들은 미리
정리를 해두는 방식으로 작업한다
|
[서버(server)] 코드 저장 ---> [데이터베이스(DB)]
<--- DB와 연동 |
: 요청에 관련된 코드가 실행되게 DB에 저장해둔다. <- server(SW)와 DB가 연동되어 있어야 한다.
: 기존에는 java/js/python 등으로 서버를 구현하고, DB의 DBMS와 복잡한 코딩과정을 거쳤어야했으나, 현재는 매우편리해졌다.
*** [‘Mongo DB’를 통한 연동]
[Mongo DB]
: 크로스 플랫폼 도큐먼트 DOCUMENT(문서) 지향 데이터베이스 시스템
크로스 플랫폼 도큐먼트 지향 데이터베이스 시스템
* 생성
실제 배포 시 서버는 ‘aws’(아마존 웹서비스)를 활용한다.
- 개인정보 생성 (DB 접근 시 아이디 비밀번호 설정 및 보관필요)
- 작업위치 선택
: 특정 IP만 접근할 수 있게 (포트)지정가능
: 0.0.0.0/0 시 아무데서나 접속 가능
* 생성 완료
* CONNECT!
* ‘movie’ 클러스터의 cluster의 connect할 (VScode에서) deployment 링크 복사
복사한 URI/URL을
server/config/dev.js 에 설정
module.exports = {
mongoURI: 'mongodb+srv://cpcpcoole:cccl@movie.tg9amum.mongodb.net/'
}
** VScode에 server폴더 구조 제작
server가 사용할 library를 package.json에 설치
D:\fullstack\front\p231024\movie> npm install mongoose
-package.json
{
"name": "movie",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"concurrently": "^8.2.2",
"mongoose": "^7.6.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
index.js의 서버가 잘됐는 지 테스트
"scripts": {
"frontend": "npm run start --prefix client",
"backend": "server/index.js",
"dev": "concurrently \"npm run backend\" \"npm run frontend\""
},
index.js
import mongoose from 'mongoose';
import { mongoURI } from './config/dev';
import config from './config/dev';
const connect = mongoose.connect(config.mongoURI)
.then(() => console.log('[MongoDB] connected'))
.catch(() => console.log('[MongoDB] Error!!!'))
console.log('server 실행 중...')
**config/dev.js가 module.export하고있는 = {객체} 이므로 이렇게 import
[but back개발 환경에서든 require() 사용 *(후술)]
**** backend개발환경에서 코드가 변경될 때마다 앱을 재실행해주는 lib
‘nodemon’ (매번 재실행 안해도되지만 장단점이 있다)
PS D:\fullstack\front\p231024\movie> npm install nodemon
package.json 설정
"scripts": {
"frontend": "npm run start --prefix client",
"backend": "nodemon server/index.js",
"dev": "concurrently \"npm run backend\" \"npm run frontend\""
},
*** server(backend) 쪽에서는
‘import’가 아닌 ‘required()’ 함수를 통해야만 불러와지는 요소들도 있다.
* node.js 환경에서 mongoose importing
// Using Node.js `require()`
const mongoose = require('mongoose')ex)
index.js
// import mongoose from 'mongoose';
// import config from './config/dev';
const mongoose = require('mongoose');
const config = require('config');
const connect = mongoose.connect(config.mongoURI)
.then(() => console.log('[MongoDB] connected'))
.catch(() => console.log('[MongoDB] Error!!!'))
console.log('server 실행 중...')
↓ ↓ ↓ ↓ ↓ ↓
[** 모델을 만들어줘야한다
‘스키마/스킴’ 구조(모델)를 만들고 .save로 문서에 저장]
(front까지 모두 있는 리액트에서의 DB연동은 복잡한구조이다)
*** node.js 사용자 URL 요청 관련 LIB ‘express’ 설치
npm install express –save
(--save는 과거세팅 생략가능)
express는 이해가 필요하다.!
** Express 애플리케이션 생성기 (연습용 예제 생성)
1. express가 설치된 폴더에
2.
npm install express-generator –g -g: (전역)
3. _myapp_라는 이름의 Express 앱을 현재 작업 디렉토리에 작성
$ express --view=pug myapp
create : myapp
create : myapp/package.json
create : myapp/app.js
create : myapp/public
create : myapp/public/javascripts
create : myapp/public/images
create : myapp/routes
create : myapp/routes/index.js
create : myapp/routes/users.js
create : myapp/public/stylesheets
create : myapp/public/stylesheets/style.css
create : myapp/views
create : myapp/views/index.pug
create : myapp/views/layout.pug
create : myapp/views/error.pug
create : myapp/bin
create : myapp/bin/www
이후 다음과 같이 종속 항목을 설치하십시오.
$ cd myapp
$ npm installMacOS 또는 Linux에서는 다음 명령을 사용하여 앱을 실행하십시오.
$ DEBUG=myapp:* npm startWindows에서는 다음 명령을 사용하십시오.
> set DEBUG=myapp:* & npm start이후 브라우저에서 http://localhost:3000/을 로드하여 앱에 액세스하십시오.
생성된 앱은 다음과 같은 디렉토리 구조를 갖습니다.
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.pug
├── index.pug
└── layout.pug
7 directories, 9 files학습 참고:
https://expressjs.com/ko/starter/generator.html
