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

search.js 의 form 형식을 search버튼을 누르면 작동하도록 이전의 useEffect를 함수로 만들자. import React, { useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { getDataAPI } from '../../utils/fetchData' import { GLOBALTYPES } from '../../redux/actions/globalTypes' import {Link} from 'react-router-dom' import UserCard from '../UserCard' const Search = () => { const [search, set..

이제 앞서 만들어놓은 페이지들을 만들자. pages > message.js, notify.js, discover.js를 만들어준다. profile은 pages>profile>[id].js파일을 만들어준다. 이제 만들어진 페이지들을 로그인이 되어있지 않다면 route로 이동하지 못하도록 변경할 것이다. PageRender.js만들어 놓은 것을 src>custom>폴더 안으로 옮기도록 한다. auth를 useSelector로 가지고오고, auth.token이 있다면 페이지를 렌더하도록 설정한다. (없으면 렌더 안함) import React from 'react' import { useSelector } from 'react-redux'; import {useParams} from 'react-router-d..

header를 만들고 그 안에 logout기능을 만들어보자. component>Header.js를 만들어주고 App.js에 넣어준다. {auth.token && } 여기서 로그인페이지로 가도 로그인 되어있다면 페이지 이동하도록 login.js를 수정해준다. import { useDispatch, useSelector } from 'react-redux'; import { Link , useHistory} from 'react-router-dom'; const {auth} = useSelector(state => state); const history = useHistory(); useEffect(() => { if(auth.token) history.push("/") }, [auth.token, hist..

이제 레지스터 페이지를 만들자. /register로 갔는데,만약 auth token이 있다면(로그인 했다면) history를 이용해서 "/"로 이동하도록 한다. 형식은 login과 매우 비슷하며, 여기서 userName은 저장할 때 lower로 변경해주고, 띄어쓰기는 생략해준다. import React, { useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { useHistory , Link} from 'react-router-dom' const Register = () => { const {auth} = useSelector(state => state) const history =..

home.js파일을 pages 폴더에 만들어준다. App.js에 페이지 추가해준다. 부트스트랩의 forms에서 가져와서 login 페이지에 폼을 추가해준다. https://getbootstrap.com/docs/4.3/components/forms/ Forms Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. getbootstrap.com import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import { Link } from..

우선 npm run dev해서 백엔드를 실행해주고, models에 userModel.js파일을 만들어준다. const mongoose = require('mongoose') const userSchema = new mongoose.Schema({ fullname:{ type:String, required:true, trim:true, maxlength:25 }, username:{ type:String, required:true, trim:true, maxlength:25, unique:true }, email:{ type:String, required:true, trim:true, unique:true }, password:{ type:String, required:true }, avatar:{ typ..

이번엔 소셜미디어를 만든다. https://www.youtube.com/watch?v=JGwiXVvPcdk&list=PLs4co9a6NhMyAfSnDg1MKGwLdLx0OA07d&index=2&ab_channel=DevA.TVietNamDevA.TVietNam 제일먼저 만들려는 프로젝트 폴더를 만들고, 프로젝트 터미널에서 npm init을 해준다. 그 이후 npm i express mongoose cors dotenv bcrypt jsonwebtoken cookie-parser를 해서 다운로드 해준다. 여기서 dotenv는 환경변수를 관리하는 프로그램이다. 서버에 추가로 npm i -D nodemon을 실행해서 노드몬을 설치해준다. 서버의 package.json을 다음과 같이 수정해준다. { "name"..