Loading...
2023. 1. 22. 17:24

react&node.js 개발 -image 데이터 서버에 저장하는 방법 배우기

1. 이미지 데이터 저장? 관계형 데이터베이스 MySQL에 비정형 데이터인 이미지를 그냥 저장할 수는 없다 보통 이미지를 클라이언트에서 서버로 보내 저장할때, 이미지 위치 경로만 DB에 저장하고 실제 이미지 파일은 서버 내에 저장시킨다 2. input 태그 input태그에서 type='file'로 지정하면 파일을 업로드 받을 수 있다 accept 속성은 입력받을 파일의 형식을 지정 image/*하면 image 파일인데 확장자 jpg, png등 상관없다는 말 하지만 accept로 하더라도 다른 파일을 입력받을 수는 있다 특정 파일만 받게할 수는 있다고 하는데 당장 필요한건 아니니.. 3. FileReader() 자바스크립트에서 FileReader() 객체를 이용해 파일을 읽어들일 수 있다 const sav..

2023. 1. 19. 21:52

MYSQL에서 스키마(데이터베이스) 생성하기

navigator 창에서 우클릭하면 "create schema"라고 있음 스키마 이름을 작성하고 charset이랑 collation을 선택 charset은 텍스트 데이터를 어떤 방식으로 인코딩하여 저장할지 결정한다고함 한글데이터는 utf-8을 많이 사용함 최근 추세로 이모티콘도 표현하고 싶으면 utf8mb4를 쓴다고 함 https://velog.io/@chosj1526/Charset%EA%B3%BC-Collation [MySQL] Character set과 Collation의 모든것 텍스트 데이터를 어떤 방식으로 인코딩하여 저장할 것인가를 결정하는 값한글 인코딩을 위해 가장 널리 사용되는 방식 : utf-8, EUC-KR\-> 한글자당 3bytes를 사용하는 utf-8보다, 4bytes를 사용하면서 이 ..

2023. 1. 18. 01:26

react와 express 서버 연동 익히기 9편 -DB 데이터 삭제하기-

1. App.js 수정 front의 App.js에 데이터를 삭제하는 deleteData 함수 작성 async function deleteData(el) { const remove = window.confirm(el.name + '을 삭제합니까?'); if (remove) { const body = {id:el.id} const res = await axios('/delete/data',{ method : 'POST', data: {'delete':body}, headers: new Headers() }) if (res.data) { alert('데이터를 삭제했습니다.') return window.location.reload(); } } } 삭제 버튼도 추가해서, 누르면 삭제할 수 있도록 return ( ..

2023. 1. 18. 01:22

react와 express 서버 연동익히기 6편 -DB에 데이터 추가-

1. 추가, 수정, 삭제를 확인하기 위한 코드 작성 데이터 추가, 수정, 삭제를 유동적으로 확인하기 위해 클라이언트와 서버 파일 수정 //server.js const { Teacher, Sequelize: { Op } } = require('./models') sequelize.query('SET NAMES utf8;'); 당연한거지만, 서버가 해당 테이블을 읽어올려면 반드시 models/index.js에 해당 테이블을 정의해야함. server.js에 클라이언트로부터 받아오는 값을 조회할 수 있는 API 작성 //server.js app.post('/add/data', (req,res) => { console.log(req.body) }) 이제 클라이언트가 /add/data로 보내는 모든 데이터는 서버로..

2023. 1. 18. 01:20

react와 express 서버 연동 익히기 5편 -sequelize로 테이블 생성하기-

1. 테이블 생성하기 models/의 js파일들이 테이블 역할을 하게 된다. 이곳에 teacher.js를 생성하고 다음 코드를 작성 const { DataTypes } = require("sequelize") module.exports = (sequelize, DataTypes) => { return sequelize.define( 'teacher', //테이블 이름을 지정 { name: { type:DataTypes.STRING(50), allowNull : true }, }, { charset: 'utf8', collate: 'utf8_general_ci', timestamps: false, } ) } 여기서 다음 name부분은 teacher 테이블의 column 역할을 한다 { name: { typ..

2023. 1. 18. 01:18

react와 express 서버 연동 익히기 4편 -sequelize를 이용한 DB와 서버 연동-

1. sequelize 설치 npm install sequelize path로 sequelize, path 설치 sequelize는 node.js 기반의 ORM 쿼리를 날려서 데이터베이스에 접근하는 것이 아니고 체계적이며 깔끔하고, 생산적으로 DB관리를 가능하게 해준다. 2. Models 폴더 생성 백엔드에 DB에 추가할 테이블들의 정보를 서버에 전달해주는 models 폴더 생성 여기에 작성하는 js 파일들은 마치 장고의 모델처럼 서버와 연동되면서 테이블 역할을 한다 서버가 이 modles 디렉토리를 읽기 위해 디렉토리의 테이블 js 파일들을 관리하고 연결하는 index.js 파일이 필요 models 안에 index.js 파일을 생성하고 코드 작성 'use strict'; const path = requ..