이쪽 분야는 거의 갓난아기 수준이라 강의에서 가르쳐준대로 진행했습니다.
(따로 제가 검색해서 개선하거나 추가한 부분이 없다는 의미)
제가 만들고자한 테이블은 강의보다 단순해서리..ㅎㅎ;
++
back/app.js에서 라우터 연결할때 첫번째 인자 app.use('/guestbook', GuestbookRouter); 처럼 '/'가 있어야합니다.
++
back 폴더를 생성
front 폴더를 만들어 작업한 것처럼 root 폴더 하위에 back 폴더를 생성합니다.
front 와는 별개로 서버를 돌리기 때문에 back 폴더에 들어가서 npm init을 해줍니다.
npm init
front 서버, back 서버 모두 run 시켜줘야 사이트를 정상 작동시킬 수 있습니다.
express를 통해 라우팅을 진행 할 것이기 때문에 express를 install해주세요.
npm i express
강의에서 front와 back 서버를 나누어 작업하는 이유에 대해 설명을 해주는데요..
간단히 요약하자면...
서버가 꽉 차게되면 확장을 위해 서버 스케일링 작업을 할 수 있는데,
이때 front와 back 서버가 하나에 존재할 경우 front 서버만 가득차서 확장을 할때에 back도 같이 확장할 수 밖에 없습니다. 이렇게되면 서버가 낭비되는 현상이 발생합니다.
그래서 보통 front와 back의 서버를 나누어 작업을 하고 꽉 찬 서버만 확장 한다고 합니다.
(서버스케일링이란?? https://www.hooni.net/xe/study/95321)
강의에서 설명해주신다고 대충 그려주신 이미지 입니다.
front 서버만 꽉찼을때 서버가 같이 있다면 같이 확장이 된다는 이미지입니다.ㅋㅋ..
자, 이제 express가 설치가 되었을테니 다음으로 넘어갑니다.
라우팅
/back 폴더 하위에 app.js 파일을 생성합니다.
나중에 app.js를 통해 서버를 run 시켜줄 것입니다.
그리고
back/routes 폴더를 생성해주고
그 하위에 내가 api 통신을 할 주소의 이름으로 파일을 생성해줍니다.
예를 들어보겠습니다.
'아래와 같은 주소들로 호출할 것이다.' 라고 한다면 /routes/user.js 폴더를 생성합니다.
https://example.com/user
https://example.com/user/nickname
https://example.com/user/post
저는 방명록으로 호출 할 것이라서 아래와 같이 작업했습니다.
이제 생성한 파일들에 내용을 추가해주겠습니다.
app.js
const express = require('express');
const guestbookRouter = require('./routes/guestbook');
const app = express();
app.use('/guestbook', guestbookRouter);
app.listen(3065, () => {
console.log('서버 실행 중');
});
1. express와 routes 하위의 파일들을 require해주시고 routes로 가져온 파일들을 추가해줍니다.
이때 import를 안쓰고 require를 사용하는 이유는?
과거에는 import나 export를 사용하려면 변환해주는 과정이 필요했습니다.
하지만 Node.js 13버전부터는 ES6 모듈을 지원해서 설정을 통해 import, export를 사용할 수 있습니다.
import를 사용하면 변환을 통해 require가 되는 점 때문이기도 하고..
기존에 지원안하던 Node.js 버전에서 쭉 사용해왔었기 때문이기도 하고...
뭐 이러한 여러가지 이유에서 require를 사용하는경우가 더 많다고 합니다.
(강의에서는, 그래서 추후에는 달라질 것 같다고 말하셨습니다.)
아래 글 읽어보시면 더 자세히 알수있어요!
Node.js에서 import/export 사용하기 글 바로가기
2. app.use를 통해 추가하면되고 첫번째 인자는 접두어이고 두번째는 라우터파일입니다.
이때 'guestbook'으로 안하고 'book'으로한다면 api 호출때 https://example.com/book으로 호출되야하므로 호출할 주소의 이름으로 입력해주세요.
3. 그리고 listen을 통해 서버를 run할 것인데 3065는 포트번호입니다. 수정하셔도 상관은 없습니다.
localhost:3065 로 접근가능합니다.
routes/guestbook.js
const express = require('express');
const router = express.Router();
router.post('/', (req, res) => { // POST /guestbook
// res.json({ });
});
module.exports = router;
router.post의 post는 rest api의 메소드입니다.
같은 주소로 호출해도 메소드에 따라 구분됩니다.
https://example.com/guestbook -> post일때와 delete일때 라우터를 2개 생성하여 각각 구현합니다.
(methods => www.restapitutorial.com/lessons/httpmethods.html )
router.post의 첫번째 인자는 접근할 주소입니다.
즉 app.js에서 app.use('guestbook', ...)으로 했을때 https://example.com/guestbook/이 되고
guestbook.js 파일 내에서 router.post('user' ...)라고 첫번째 인자를 작성했다면 https://example.com/guestbook/user가 됩니다.
두번째 인자로는 요청 값, 응답 값이 옵니다.
세번째는 콜백, 응답이 오고나서 res.json을 통해 값을 front로 전달 할 수 있습니다.
백엔드의 역할은
프론트에서 데이터 요청이 오면 받는다 -> db에서 데이터 꺼내서 가공 -> 프론트로 전달 입니다.
DB 셋팅
MySQL을 통해 작업하겠습니다.
1. dev.mysql.com/downloads/ 사이트에서 (혹은 구글 검색해서 들어가세요)
2. MySQL Installer for Windows
3. 저는 아래 큰 파일 다운로드 했습니다.. 이 부분은 위에 작은거 받아도 된다고 하는 사람도있고... 여러가지 방법이있겠지만 저는 localhost 비밀번호 설정이 안나와서 ㅠ 저는 갓난아기라.. 여튼 다운로드 누르면
4. 로그인 가입하기 나오면 왼쪽아래 No thanks, just start my download 클릭!
5. 설치파일 쭉 설치 (다 기본으로 두고 했음) 중간에 비밀번호 입력하는 거 나오는데, 그거 입력하시고 외워두셔야합니다...
다운로드 참고 -> m.blog.naver.com/bjh7007/221829548634
제로초님 책 참고 링크 https://thebook.io/080229/ch07/
그리고 다시 /back 폴더에서 터미널을 열어줍니다.
npm i sequelize sequelize-cli mysql2
시퀄라이즈는 자바스크립트 문법으로 mysql을 컨트롤 할 수 있게 해주는 라이브러리입니다.
js를 mysql 문법으로 변환해줍니다.
mysql2는 노드와 mysql을 연결해주는 드라이버 역할을 합니다.
시퀄라이즈 init을 해줍니다.
npx sequelize init
init이 끝나면 여러 파일들이 생성됩니다.
config/config.json으로 가서 db 패스워드와 데이터베이스 이름을 수정해주겠습니다.
password는 mysql 다운로드 하실때 등록한 비밀번호입니다.
보안상 위험하기때문에 dotenv를 통해 작업하겠습니다.
먼저 dotenv를 install 해줍니다.
npm i dotenv
back 폴더 하위에 .env 파일을 생성합니다.
주의할 점은 .env 파일은 공개적인 장소에 업로드하면 절-대 안됩니다.
(비밀번호와 같은 것들을 작성해둘 것이기에..)
그리고 안에 db 패스워들 작성해줍니다.
저는 예시로 DB_PASSWORD=secret 이라고 문자열을 넣었는데, 본인이 원하는 변수명에 db 패스워드를 넣어주면됩니다.
DB_PASSWORD=secret
그 다음 config.json가서 파일을 수정하겠습니다.
먼저 dotenv를 사용하기 위해 config.json을 config.js로 확장자를 바꿉니다.
그 다음 아래와 같이 작성해줍니다.
process.env.DB_PASSWORD는 .env에서 작성했던 값 입니다.
개발, 테스트, 배포 이렇게 나누어져있는데,
개발이나 테스트할때 필요한 db 정보를 넣고 빼고, 수정하는 작업이 빈번하기 때문 운영(배포) DB와 별도로 둡니다.
database는 데이터베이스 이름입니다. (이 이름으로 최초 db 생성 시 테이블이름이 등록됩니다.)
위와 같이 database_development를 react-okayoon로 수정하고 나중에 db 생성까지 마친다면
아래와 같이 생성됩니다.
host가 127.0.0.1인 이유는 기본적으로 mysql 호스트 주소입니다.
기본 포트는 3306입니다.
그리고 이제 모델 설계를 하겠습니다.
back/ 하위에 models 폴더를 생성합니다. (폴더가 기본으로 만들어져있나????)
그리고 models 하위에 index.js 파일을 생성합니다.
기존에 파일 내용을 다 지우고 (= 27라인 위로 다 지웁니다.)
그러면 아래와 같이 남습니다.
그리고
아래 코드처럼 수정합니다.
const Sequelize = require('sequelize');
// db가져올때 개발, 테스트, 배포를 나누어서 작업할 수 있다.
const env = process.env.NODE_ENV || 'development';
const config = require('../config/config')[env];
const db = {};
// 시퀄라이즈랑 노드-mysql을 연결해준다.
// 연결 성공 시 연결 정보다 sequelize에 담긴다.
const sequelize = new Sequelize(config.database, config.username, config.password, config);
Object.keys(db).forEach(modelName => {
if (db[modelName].associate) {
db[modelName].associate(db);
}
});
db.sequelize = sequelize;
db.Sequelize = Sequelize;
module.exports = db;
이제 모델들을 만들어보겠습니다.
저는 방명록 테이블, 코멘트 테이블, 이미지테이블을 만들겠습니다.
guestbook.js, comment.js, image.js 파일을 생성했습니다.
models/guestbook.js
module.exports = (sequelize, DataTypes) => {
const Guestbook = sequelize.define('Guestbook', { }, { });
Guestbook.associate = (db) => {};
return Guestbook;
};
먼저 큰틀을 설명하겠습니다.
Guestbook으로 변수 선언합니다. 그리고 sequelize.define의 첫번째 인자는 테이블 이름이 됩니다.
대문자로 작성해주면 db에 등록될때는 소문자, 복수로 등록됩니다.
두번째 인자는 컬럼에 대한 설정 값입니다.
세번째 인자는 모델에 대한 설정 값입니다.
채워보도록 하겠습니다.
models/guestbook.js
module.exports = (sequelize, DataTypes) => {
const Guestbook = sequelize.define('Guestbook', {
nickname: {
type: DataTypes.STRING(20),
allowNull: false,
},
avatar: {
type: DataTypes.INTEGER(1),
allowNull: false,
},
password: {
type: DataTypes.STRING(100),
allowNull: false,
},
superkey: {
type: DataTypes.STRING(100),
allowNull: false,
},
content: {
type: DataTypes.STRING(100),
allowNull: false,
},
}, {
charset: 'utf8mb4',
collate: 'utf8mb4_general_ci',
});
Guestbook.associate = (db) => {
db.Guestbook.hasMany(db.Comment);
db.Guestbook.hasMany(db.Image);
};
return Guestbook;
};
두번째 인자에 값들은 내가 어떠한 값들을 받아서 컬럼에 넣겠냐는 의미입니다.
저는 닉네임, 아바타, 패스워드, 수퍼키, 콘텐츠가 필요했습니다.
nickname, avatar, password, superkey, content
이때 내가 등록하지 않아도 자동으로 등록되는 값들이 생깁니다.
세번째 인자에서 작업한 모델간의 관계에 의해서도 자동으로 값이 생성됩니다. (GuestbookId)
그리고 그 컬럼의 오브젝트로 type, allowNull 값을 세팅합니다.
type은 어떤 값으로 받겠느냐는것이고 이 값은 STRING, TEXT, BOOLEAN, INTEGER, FLOAT, DATETIME이 있습니다.
allowNull은 필수 여부인데, false가 필수를 뜻하는 값이라고 합니다.
세번째 인자는 모델에 대한 설정 값입니다.
charset은 문자와 encoding에 대해, collate는 charset 안에서의 정렬방식이라고 합니다.
참고 => sshkim.tistory.com/128
2개 다 작성해줘야 한글을 작성할 수 있다고하고 에러가 안난다고합니다.
utf8에 mb4가 추가되면 이모티콘 저장 가능합니다.
Guestbook.associate는 db의 모델간의 관계 정리입니다.
저는 방명록과의 모델 관계에 comment와 image 모델간의 관계만 존재하기 때문에 아래와 같이 했습니다.
db.Guestbook.hasMany(db.Comment);
db.Guestbook.hasMany(db.Image);hasMany => 방명록이 코멘트 여러개 가질 수 있다.
hasMany => 방명록이 이미지 여러개 가질 수 있다.
다른 것들도 많습니다.
예를 들어 belongTo => 어떠한것이 어떤것에 속해있다...
복잡해지면 사용해야하는 것들이 더 나오기때문에 블로그님 글을 참고해보세요 => velog.io/@cadenzah/sequelize-document-4
그 후에 models/index.js에서 불러와줘야합니다.
const Sequelize = require('sequelize');
const env = process.env.NODE_ENV || 'development';
const config = require('../config/config')[env];
const db = {};
const sequelize = new Sequelize(config.database, config.username, config.password, config);
db.Guestbook = require('./guestbook')(sequelize, Sequelize);
db.Comment = require('./comment')(sequelize, Sequelize);
db.Image = require('./image')(sequelize, Sequelize);
Object.keys(db).forEach(modelName => {
if (db[modelName].associate) {
db[modelName].associate(db);
}
});
db.sequelize = sequelize;
db.Sequelize = Sequelize;
module.exports = db;
require 한 다음 sequelize, Sequelize 값을 넣어 호출해줍니다. (그래서 변수에 담았)
그리고 그 값을 db.Guestbook 형식으로 db 오브젝트에 넣어 준뒤,
아래에 있는 Object.keys에서 반복하면서 associate를 실행해줍니다.
이렇게 하면 시퀄라이즈에 모델을 등록한 것입니다.
이제 express에 시퀄라이즈를 등록합니다.
app.js
그 다음 db 생성을 위해 명령어 입력!!! 와 끝이다!! 와 시작이다!!
npx sequelize db:create
서버 실행
node app
이렇게 진행한 뒤 MySQL 설치 시 같이 다운로드 받아진 workbench에 들어가서 확인해봅니다.
서버 수정 시 자동으로 재실행 시키기
서버는 코드가 변경되어도 재 실행하기 전까지 반영이 안됩니다.
그렇다고 개발자가 끄고 켜고 얼마나 번거롭습니까..
그래서 이것을 실시간으로 반영해주는 nodemon 라이브러리를 사용해보겠습니다.
npm i -D nodemon@2
그리고 바로 node app 명령어로 서버 실행시키지 말고 아래 명령어로 실행하면 됩니다.
nodemon app
근데 나중에 테스트일때, 개발일때, 배포일때 명령어를 각각 칠거 아니기 때문에
package.json에 스크립트로 등록해줍니다.
이렇게 작성해두면 아래와 같이 nodemon을 통해 서버 실행이 가능합니다.
npm run dev
이렇게 하면 수정이 생겼을때 알아서 서버를 재 실행해줍니다.
여기까지 db 생성해보기였습니다.
다음 포스팅으로... 추가 작업을 더 진행하겠습니다.