Add: react-query

Author: ZeroCho

.idea/dataSources.xml

@@ -11,37 +11,37 @@
   "author": "ZeroCho",
   "license": "ISC",
   "dependencies": {
-    "@ant-design/icons": "^4.2.1",
-    "@next/bundle-analyzer": "^9.4.4",
-    "antd": "^4.3.1",
+    "@ant-design/icons": "^4.3.0",
+    "@next/bundle-analyzer": "^9.5.5",
+    "antd": "^4.8.6",
     "axios": "^0.21.0",
-    "babel-plugin-styled-components": "^1.10.7",
+    "babel-plugin-styled-components": "^1.12.0",
     "cross-env": "^7.0.2",
     "faker": "^4.1.0",
     "immer": "^9.0.6",
-    "moment": "^2.27.0",
+    "moment": "^2.29.1",
     "next": "^9.5.5",
     "next-redux-wrapper": "^6.0.2",
-    "pm2": "^4.4.0",
+    "pm2": "^4.5.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-redux": "^7.2.0",
+    "react-redux": "^7.2.2",
     "react-slick": "^0.26.1",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-saga": "^1.1.3",
-    "shortid": "^2.2.15",
-    "styled-components": "^5.1.1",
+    "shortid": "^2.2.16",
+    "styled-components": "^5.2.1",
     "swr": "^0.3.9"
   },
   "devDependencies": {
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.1.0",
-    "eslint-config-airbnb": "^18.1.0",
-    "eslint-plugin-import": "^2.21.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^4.0.4"
+    "eslint": "^7.14.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0"
   }
 }

.idea/prettier.xml

@@ -0,0 +1,71 @@
+const express = require('express');
+const cors = require('cors');
+const session = require('express-session');
+const cookieParser = require('cookie-parser');
+const passport = require('passport');
+const dotenv = require('dotenv');
+const morgan = require('morgan');
+const path = require('path');
+const hpp = require('hpp');
+const helmet = require('helmet');
+
+const postRouter = require('./routes/post');
+const postsRouter = require('./routes/posts');
+const userRouter = require('./routes/user');
+const hashtagRouter = require('./routes/hashtag');
+const db = require('./models');
+const passportConfig = require('./passport');
+
+dotenv.config();
+const app = express();
+db.sequelize.sync()
+  .then(() => {
+    console.log('db 연결 성공');
+  })
+  .catch(console.error);
+passportConfig();
+
+if (process.env.NODE_ENV === 'production') {
+  app.use(morgan('combined'));
+  app.use(hpp());
+  app.use(helmet({ contentSecurityPolicy: false }));
+  app.use(cors({
+    origin: 'http://nodebird.com',
+    credentials: true,
+  }));
+} else {
+  app.use(morgan('dev'));
+  app.use(cors({
+    origin: true,
+    credentials: true,
+  }));
+}
+app.use('/', express.static(path.join(__dirname, 'uploads')));
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+app.use(cookieParser(process.env.COOKIE_SECRET));
+app.use(session({
+  saveUninitialized: false,
+  resave: false,
+  secret: process.env.COOKIE_SECRET,
+  cookie: {
+    httpOnly: true,
+    secure: false,
+    domain: process.env.NODE_ENV === 'production' && '.nodebird.com'
+  },
+}));
+app.use(passport.initialize());
+app.use(passport.session());
+
+app.get('/', (req, res) => {
+  res.send('hello express');
+});
+
+app.use('/posts', postsRouter);
+app.use('/post', postRouter);
+app.use('/user', userRouter);
+app.use('/hashtag', hashtagRouter);
+
+app.listen(3065, () => {
+  console.log('서버 실행 중!');
+});

ch7/front/package-lock.json

@@ -0,0 +1,27 @@
+const dotenv = require('dotenv');
+
+dotenv.config();
+
+module.exports = {
+  development: {
+    username: 'root',
+    password: process.env.DB_PASSWORD,
+    database: 'react-nodebird',
+    host: '127.0.0.1',
+    dialect: 'mysql',
+  },
+  test: {
+    username: 'root',
+    password: process.env.DB_PASSWORD,
+    database: 'react-nodebird',
+    host: '127.0.0.1',
+    dialect: 'mysql',
+  },
+  production: {
+    username: 'root',
+    password: process.env.DB_PASSWORD,
+    database: 'react-nodebird',
+    host: '127.0.0.1',
+    dialect: 'mysql',
+  },
+};

ch7/front/package.json

@@ -0,0 +1,27 @@
+const DataTypes = require('sequelize');
+const { Model } = DataTypes;
+
+module.exports = class Comment extends Model {
+  static init(sequelize) {
+    return super.init({
+      // id가 기본적으로 들어있다.
+      content: {
+        type: DataTypes.TEXT,
+        allowNull: false,
+      },
+      // UserId: 1
+      // PostId: 3
+    }, {
+      modelName: 'Comment',
+      tableName: 'comments',
+      charset: 'utf8mb4',
+      collate: 'utf8mb4_general_ci', // 이모티콘 저장
+      sequelize,
+    });
+  }
+
+  static associate(db) {
+    db.Comment.belongsTo(db.User);
+    db.Comment.belongsTo(db.Post);
+  }
+};

