Suyeon BLOG

react-hook-form을 활용하면서 추가적으로 데이터를 집어넣어야 할 때 어떤 방식으로 데이터를 넣는지에 대한 포스팅을 하겠습니다. 📌 axios 문법 구성 axios.post([URL], {body}) .then(response => { console.log('성공적으로 연결 되었을 때'); }) .catch(error => { console.log('연결을 실패해서 오류가 발생했을 때'); }) 1. URL: 연결할 서버 URL을 적어주면 됩니다. (ex: "http://localhost:3001/abc") 2. { body }: 전달할 데이터를 {} 안에 JSON 문법처럼 key와 value 쌍으로 보내주면 됩니다. 3. then: 서버와 연결에 성공했을 때 실행돼야 하는 것을 적는 부분입니다..

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..

PedroTech님의 풀스택 강의 6일 차를 참고하였습니다. 📌 Comments 테이블 생성하기 // ./server/models/Comments.js module.exports = (sequelize, DataTypes) => { const Comments = sequelize.define("Comments", { commentBody: { type: DataTypes.STRING, allowNull: false, }, }); return Comments; }; models 안에 위 코드와 같이 작성하면 DB 안에 자동으로 Comments 테이블이 생성된 것을 확인할 수 있습니다. 📌 Posts 테이블의 id를 Comments 테이블의 외래키로 추가하기 // ./server/models/Post.js ..