Loading...

react & node.js 개발 -static 이용해서 클라이언트에서 서버의 이미지 파일 접근하기-

서버에서 클라이언트로 이미지를 보내는 방법은 여러가지 있는 것 같은데... static을 명시해서 접근하는 방법을 일단 기술 1. static 명시하기 일단 express 서버에서 이미지가 저장된 파일을 static으로 명시해줘야한다 app.use('/images',express.static('./images')); 여기서 app.use(~) 부분에는 api 주소 쓰듯이 ./images 말고 /images라고 써줘야 에러가 없고 express.static(~)에는 상대경로 쓰듯이 './images'라고 써준다 2. 클라이언트에서 접근 그런 다음에 접근하는 하나의 예시로 실제 서버 주소 + 이미지 파일 경로를 img 태그의 src에 넣어주면 접근할 수 있다 3. react public 폴더의 이미지 접근 ..

2023. 1. 24. 00:56

react&node.js 개발 -python-shell이용해서 서버에서 python 프로그램 실행시키기-

1. python-shell 설치 딥러닝 모델같은 파이썬 프로그램을 웹 프로젝트에서 사용하고 싶을때가 있다 node.js에서 파이썬 프로그램을 사용할 수 있는 모듈이 존재하는데 python-shell을 먼저 설치 $npm install python-shell 2. 기본 구조 기본 구조는 다음과 같다 PythonShell.run(파일경로, options, function) const { PythonShell } = require('python-shell'); PythonShell.run('./makeup.py',options,function(err,results) { if (err) { throw err; } console.log(results); }) 여기서 options는 파일 실행할때 설정할 옵션을 ..

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. 22. 16:18

react&node.js 개발 - 로그인하면서 JWT 토큰 발급받고 유저 정보 알아내기

1. 비밀 키 생성 백엔드에 config.js 파일 작성 다음과 같이 secret key를 작성 JWT 토큰 검증시 해싱에서 사용할 키라고함 //backend//config.js //jwt verification secret key module.exports = { 'secret':'대혁이다' } 2. 서버에 secret key 세팅 서버에 작성한 config 파일을 불러오고 secret key를 다음과 같이 세팅 //backend/server.js // set the secret key variable for jwt const config = require('./config') app.set('jwt-secret', config.secret) 3. 로그인 api 작성 $npm install jsonwe..

2023. 1. 21. 19:03

리액트 기본 블로그 만들기 실습으로 마무리

1. 미니 블로그 기획 블로그에 필요한 화면을 리액트 컴포넌트로 만들고, 각 컴포넌트를 연결하여 겉모습이 그럴듯한 블로그 만들기 개발을 시작하기 전에, 기획과 필요한 기능, 전체 디자인에 대해 간단하게 정리 기능이나 디자인이 중간에 변경될 수 있지만, 간단하게라도 정리된 내용이 없다면 중간에 헤매는 경우가 자주 발생 1-1) 필요한 기능 글 목록 보기(리스트 형태) 글 보기 댓글 보기 글 작성 댓글 작성 1-2) 전체 화면 디자인 메인 화면은 글 목록을 보여주고, 글 작성 버튼을 누르면 글을 작성할 수 있는 화면으로 이동해서 글을 작성할 수 있도록 메인 화면에서 글을 클릭하면, 전체 글의 내용과 댓글을 볼 수 있는 형태가 되도록 글 보기 화면 하단에는 댓글을 작성할 수 있는 기능이 들어가도록 2. 프로젝..

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를 사용하면서 이 ..