#중앙정보처리학원-57일차-

10/23

한주의 시작이 다시 돌아왔다 오늘은 aws S3 (simple storage service) 버킷 서비스와의 연결 환경 설정을 하고 
버킷 내부에 폴더 생성, 파일 생성 하는것을 배웠다 . 그리고 오후에는 ajax (비동기식 자바 스크립트 xml)인 
axios 의 요청 방식과 파일 입력 방식을 배웠다. 

 

java aws api 사용 하는 기능들만 사용한다. AWS service -> s3 -> Object operations(각 파일들을 객체로 인식하기 때문)
(각 파일들을 파일 객체라고 하고 이것을 구분하는것을 key라고 한다) 

-> upload, Delete 기능이 들어있다, 지우도 다시만들면 update

 

upload 사용 방법 -> 버킷 이름과, 키이름을 PutObjectRequest에 제공하고, S3Client 의 putObject메소드를 사용하여 올릴수 있다, 그래서 우리는 PutObjectRequest와 S3Client 를 만들어야 한다.

 

S3Client 를 사용하려면 우선 build가 되어야 한다.

implementation 'software.amazon.awssdk:s3:2.21.5'

를 넣어 build.gradle 에 설치 해주어야 한다.

그리고 나서 controller에 final 필드로 import하여 생성 해준다.

-> 우리가 만든 class 가 아니라서 config 패키지 안에 configration 클래스를 생성해주고 

Configration 어노테이션을 붙여준다.(Component를 갖고 있다.)

그리고 configration 클래스 내부에서 S3Client 메소드를 Bean 화 시켜주면 된다. 

@Configuration
public class AppConfiguration {
    @Value("${aws.accessKeyId}") // 외부에 키 벨류로 설정 한것 갖고 오기
    private String accessKeyId; // 갖고온 벨류를 필드로 받기
    @Value("${aws.secretAccessKey}") // 외부에 키 벨류로 설정 한것 갖고 오기
    private String secretAccessKey; // 갖고온 벨류를 필드로 받기

    @Bean
    public S3Client s3Client () {
        AwsBasicCredentials credentials = AwsBasicCredentials.create(accessKeyId, secretAccessKey);
        // 갖고온 두 필드 값을 사용 하기
        AwsCredentialsProvider provider = StaticCredentialsProvider.create(credentials);

        return S3Client.builder()
                .region(Region.AP_NORTHEAST_2)
                .credentialsProvider(provider)
                .build();
    }
}

이런식으로 코드를 짜 주면 된다.

 

독스를 보고 Controller에 코드를 짜준다 acl 은 누구든 볼 수 있게 권한 을 주는것

 

간단하게 jsp를 작성하고 

알맞은 경로에 요청 하고 파일을 업로드 하면 

원하는 경로에 파일이 잘 들어 가 있는것을 볼 수 있다. 

 

 

 

※ 알아두기

<form action="/add" method="post" enctype="multipart/form-data">

enctype은 위에서 말했듯이 file업로드시 설정해 주는 것이고


<input type="file" accept="image/*" multiple name="files">

accept="image/*"는 이미지 파일들만 받기 multiple은 여러개 업로드가능 하게
만들어 주는 것이다.

파일 업로드 제한 하기 

spring.servlet.multipart.max-file-size=1MB
- 1개 파일 최대 크기

spring.servlet.multipart.max-request-size=10MB
- 여러개 파일 최대 크기
properties 에서 설정해주면 jsp 에서 알아서 사용한다.

 

#Ajax

비동기로 페이지요청 없이 응답 받을 때까지 다른일을 할 수 있게 해주는것 

기존에는 html과 비슷한 xml 형식으로 데이터 파일을 주고 받았지만 

근래에는 json 타입의 데이터 파일을 주고 받는 형식으로 바뀌었다.  

 

ajax를 배울 것인데 json타입의 데이터를 주고 받아야 하니 json에 대해선 이따 배우고 

비동기 형식으로 데이터를 주고 받는 것을 배울 예정  

ajax 타입으로 데이터를 주고 받는 방법이 여러 가지가 있는데 

초반에는 XMLHttpRequest를 사용 하다 -> jquery ajax -> axios 로 바뀜 

fetch 브라우저 내장 함수도 사용 하기도 함 

 

우리는 비동기 페이지 요청 기능중에 axios 라는 기술을 사용 할 예정 

 

크롬 개발자 도구에서 Fetch/XHR 이 ajax 를 보는 곳이다. 

 

axios를 사용하려면 여러 가지 방법이 있는데 우리는 jsp에 script 필드에 넣어서 사용 할 예정 이다.

 

jsp header부분에 아래의 script 1줄을 입력하면 사용 가능하다. 

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

jsp 에 다음과 같이 이벤트 발생시 사용할 ajax 기능을 불러오고 script 에 ajax 기능을 만드는데
axios 를 request 하여 생성해주면 된다. 

axios 에는 위와 같은 api방식으로 호출하여 사용도 가능하다.  기본적으로 post 방식을 지정 해주지 않으면
get 방식이 default 이다. 

 

그리고 axios 로 param을 보게 되면 {key:value, key:value}식으로 js 타입이로 출력이 되어 에러가 생긴다
이것을 다시 key=value&key=value타입으로 변경하려면 

URL-encoding을 하여야 하고 config 위치에

headers: {"content-type": "application/x-www-form-urlencoded"}

코드를 넣어주면 된다. 

 

오늘은 이처럼 s3버킷 연결과 파일, 폴더가 잘 올라가는것을 확인하였고 비동기인ajax - axios 에 대해 간단하게 
배웠다.