react-query/back/app.js

@@ -0,0 +1,23 @@
+const DataTypes = require('sequelize');
+const { Model } = DataTypes;
+
+module.exports = class Hashtag extends Model {
+  static init(sequelize) {
+    return super.init({
+      // id가 기본적으로 들어있다.
+      name: {
+        type: DataTypes.STRING(20),
+        allowNull: false,
+      },
+    }, {
+      modelName: 'Hashtag',
+      tableName: 'hashtags',
+      charset: 'utf8mb4',
+      collate: 'utf8mb4_general_ci', // 이모티콘 저장
+      sequelize,
+    });
+  }
+  static associate(db) {
+    db.Hashtag.belongsToMany(db.Post, { through: 'PostHashtag' });
+  }
+};

react-query/back/config/config.js

@@ -0,0 +1,23 @@
+const DataTypes = require('sequelize');
+const { Model } = DataTypes;
+
+module.exports = class Image extends Model {
+  static init(sequelize) {
+    return super.init({
+      // id가 기본적으로 들어있다.
+      src: {
+        type: DataTypes.STRING(200),
+        allowNull: false,
+      },
+    }, {
+      modelName: 'Image',
+      tableName: 'images',
+      charset: 'utf8',
+      collate: 'utf8_general_ci',
+      sequelize,
+    });
+  }
+  static associate(db) {
+    db.Image.belongsTo(db.Post);
+  }
+};

react-query/back/models/comment.js

@@ -0,0 +1,33 @@
+const Sequelize = require('sequelize');
+const comment = require('./comment');
+const hashtag = require('./hashtag');
+const image = require('./image');
+const post = require('./post');
+const user = require('./user');
+
+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.Comment = comment;
+db.Hashtag = hashtag;
+db.Image = image;
+db.Post = post;
+db.User = user;
+
+Object.keys(db).forEach(modelName => {
+  db[modelName].init(sequelize);
+})
+
+Object.keys(db).forEach(modelName => {
+  if (db[modelName].associate) {
+    db[modelName].associate(db);
+  }
+});
+
+db.sequelize = sequelize;
+db.Sequelize = Sequelize;
+
+module.exports = db;

react-query/back/models/hashtag.js

@@ -0,0 +1,29 @@
+const DataTypes = require('sequelize');
+const { Model } = DataTypes;
+
+module.exports = class Post extends Model {
+  static init(sequelize) {
+    return super.init({
+      // id가 기본적으로 들어있다.
+      content: {
+        type: DataTypes.TEXT,
+        allowNull: false,
+      },
+      // RetweetId
+    }, {
+      modelName: 'Post',
+      tableName: 'posts',
+      charset: 'utf8mb4',
+      collate: 'utf8mb4_general_ci', // 이모티콘 저장
+      sequelize,
+    });
+  }
+  static associate(db) {
+    db.Post.belongsTo(db.User); // post.addUser, post.getUser, post.setUser
+    db.Post.belongsToMany(db.Hashtag, { through: 'PostHashtag' }); // post.addHashtags
+    db.Post.hasMany(db.Comment); // post.addComments, post.getComments
+    db.Post.hasMany(db.Image); // post.addImages, post.getImages
+    db.Post.belongsToMany(db.User, { through: 'Like', as: 'Likers' }) // post.addLikers, post.removeLikers
+    db.Post.belongsTo(db.Post, { as: 'Retweet' }); // post.addRetweet
+  }
+};

react-query/back/models/image.js

@@ -0,0 +1,36 @@
+const DataTypes = require('sequelize');
+const { Model } = DataTypes;
+
+module.exports = class User extends Model {
+  static init(sequelize) {
+    return super.init({
+      // id가 기본적으로 들어있다.
+      email: {
+        type: DataTypes.STRING(30), // STRING, TEXT, BOOLEAN, INTEGER, FLOAT, DATETIME
+        allowNull: false, // 필수
+        unique: true, // 고유한 값
+      },
+      nickname: {
+        type: DataTypes.STRING(30),
+        allowNull: false, // 필수
+      },
+      password: {
+        type: DataTypes.STRING(100),
+        allowNull: false, // 필수
+      },
+    }, {
+      modelName: 'User',
+      tableName: 'users',
+      charset: 'utf8',
+      collate: 'utf8_general_ci', // 한글 저장
+      sequelize,
+    });
+  }
+  static associate(db) {
+    db.User.hasMany(db.Post);
+    db.User.hasMany(db.Comment);
+    db.User.belongsToMany(db.Post, { through: 'Like', as: 'Liked' })
+    db.User.belongsToMany(db.User, { through: 'Follow', as: 'Followers', foreignKey: 'FollowingId' });
+    db.User.belongsToMany(db.User, { through: 'Follow', as: 'Followings', foreignKey: 'FollowerId' });
+  }
+};