[패스트캠퍼스|AWS강의] S3로 이미지 업로드 및 API 활용

수강 클립

Ch04. AWS Server - 카카오 로그인 -4

Ch04. AWS Server - S3로 이미지 업로드 및 API 활용 -1

Ch04. AWS Server - S3로 이미지 업로드 및 API 활용 -2

---

S3로 이미지 업로드 및 API 활용

 지난시간까지 카카오로 로그인 하고 로그인한 세션을 유지하고 로그인 했다는 것을 화면에 띄우는 것 까지 진행했다. 이번 시간에는 S3로 이미지를 업로드하고 업로드한 내용 기반으로 실제 해당 ID정보로 내용 업데이트하고 글쓰기 화면을 만들어 글 쓴 내용 업데이트 하는 과정을 진행 할 것이다.

 지난 시간에도 S3로 올리기를 해 봤는데, 그 때와 다른 점은 직접 파일로 올리는 것이 아닌 실제 서비스를 통해 파일을 올린다는 점이다.

 JIRA의 개발이슈를 개발중 단계로 넘기고 개발을 시작 해 보자.

 

 강의에서 준 review개발폴더만으로 빌드가 가능하지만, pom.xml, src를 변경 해 준다.

이전 프로젝트 폴더에서 src폴더, pom.xml을 지워준다. 그리고 그 두 파일을 새로 받은 파일에서 복사해서 붙여넣어준다.

추가 된 파일이 뭐가 있는지, 현재 어디까지 진행되었고, 화면 만드는 것 까지 진행 할 것이다.

우클릭>Team>Synchronize Workspace

확인하면 .antMatchers에 "/fileUpload"가 추가 된 것을 확인할 수 있다. 파일을 업로드 하기 위해 만든 것이다.

 

또, UserCpontroller.java를 확인하면

다음과 같이 AwsS3Service가 추가 된 것을 확인할 수 있다.

하단에는 @PostMapping("/fileUpload") 가 추가된것을 확인할 수 있다. 

 

신규파일로서 AwsS3Service.java가 추가 된 것을 확인할 수있다.

poreperties는 크게 변경 된 것이 없다. 마찬가지로 header과 login도 조금씩 변경되었다.

 

이제 local에 띄워보겠다. 어떻게 변경되었고 어떻게 처리 할 것인지 확인 해 보자.

Tomcat 9.0을 우클릭하고 Start 해 주면 로컬에 띄울 수 있다.

이렇게 헤더가 살짝 변화하고 파일 선택 버튼, Submit이 생성된 것을 확인할 수 있다. 이제는 우리가 파일을 실제로 업로드 했을 때 파일이 업로드 되는 것을 확인을 하고, 그 뒤에는 DB를 업데이트 해서 파일정보+로그인정보+내용정보를 넣어 글을 쓴다는 것을 확인 해 주자. 어떻게 파일을 업로드 할수 있는지 확인 해 보자.

kakao-login 아래에 div를 추가해 주었다. 이 안에 form이라는 부분이 있다. form으로 파일을 업로드 하겠다 하고 정의를 내리고 있다.

 

form이란?

• 데이터를 전송 할 때 감싸서 전송할 수 있는 방식
• 양식이라는 뜻도 있음. 여러 정보를 모아서 취합해서 보내는 컨셉.

input은 데이터를 입력하는 폼의 여러 종류를 의미한다. Type에는 text, number 등 여러 타입이 있는데, 여기에서는 file과 submit 타입으로 되어있다. input Type이 file로 되어있기 때문에 input 정보에는 file 정보가 담길 수 있다. 또 submit과 form은 밀접한 관계가 있다. submit 버튼을 누르게 되면 form에 들어있는 정보를 실행 해 준다. 여러 정보를 유추 할 수 있는데, form 부분을 확인하면 method="POST"라 되어있는 것을 볼 수 있다. method는 일반적인 function을 의미하는 것은 아니고 RESTAPI를 잠시 살펴봤었는데, RESTapi에서 GET방식과 POST방식이 있다는 것을 배웠었다. 그 GET과 POST 중 하나를 선택하는 곳 이다. POST는 데이터를 감추고, 전체 데이터로 데이터를 넘겨준다. file정보를 보이지 않게 넘겨준다는 뜻이ㅏㄷ. action은 url 정보이다. 

 

 

 

 

AWS/Docker 실전 클라우드 서버 구축 올인원 패키지 Online. | 패스트캠퍼스