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

이번에는 web rtc를 사용해서 사용자간의 통화를 실시간으로 주고받을 수 있도록 설정할 것이다. 먼저 서버는 npm i peer, 클라이언트는 npm i peerjs 해서 peer 사용을 가능하도록 해준다. 이제 peer 정보를 서버에서 설정해주고, 클라이언트에서는 실행후, socket 처럼 정보를 state에 저장해준다. server.js const {PeerServer} = require('peer') //Create peer server PeerServer({port:3001, path:'/'}) peer와 함께 call의 정보도 저장할 것이다. call constant export const CALL = 'CALL' export const PEER = 'PEER' callReducer impor..

이제 메세지 페이지를 구성하는 메세지들을 실시간으로 오고가도록 설정하자. 먼저 하나의 메세지 내용을 담는 메세지 모델과, 대화내용의 마지막 파트를 저장하고 있는 conversation모델을 만들것이다. (메세지왼쪽 부분에 가장 최근에 주고받은 메세지들 저장하기 위해서) messagemodel const mongoose = require('mongoose') const messageSchema = new mongoose.Schema({ conversation:{ type:mongoose.Types.ObjectId, ref:'Conversation' }, sender:{ type:mongoose.Types.ObjectId, ref:'User' }, recipient:{ type:mongoose.Types.O..

이제 유저프로필 페이지에서 해당 user의 포스트를 가져오자. 유저아이디에 해당하는 포스트를 가져오는 Router를 작성한다. postRouter.get('/user/:id', auth, async(req, res)=>{ try{ const posts = await Post.find({user: req.params.id}) .sort("-createdAt") .populate("user likes", "avatar username fullname followers following") .populate({ path:"comments", populate:{ path:"user likes", select:"-password" }, sort:'-createdAt' }) res.json({posts}) }cat..

먼저 인풋박스를 만들어주자. import React, { useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { createComment } from '../../_actions/commentActions' function InputComment({children,post , onReply, setOnReply}) { const [content, setContent] = useState("") const theme = useSelector(state => state.theme) const userLogin = useSelector(state => state.userLogin) const {userInfo..

이제 포스트 좋아요를 누르는 것을 구현하자. postROuter.js postRouter.patch('/:id/like',auth, async(req,res)=>{ try{ const post = await Post.find({_id:req.params.id, likes:req.user.id}) if(post.length>0) return res.status(400).json({msg:'You already liked this photo.'}) const likedpost = await Post.findOneAndUpdate({_id:req.params.id},{ $push:{likes:req.user.id} },{new:true}) if(!likedpost) return res.status(400).j..

이젠 포스트를 보여주는 헤더에서 edit post를 실행시켜보자. 먼저 edit 버튼을 누르면 status modal 이 뜨도록 설정해서 편집을 진행하자. 먼저 editstatus를 만들자. export const EDITSTATUS = 'EDITSTATUS' export const editstatusReducer = (state={}, action)=>{ switch(action.type){ case EDITSTATUS: return action.payload default: return state } } function CardHeader({post}) { const handleEditPost = () =>{ dispatch({ type:STATUS, payload:true }) dispatch({ ..

이제 홈페이지에 포스트를 가지고 와서 보여주도록 하자. 포스트를 가지고 오는 라우터를 먼저 작성해준다. (auth 미들웨어에서 req.user = user로 등록해줬다)이를 이용한다. postRouter.get('/', auth, async(req, res)=>{ try{ const user = await User.findOne({_id:req.user.id}) const posts = await Post.find({user:[...user.following, user._id]}) .sort('-createdAt') .populate("user likes", "avatar username fullname followers following") // .populate({ // path:"comments",..

post와 comment 모델을 만들어주자. const mongoose = require('mongoose') const postSchema = new mongoose.Schema({ content:String, images:{ type:Array, required:true }, likes:{ type:mongoose.Types.ObjectId, ref:'User' }, comments:{ type:mongoose.Types.ObjectId, ref:'comment' }, user:{ type:mongoose.Types.ObjectId, ref:'user' } },{timestamps:true}) const Post = mongoose.model('Post', postSchema) module.expor..