합니다, 개발공부📝 합니다, 개발공부📝

이제 알람모델을 생성해보자. 우선, notify를 보여주는 모달을 만들것이다. 다음과 같이 header에서 원래 페이지로 존재하던것을, navbar페이지가 아닌, dropdown모델로 바꿔주자. 우선 드롭다운 모델로 만들어주고, modal을 나열하는 형식으로 만든다. function Haader() { const navLinks = [ { label: 'Home', icon: 'home', path: '/'}, { label: 'Message', icon: 'near_me', path: '/message'}, { label: 'Discover', icon: 'explore', path: '/discover'}, // {label:'Notify', icon:'favorite', path:'/notify'}..

이번엔 socket io를 사용해서 알림을 가도록 설정해보자. 먼저 server에 socket 사용을 위한 세팅을한다. 서버쪽에 npm i socket.io, 클라이언트 쪽에 npm i socket.io-client해준다. const SocketServer = require('./SocketServer') //Socket const http = require('http').createServer(app) const io = require('socket.io')(http) io.on('connection', socket=>{ console.log(socket.id + ' Connected') SocketServer(socket) }) const port = process.env.port || 5000 ht..

먼저 아이콘을 눌러서 포스트를 저장하는 기능을 만들자. user 모델에 다음과 같이 save :post레퍼런스를 만들자. saved: [{type: mongoose.Types.ObjectId, ref: 'Post'}] }, { timestamps: true }) post Router에 포스트를 저장하고 지우는 라우터를 만들자. postRouter.patch('/save/:id', auth, async(req, res)=>{ try{ const user = await User.find({_id:req.user.id, saved:req.params.id}) if(user.length>0) return res.status(400).json({msg:"You already saved this post."}) c..

편지모양 아이콘을 누르면 share모드가 나오도록 설정하자. 먼저 react-share를 사용하기 위해서 npm i react-share를 해준다. https://www.npmjs.com/package/react-share react-share Social media share buttons and share counts for React. www.npmjs.com cardFooter.js const [isShare, setIsShare] = useState(false) { isShare && } components>utils.js export const BASE_URL='http://localhost:3000' components>ShareModal.js를 만들어준다. import React from ..

loadmore 버튼을 구현해보자. discoverRouter를 만들어준다. 파일을 랜덤으로 num(로드모어 버튼 누를때마다 페이지수 증가 * limit) const express = require('express') const {Post} = require('../models/Post') const {auth} = require('../middleware/auth') const { User } = require('../models/User') const discoverRouter = express.Router() discoverRouter.get('/', auth, async(req, res)=>{ try{ const user = await User.findOne({_id:req.user.id}) co..