AWS 사용기

• AWS 계정생성 후 EC2 Free tier 추가
• eclipse toolkit for aws 설치
  • eclipse toolkit for aws 구글링
  • 메뉴창 - Help - New Install SoftWare
  • 주소로 설치
• New AWS Lambda java project 시작
• package utils 생성
• Time클래스 생성 후 getTime메서드에 현재시간을 리턴해주게함.

  public class Time {
  	public static String getTime() {
  		Date d = new Date();
  		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd kk:mm:ss");
  		return sdf.format(d);
  	}
  }
  

• 프로젝트 우클릭 후 Amazon Web Service에 Upload function to Lambda … 클릭
• 기존에 생성된 람다가 없으면 Create a new Lambda funciton 생성 해서 Next
• S3 Bucket 생성 후 AWS lambda 에서 확인

후기

• 코드스쿼드의 갓갓갓 휘준님 께서 알려주신 아마존 람다. 비전공자신데 전공자인 나보다 많이 아시는 것같다.. 이런분이 아마존에 가셔야하데.. 오늘도 자신에게 반성한다.
• 람다 말고도 엘라스틱 빈 스톡이나 S3같은 사용법도 배워둬야 할 것같다. 앞으로 개발자는 클라우드 플랫폼을 잘 다루느냐 못다루느냐의 능력차이는 분명 큰 갭을 적용할 것이라는 나의 개인적인 생각.
• 갓갓 honux의 조언
  1. 프리티어에서 기능 별 무료로 제공되는 용량이 정해져 있으니 잘 알아봐야한다.
  2. 네트워크 비용도 추가 되기 때문에 포트만 잘못 열어도 몇백 나오는 수가 있다.
     • 갓동규님의 말씀 - 네트워크 제한을 걸 수 도 있다.
  3. 포트는 시큐리티 그룹에서 뿐만아니라 뭐든간에 돈 나올 구석이 많으니까 조심해서 쓰자.(S3 파일 하나를 공개 해 둔다는지..)
     • 아까 실습하다가 공개 파일하나가 생성되었는데 조심해야겠다.
  4. 제일 좋은 방법은 행사에 참여해 크레딧을 받는 것.
     • 오늘부터 아마존 행사의 참여를 시작한다.

AJAX를 이용한 Spring boot 파일업로드

• 여러 파일들을 드래그 앤 드롭방식으로 웹 페이지에 올리면 파일이 업로드 되는것이 프로그래스바의 형태로 보여지게 하고 싶었다.
• 이것을 달성하기 위해 단계별 목표를 세웠다.
  1. Spring boot에 File upload 구현
  2. 이것을 Multi File Upload로 구현
  3. AJAX를 적용
  4. 프로그래스바를 적용.

• 1번, 2번 Controller 구현 부

  @PostMapping("/upload")
  public String singleFileUpload(@RequestParam("myfile") MultipartFile file, RedirectAttributes redirectAttributes)  {
    System.out.println("uploaded!!!!!!!!");
    if(file.isEmpty()) {
      redirectAttributes.addFlashAttribute("message", "Please select a file to upload");
      return "redirect:uploadStatus";
    }
  
    try {
      byte[] bytes = file.getBytes();
      Path path = Paths.get(UPLOADED_FOLDER + file.getOriginalFilename());
      Files.write(path, bytes);
  
      redirectAttributes.addFlashAttribute("message", "You successfully uploaded '" + file.getOriginalFilename() + "'");
    } catch(IOException e) {
      e.printStackTrace();
    }
  
    return "redirect:/uploadStatus";
  }
  

• 다중파일 업로드는 MultipartFile을 배열로 받으면 된다.
• 3번 AJAX 적용 Controller 구현 부

  @PostMapping("/api/upload/multi")
  public ResponseEntity<?> uploadFileMulti(@RequestParam("extraField") String extraField, @RequestParam("files") MultipartFile[] uploadfiles) {
    logger.debug("Multiple file upload!");
    System.out.println("multi upload!!!!!!!");
    String uploadedFileName = Arrays.stream(uploadfiles).map(x -> x.getOriginalFilename()).filter(x -> !StringUtils.isEmpty(x)).collect(Collectors.joining(" , "));
  
    if(StringUtils.isEmpty(uploadedFileName)) {
      return new ResponseEntity<>("please select a file!", HttpStatus.OK);
    }
  
    try {
      saveUploadedFiles(Arrays.asList(uploadfiles));
    } catch ( IOException e) {
      System.out.println("errorr!!!!!!!");
      return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
    }
  
    return new ResponseEntity<>("Successfully uploaded - "
                + uploadedFileName, HttpStatus.OK);
  
  }
  
  private void saveUploadedFiles(List<MultipartFile> files) throws IOException {
    System.out.println("savedUploadFiles!!");
    for( MultipartFile file : files ) {
  
      if(file.isEmpty()) {
        continue;
      }
  
      byte[] bytes = file.getBytes();
      Path path = Paths.get(UPLOADED_FOLDER + file.getOriginalFilename());
      Files.write(path, bytes);
    }
  }
  

