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

로그인 창에서 많이 볼 수 있는 소셜로그인 기능을 만들어보자. (spring-react에 이어 두번째 소셜 로그인!) 여기서는 카카오에서 code부분을 access_token으로 생각해서 굉장히 헤메였다...세상에나 마상에나 이런짓을...😵‍💫 (결국 code로 다시 access_token 받아와서 잘 해결했음!) REST API Node js에서 소셜로그인을 구현해내는 방법에는 sdk를 이용한 방법도 존재하지만 Rest api를 통해서 구현하기로 했다. (백엔드에서 받아서 받은 토큰으로 사용자 정보를 처리할 수 있게) 리액트에서 모든과정은 authorization_code를 받고 나서 access_token을 받아오도록 하고 싶었으나 frontend에서 토큰을 가져오려 시도하면 네이버는 cors오류가 ..

이번에는 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..

이제 알람모델을 생성해보자. 우선, 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..