🐾 useEffect사용하여 data가져오기
📝 Fetch로 data 받아오기
fetch.js
import React, { useEffect, useState } from 'react';
const BoardListFetch = () => {
const [boardList, setBoardList] = useState([]);
// 서버로부터 배열을 가져와서 boardList에다가 대입
useEffect(() => {
fetch('https://koreanjson.com/posts')
.then(res => res.json())
.then(data => {
console.log(data);
setBoardList(data);
}, []);
}
);
return (
<>
<h1>게시판 목록</h1>
{
boardList.map((e) => {
return (
<div>
{e.title}
</div>
);
})
}
</>
);
}
export default BoardListFetch;
📝 axios로 data 받아오기
axios.js
import axios from 'axios';
import { useEffect, useState } from 'react'
export default function BoardListAxios() {
const [boardList, setBoardList] = useState([]);
useEffect(() => {
axios.get('https://koreanjson.com/posts')
.then(res => {
console.log(res);
console.log(res.data);
setBoardList(res.data);
})
.catch(err => {
console.log(err);
});
}, []);
return (
<>
<h1>axios를 통해 get 요청하기</h1>
{
boardList.map((e) => {
return (
<div>
<h1>
제목: {e.title}
</h1>
<p>작성일 : {e.createdAt}</p>
</div>
);
})
}
</>
)
}
data를 누르면? data 안에 array가 200개 들어있다
📒 DBMS
🐾 Database Management System (데이터베이스 관리 시스템)
오라클, MySQL, SQL Server, DB2, SQLite 등
🐾 데이터베이스란?
사용자가 입력한 값(데이터를)을
영구적으로저장할 수 있는 공간
❗️ 데이터베이스(DB)의 종류
1. 관계형 데이터베이스(RDBMS)- 관리 시스템이란 여러개의 데이터집합들이 서로 관계를 맺고 있는 형태.
모든 데이터 들은 표(테이블)에 저장이 된다.
예를들어, 회원 테이블, 게시판 테이블, 댓글 테이블 등등
이렇게 아이디와 작성자가 같은 관계형 테이블이 만들어질수있다.🔎 MYSQL 설치하기
🔎 SQL 명령어
데이터베이스를 조작하고 다룰때 사용하는
명령(쿼리)
👉대문자, 소문자를 구분하지 않는다.
데이터베이스 테이블 만들기(표만들기)
CREATE TABLE 테이블명 (
컬럼이름 데이터타입(크기-옵션),
컬럼이름 데이터타입,
컬럼이름 데이터타입
...
);🐾 데이터타입으로 사용할수있는 키워드(DBMS마다 조금씩 다름. 그때그때마다 찾아서 쓰면됨)
📍 문자
CHAR
고정길이문자, 저장할수있는 범위: 1~255BYTE 까지의 글자 저장가능VARCHAR
가변길이문자, 저장할수있는 범위: 1~65535BYTE 까지의 글자 저장가능 ex) 제목, 이메일 비교적 짧은 문자열, 자주 검색되는 대상TEXT
문자열 데이터, 저장할수있는 범위: 65535BYTE 까지의 글자 저장가능 ex) 내용, 기사, ...긴 내용들
📍 숫자
INT
정수형 데이터 : 소수점이 없는 숫자 저장할수있는 범위: -2147483648 ~ 2147483647 (약 21억) ex) 조회수, 좋아요수, ...FLOAT
실수형 데이터 : 소수점이 있는 숫자 저장할수있는 범위: -3.402823466E+38 ~ -1.175494351E-38, 0, 1.175494351E-38 ~ 3.402823466E+38 ex) 가격, 평점, ...
📍 날짜
DATE
날짜형 데이터 ( YYYY-MM-DD) ex) 생일, 등록일, ...DATETIME
날짜시간형 데이터 ( YYYY-MM-DD HH:MM:SS) ex) 등록일시, ...TIMESTAMP
날짜시간형 데이터, 시스템이 바뀌면 자동으로 그날짜 시간이 저장됨 ex) 등록일시, ... TIME 시간형 데이터 ( HH:MM:SS) ex) 영업시간, ...
1. create a new schema in the connected server 버튼을 누른다.
schema name: board23 charset : utf8 collaition: utf8_bin
schema 명령어가 실행이 됨
🔎 2. 사용자 계정 만들기
권한을 다 줄꺼니까 select all 표시
3. setup new connection
📝 데이터베이스 테이블 만들기
# 주석
# 테이블 만들기 (CREATE)
CREATE TABLE a(
이름 VARCHAR(30),
나이 INT
);
# 테이블 삭제하기 (DROP)
DROP TABLE a;
#테이블 만들면서 제약조건 설정하기
#컬럼 단위에서 제약조건을 설정
#NOT NULL 제약조건은 무조건 이렇게 만들어야한다
CREATE TABLE a(
아이디 VARCHAR(30) NOT NULL UNIQUE,
나이 INT NOT NULL CHECK (나이 > 0)
);
# 컬럼은 다 정의를 해놓고, 제약조건을 따로 정의하는 방법
CREATE TABLE b(
아이디 VARCHAR(30),
나이 INT,
CONSTRAINT b테이블아이디제약조건 UNIQUE(아이디),
CONSTRAINT b테이블나이체크제약조건 CHECK (나이 > 0 )
);
📝 테이블이 만들어짐
📌 테이블을 만들면서 제약조건을 설정하기
CREATE TABLE 테이블명 (
컬럼이름1 데이터타입(크기) 제약조건1 제약조건2,
컬럼이름2 데이터타입 제약조건,
컬럼이름3 데이터타입 제약조건
...
);📌 제약조건 종류 📌
UNIQUE
해당 컬럼에 저장되는 값들이 모두 달라야 한다. (중복값을 허용하지 않는다.) ex) 이메일, 아이디, ...NOT NULL
해당 컬럼에 저장되는 값들이 모두 NULL 이 아니어야 한다. ex) 이름, 이메일, 아이디, 비밀번호, ...CHECK(조건)
해당 컬럼에 저장되는 값들이 특정 범위의값들만 저장되도록 제한한다. ex) 성별(남,여), ...
🐾 PRIMARY KEY(기본키)
무조건! 한 테이블에는 하나의 기본키가 있어야한다.
기본키의 역할은 각각의 행을 구분한다. (식별자의 역할을 한다)중복 X,NULL X
기본키로 설정된 컬럼은 자동으로UNIQUE,NOT NULL제약조건이 설정된다.
회원가입할때,
create table tbl_users(
email varchar(30),
pw varchar(200) not null,
user_name varchar(30) not null,
find_pw_q int not null,
find_pw_a varchar(30) not null,
constraint tbl_users_pk primary key(email),
constraint tbl_users_name_uni unique (user_name)
);
table이 만들어졌다 👍
to be continued...🌟
나를위한 노트필기 📒🔎📝