서버와 클라이언트 폴더를 분리하고 그거에 맞춰서 만들 예정이다.
클라이언트 폴더는 myblog
서버 폴더는 myblog_server
이다
클라이언트 폴더에는 React + TypeScript를 설치하여 셋팅해준다
yarn create react-app myblog --template typescript
서버 폴더에는 express + mysql + sequelize 를 이용하여 데이터와 연결해 줄 것이다.
yarn add express mysql2 sequelize sequelize_cli
서버 폴더에서 먼저 .gitignore 파일을 만들어 node_modules 파일이 올라가지 못하게 만들어두고,
npx sequelize init을 입력하여 시퀄라이즈 사용에 필요한 폴더와 파일들을 만들어준다.
config,json에서 데이터베이스와 연결해주고,
//config.json
{
"development": {
"username": "toss1",
"password": "12345",
"database": "myblog",
"host": "127.0.0.1",
"dialect": "mysql"
},
"test": {
"username": "root",
"password": null,
"database": "database_test",
"host": "127.0.0.1",
"dialect": "mysql"
},
"production": {
"username": "root",
"password": null,
"database": "database_production",
"host": "127.0.0.1",
"dialect": "mysql"
}
}
/models/index.js에서 필요한 부분만 남겨 만들어준다. 그리고 모델을 만들 파일을 연결해 줘야한다.
'use strict';
const Sequelize = require('sequelize');
const env = process.env.NODE_ENV || 'development';
const config = require(__dirname + '/../config/config.json')[env];
const db = {};
const sequelize = new Sequelize(config.database, config.username, config.password, config);
db.User = require(./user)(sequelize);
db.sequelize = sequelize;
db.Sequelize = Sequelize;
module.exports = db;
그 후에 일전에 만들어준 ERD에 맞춰서 models 폴더에 원하는이름.js를 만들어 테이블을 정의해준다.
const {DataTypes} = require("sequelize");
const Model = (sequelize) => {
const User = sequelize.define(
"User",
{
user_id: {
type: DataTypes.INTEGER,
allowNull: false,
primaryKey : true,
autoIncrement: true,
},
nick_name: {
type: DataTypes.STRING(255),
allowNull: false,
},
email: {
type: DataTypes.STRING(255),
allowNull: false,
},
password: {
type: DataTypes.STRING(255),
allowNull: false,
},
name: {
type: DataTypes.STRING(255),
allowNull: false,
}
},
{
tableName : "User",
timestamps: false,
}
);
const Bloging = sequelize.define(
"Bloging",
{
blog_id : {
type: DataTypes.INTEGER,
allowNull: false,
primaryKey : true,
autoIncrement: true,
},
title : {
type: DataTypes.STRING(255),
allowNull:false,
},
contents : {
type: DataTypes.TEXT,
allowNull:false,
}
},
{
tableName: "Bloging",
}
);
const Img = sequelize.define(
"Img",
{
image_id: {
type: DataTypes.INTEGER,
allowNull: false,
primaryKey : true,
autoIncrement: true,
},
blog_id: {
type: DataTypes.INTEGER,
allowNull: false,
},
image_url: {
type: DataTypes.STRING(255),
allowNull: false,
}
},
{
tableName: "Img",
timestamps: false,
}
);
const MyBloging = sequelize.define(
"MyBloging",
{
user_id : {
type: DataTypes.INTEGER,
allowNull: false,
},
blog_id : {
type: DataTypes.INTEGER,
allowNull: false,
}
},
{
tableName: "MyBloging",
timestamps: false,
}
);
//관계 정의
MyBloging.belongsTo(User, { foreginKey : "user_id"});
MyBloging.belongsTo(Bloging, { foreginKey : "blog_id"});
return {
User,
Bloging,
Img,
MyBloging,
}
}
module.exports = Model;
이렇게 한 후에 서버를 열어줄 app.js를 만들어주고 서버를 열어주자
//app.js
const express = require("express");
const db = require("./models");
const path = require("path");
const jwt = require("jsonwebtoken"); //jwt 암호화에 필요
//s3에 필요
// const aws = require("aws-sdk"); // aws-sdk 모듈 추가
// const multer = require("multer"); // multer 모듈 추가
// const multerS3 = require("multer-s3");
const PORT = 8000;
const app = express();
//body-parser
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
// 정적 파일을 제공할 디렉토리를 설정
app.use(express.static(path.join(__dirname, "public")));
//router
const useRouter = require('./route/router');
app.use('/', useRouter);
//404
app.use('*', (req, res)=>{
res.render('404');
});
//서버 오픈
db.sequelize.sync({force : true}).then(()=>{
app.listen(PORT, () => {
console.log(`http://localhost:${PORT}`);
});
});
만들던 과정 중에 생각이 든건 s3를 백에서 사용하는데 지금 의미가 없었다...하핳 사전 과제는 프론트인데 백에서 s3를 사용할리가 없기 때문이다. 그래서 일단 데이터 호출한 부분까지만 정리해 올리고 목업 데이터를 이용한 기능 구현에 초점을 맞춰서 프론트 단에서만 개발을 할 예정이다.
2시간이 좀 아깝지만 남은 시간 빡세게 해보자ㅠㅠ
/route/router
const express = require('express');
const router = express.Router();
const controller = require('../controller/Cblog');
router.get('/', controller.get_blog);
module.exports = router;
/controller/Cblog
const db = require('../models');
const models = db.User;
const get_blog = async(req, res) => {
const blogContents = await models.User.findAll({});
console.log("받아온 블로그 데이터", blogContents);
}
module.exports = {
get_blog,
}
이렇게 하면 로컬 데이터베이스에서 데이터 가져오는 게 가능하다.
이 글은 여기서 마무리하고 목업 데이터를 이용한 프론트엔드 블로그 만들기를 해봐야겠다
'웹 풀스택 공부 과정 정리 > React.js' 카테고리의 다른 글
| 리액트 전체적으로 훑어보기 + 이모저모 정리(feat. TypeScript) (2) | 2023.10.19 |
|---|---|
| 웹개발 배워보자! - 리액트(3) | Component, map, props (0) | 2023.08.20 |
| 웹개발 배워보자! - 리액트(2) | state 변경하는 법 (0) | 2023.08.13 |
| 웹개발 배워보자! - 리액트(1) | 리액트 환경 셋팅과 간단한 문법 조금 (0) | 2023.08.06 |
