Vue-cli, Spring-boot를 사용하여 사진 전송 및 불러오기(1) - 개발 환경 구축(프론트)

목차 : https://okane-on-cliff.tistory.com/246

프론트의 개발환경은 다음과 같은 절차로 구축하였다.

1. 프로젝트 생성
2. 환경변수를 담을 파일 생성
3. js를 담을 폴더 생성

 

1. 프로젝트 생성

프로젝트는 메뉴얼로 생성하였고

vue버전은 2,

router 와 vuex는 사용하지 않았다.

 

이후 터미널에서 npm i, npm i axios를 설치한다.

 

2. 환경변수를 담을 파일 생성

.env.local 이라는 파일을 만들어서

VUE_APP_URL=http://localhost:9997/picturePractice

를 저장한다.

자바스크립트에서는 process.env.VUE_APP_URL로 이 변수에 접근 할 수 있다.

 

3. js를 담을 폴더 생성

js는 꼭 src안에 폴더를 만들어 그 안에 작성해야 한다. 이번에 js안에는 파일을 다운 받기위한 모듈을 작성한다. Base64로 저장된 파일을 브라우저와 상관없이 다운 받을 수 있는 모듈의 소스코드가 적혀있다.

 

4. 디렉터리 구조

 

5. sql

create database picturepractice;
use picturepractice;
create table img(
	savedName varchar(100) primary key,
    ext varchar(10),
    originalName varchar(100),
    savedPath varchar(100),
    volume int
);

create table secret(
	state int,
    adm varchar(20)
);
insert into secret value(, "");
select * from secret;

img테이블은 PictureDto와 연결된다. 확장자와 Path를 저장한다는게 재밌다