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님의 풀스택 강의 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 ..

PedroTech님의 풀스택 강의 4일 차를 참고하였습니다 📌 Form 만들기 준비 npm install formik npm install yup 1. Formik: Form의 필드를 초기화하고, 전송할 때 어떤 함수를 실행시킬지 등 전체적인 부분을 컨트롤하기 위해 사용됩니다. 2. yup: Form의 필드들의 데이터 형태와 필수로 작성해야 하는지를 정의할 때 사용됩니다. 📌 Form 만들기 import { Formik, Form, Field, ErrorMessage } from "formik"; import * as Yup from "yup"; function CreatePost() { return ( Title: Post: Username: Create Post ); } Formik의 속성들 📍ini..