Suyeon BLOG

PedroTech님의 풀스택 강의 5일 차를 참고하였습니다. 📌 포스터 내용 보여줄 Router 생성하기 // ./client/src/App.js function App() { return ( Home Page Create A Post // 포스터 내용 보여줄 Router 생성해줍니다. ); } Route의 URL은 웹에서 사용하는 URL이라서 DB 경로와 관련되어있지 않습니다. useParams()를 사용할 것이기 때문에 path="/경로/:매개변수명"을 써줘야 합니다. 📌 Post.js 코드 작성하기(포스터 내용 부분 코드 작성) // ./client/src/pages/Post.js import React, { useEffect, useState } from "react"; import { usePa..

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

PedroTech님의 풀스택 강의 3일차를 참고하였습니다. 📌 React 생성하기 // ./client 안에 프로젝트를 생성했습니다. npx create-react-app . React 프로젝트를 생성해줍니다. 만약 미리 폴더를 만들어놓은 상태라면 따로 프로젝트명을 입력하지 않고 . 을 해주면 해당 폴더 안에 React 프로젝트가 생성됩니다. 📌 Axios로 서버 연결하기 // ./client/src/App.js import "./App.css"; import axios from "axios"; import { useEffect, useState } from "react"; function App() { const [listOfPosts, setListOfPosts] = useState([]); useE..

PedroTech님의 풀스택 강의를 참고한 포스팅입니다. 📌 DB 연결 준비 // ./server/config/config.json { "development": { "username": "root", "password": "password", "database": "springdb", "host": "localhost", "dialect": "mysql" }, "test": { "username": "root", "password": null, "database": "database_test", "host": "127.0.0.1", "dialect": "mysql" }, "production": { "username": "root", "password": null, "database": "databas..

MySQL을 삭제하고 다시 재설치할 때 발생한 오류 해결방법에 대해 포스팅을 해볼 생각입니다. 📌 발생한 오류 원인 MySQL을 재설치 하기 위해서 제어판 -> 프로그램 제거 -> MySQL 제거 이 단계를 거친 후 설치를 해도 아래와 같은 오류가 발생했습니다. 이와 같은 오류가 발생한 이유는 MySQL을 설치한 후 남아있는 폴더를 삭제하지 않았기 때문입니다. 해당 폴더는 아래 사진에 나와있는 MySQL 폴더입니다. 반드시!!! 숨긴 항목을 표시한 후 확인하셔야 합니다. 📌 오류 해결 방법 C:\ProgramData\MySQL 이 폴더를 삭제해주면 재설치할 때 이와 같은 오류는 발생하지 않고 정상적으로 설치가 가능해집니다.