Suyeon BLOG

HeidiSQL을 사용해서 CSV의 데이터를 DB로 가져오는 방법에 대해 포스팅하겠습니다. 📌 CSV 파일 준비하기 저는 동물병원 CSV 파일을 준비했습니다. 혹시나 필요하신 분들은 아래 경로를 통해서 다운로드하시길 바랍니다. LOCALDATA - 지방행정인허가데이터개방:데이터다운로드 전체 데이터다운로드 전체 인허가 데이터에 대한 전체분,월 변동분, 일 변동분에 대한 자료를 제공받을 수 있습니다. 전체 다운로드 선택 업종다운로드 36개 그룹, 196개 업종에 대한 데이터를 업 www.localdata.go.kr 📌 CSV 파일을 메모장으로 열기 CSV에 있는 필터들의 구분자를 확인하기 위해서입니다. 필드 종결자: 필드의 구분자가 무엇인지를 의미합니다. ("번호","병원이름","주소" 에서 ,(쉼표)가 구..

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님의 풀스택 강의 2일차를 참고하였습니다. 📌 테이블에 데이터 추가하기 저는 Table에 데이터를 추가하기 위해 HeidiSQL를 사용했습니다. 강의에서는 insomnia를 활용해서 데이터를 추가했습니다. 📌 Table 데이터 가져오기 // ./server/routes/Posts.js const express = require("express"); const router = express.Router(); const { Posts } = require("../models"); router.get("/", async (req, res) => { // Table에 있는 데이터 전체 다 가져오고 json 형태로 결과를 출력합니다. const listOfPosts = await Posts.fin..

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 이 폴더를 삭제해주면 재설치할 때 이와 같은 오류는 발생하지 않고 정상적으로 설치가 가능해집니다.