• 4번 프로그래스바 적용
  • html부분

    <div class="form-group">
        <div class="progress">
            <div class="progress-bar progress-bar-success myprogress" role="progressbar" style="width:0%">0%</div>
        </div>
    
        <div class="msg"></div>
    </div>
    
    

  • js부분

      $(function () {
        $('#btn').click(function () {
            $('.myprogress').css('width', '0');
            $('.msg').text('');
            var filename = $('#filename').val();
            var myfile = $('#myfile').val();
            if (filename == '' || myfile == '') {
                alert('Please enter file name and select file');
                return;
            }
            var formData = new FormData();
            formData.append('myfile', $('#myfile')[0].files[0]);
            formData.append('filename', filename);
            $('#btn').attr('disabled', 'disabled');
             $('.msg').text('Uploading in progress...');
            $.ajax({
                url: '/upload',
                data: formData,
                processData: false,
                contentType: false,
                type: 'POST',
                // this part is progress bar
                xhr: function () {
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function (evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = evt.loaded / evt.total;
                            percentComplete = parseInt(percentComplete * 100);
                            $('.myprogress').text(percentComplete + '%');
                            $('.myprogress').css('width', percentComplete + '%');
                        }
                    }, false);
                    return xhr;
                },
                success: function (data) {
                    $('.msg').text(data);
                    $('#btn').removeAttr('disabled');
                }
            });
        });
    });
    
    

• 제이쿼리를 이용하여 프로그래스바를 구현하였다. 프로그래스바를 구현할때의 핵심은 xhr부분의 var xhr = new window.XMLHttpRequest();부분인데 프로그래스바는 이 기능을 이용해서 표현한다.

• 자세한 사용법은 아직 공부가 필요한 부분이다.

• 아마존의 신세계를 깨우쳐 주신 휘준님의 제안으로 시작했지만 하루 종일 걸렸다… 아직 내가 미숙해서 그런지 파일 입출력을 구현할때도 하루종일 걸린다. http의 파일 전송은 관심이 있는 주제라 이걸 시작으로 더 깊이 공부를 해야겠다.

의성님의 카네기 자기관리법

• 미 육군의 실험에서 군장을 메고 행군을 할때 50분 걷고 10분 휴식을 6시간 동안 한것과 3시간 행군 30분 휴식을 6시간 한것을 비교했을때 전자가 이동거리가 더 많았다.
• 인간은 피곤을 느끼기 시작하면 피곤해지는 속도가 제곱으로 증가한다. 육체가 피로를 느낄때 피로물질의 생성이 더 많아지기 때문이다.
• 지식노동자는 뇌의 활동으로 피곤해지지않는다. 사람은 집중을 할때 얼굴의 경직으로 시작하여 몸의 경직이 일어나고 불편한 자세가 지속되면 육체에서 피로물질이 생성된다. 이때 인간은 피로하다고 느낀다.
• 인간은 노동을 할때 기쁨, 행복과 같은 감정보다 짜증, 분노, 상사의 불합리한 행동 등등으로 인한 부정정 감정을 더 많이 느낀다. 이것은 피로물질을 촉진시키고 사람은 피곤해진다.
• 피곤을 사람의 효율을 저하시킨다. 일이나 학습의 효율을 올리고 싶으면 일단 피곤해지기 전에 휴식을 취하는 것이 중요하다.
• 50분 공부 10분 휴식의 사이클을 반복하자. (피곤하지 않더라도 눈을 감고 몸을 고양이 처럼 늘어뜨린다고 생각하며 이완시키자.)
• 이것을 지속적으로 실천해보고 과거의 나와 무엇이 다른지 확인해보자