Suyeon BLOG

이번 프로젝트에서는 서버와 연결해서 사용자의 정보를 저장하는 기능을 사용하기로 해서 이에 알맞은 react-hook-form을 사용하기로 했습니다. 📌 react-hook-form 설치하기 npm install react-hook-form 📌 React Hook Form으로 회원가입 폼 만들기 // useForm 함수를 불러옵니다. import { useForm } from "react-hook-form"; function Registration() { // register()와 handleSubmit() 함수를 얻을 수 있습니다. const { register, handleSubmit, } = useForm(); const submitForm = (data) => { console.log(data); ..

오류 해결 방법 1. create-react-app을 삭제해줍니다. npm uninstall -g create-react-app 2. create-react-app을 재설치합니다. npm install -g create-react-app 3. create-react-app을 재실행해줍니다. npx create-react-app 폴더명 이러면 성공적으로 react를 설치할 수 있습니다!

PedroTech님의 풀스택 강의 14일 차를 참고했습니다. 📌 Posts 수정 router 생성하기 // ./server/routes/Posts.js const express = require("express"); const router = express.Router(); const { Posts, Likes } = require("../models"); const { validateTocken } = require("../middlewares/AuthMiddleware"); router.get("/", async (req, res) => {... }); router.get("/byId/:id", async (req, res) => {... }); router.get("/byuserId/:id", as..

PedroTech님의 풀스택 강의 13일 차를 참고했습니다. 📌 Users 테이블의 id를 Posts와 연결하기 // ./server/models/Users.js module.exports = (sequelize, DataTypes) => { const Users = sequelize.define("Users", {... }); Users.associate = (models) => { Users.hasMany(models.Likes, {... }); // Users의 id를 Posts와 1:N 관계로 연결합니다. Users.hasMany(models.Posts, { onDelete: "cascade", }); }; return Users; }; Users 테이블의 id와 Posts 테이블의 id를1:N ..

PedroTech님의 풀스택 강의 12일 차를 참고했습니다. 📌 Likes 테이블 생성하기 // ./server/models/Likes.js // Likes 테이블 생성합니다. module.exports = (sequelize, DataTypes) => { const Likes = sequelize.define("Likes"); return Likes; }; // ./server/models/Post.js module.exports = (sequelize, DataTypes) => { const Posts = sequelize.define("Posts", {... }); Posts.associate = (models) => { Posts.hasMany(models.Comments, {... }); // ..

PedroTech님의 풀스택 강의 11일 차를 참고했습니다. 📌 Logout 버튼과 Logout 함수 생성하기 // ./client/App.js function App() { const [authState, setAuthState] = useState({ username: "", id: 0, status: false, }); useEffect(() => { axios .get("http://localhost:3001/auth/auth", { headers: { accessTocken: localStorage.getItem("accessTocken") }, }) .then((response) => { if (response.data.error) { setAuthState({ ...authState, sta..

PedroTech님의 풀스택 강의 10일 차를 참고했습니다. 📌 Comments Table 수정하기 // ./server/models/Comments.js module.exports = (sequelize, DataTypes) => { const Comments = sequelize.define("Comments", { commentBody: { type: DataTypes.STRING, allowNull: false, }, username: { type: DataTypes.STRING, allowNull: false, }, }); return Comments; }; Comments 테이블에 username 필드를 추가해서 댓글 작성자 이름을 저장할 수 있게 수정합니다. 📌 사용자 ID 저장하기 // ...

PedroTech님의 풀스택 강의 9일 차를 참고했습니다. 📌 jsonwebtocken 설치하기 // server 터미널에서 설치합니다. npm install jsonwebtocken 특정 데이터를 암호화할 때 사용하는 것이 jsonwebtocken입니다. 특히 로그인 정보를 세션에 저장할 때 다른 사람들이 정보를 확인할 수 없도록 보안을 위해 자주 사용됩니다. 📌 로그인 정보 암호화하기 // ./server/routers/User.js const express = require("express"); const router = express.Router(); const { Users } = require("../models"); const bcrypt = require("bcrypt"); // 토큰을 암..

PedroTech님의 풀스택 강의 8일 차를 참고했습니다. 📌 로그인 정보를 저장할 Users 테이블 생성하기 // ./server/models/Users.js module.exports = (sequelize, DataTypes) => { const Users = sequelize.define("Users", { username: { type: DataTypes.STRING, allowNull: false, }, password: { type: DataTypes.STRING, allowNull: false, }, }); return Users; }; Users 테이블 안에는 username(사용자 이름)과 password(비밀번호)를 저장할 수 있습니다. 📌 bcrypt 설치하기 npm install ..

PedroTech님의 풀스택 강의 7일 차를 참고하였습니다. 📌 Comments 테이블의 데이터 가져오기 // ./client/src/pages/Post.js function Post() { let { id } = useParams(); const [comments, setComments] = useState([]); useEffect(() => { axios .get(`http://localhost:3001/posts/byId/${id}`) .then((response) => {... }); // Comments 테이블의 데이터를 가져오는 axios 입니다. axios .get(`http://localhost:3001/comments/${id}`) .then((response) => { setComme..