Today I Learned[스파르타코딩클럽] 내일배움캠프: 9일차 TIL

#코딩 개발일지 시작의

 황금같은 연휴기간에 약속을 잡은 친구가 약속을 파토냈다. ^^ 덕분에 코딩 공부할 시간이 늘었네! 친구에게 너무나 고마운 마음이 든다~! (다만, 진짜로 코딩 공부할 시간이 부족하긴 했다.)

# 오늘 한 일

1. AWS 클라우드 배포환경 구축
   
   • AWS클라우드(인프라) 강의 1주차를 들으며, AWS 기초부터 몇몇 기능을 사용하며 익혀볼 수 있었다.
     • 기존에는 EC2 서비스만을 이용해봤는데, S3, IAM을 이용한 정적호스팅, 파일 업로드를 진행했다.
     • S3 = 웹사이트를 제작할 때 사용하는 파일(img 등)을 저장해두고 이용하는 저장소 역할
     • IAM = AWS 계정을 관리하는 것.(S3 저장소를 사용하는 것에 대한 권한을 조정하는 등)
     • SDK = AWS를 (CLI 등으로)프로그래밍하게 사용하게 만들어주는 라이브러리
     • BOTO3 = 파이썬과 S3를 연동하기 위한 라이브러리
     • 호스팅 = html, css 등으로 만든 웹사이트를 배포할 수 있게 서버의 빈 공간을 임대해주는 것
   • 1주차 숙제를 진행하며 ajax 관련 추가적인 자료도 습득할 수 있었다.
     • Boolean = 참 또는 거짓의 값을 갖는 자료형 (ex. processData 등)
     • contentType = 서버로 보내지는 데이터의 값 설정
       • http://tcpschool.com/ajax/ajax_intro_basic (ajax 기본 지식)
       • https://jp1020.tistory.com/entry/jquery-ajax-method-%EC%A0%95%EB%A6%AC

코딩교육 티씨피스쿨

jquery ajax method 정리

 

 

# 오늘의 이슈/고민, 아쉬운 점 그리고 해결한 내용

1.  1주차 숙제를 진행하며 막힌 부분을 해결하지 못했다. (현재 슬랙에 질문을 올린 상태)
   • 에러코드

     Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
     at order ((index):63)
     at HTMLButtonElement.onclick ((index):104)​

   • app.py 코드

     import boto3
     from flask import Flask, render_template, request, jsonify
     
     app = Flask(__name__)
     
     @app.route('/')
     def main():
         return render_template('index.html')
     
     @app.route('/fileupload', methods=['POST'])
     def file_upload():
         file = request.files['file']
         s3 = boto3.client('s3')
         s3.put_object(
             ACL="public-read",
             Bucket="myspartahankug",
             Body=file,
             Key=file.filename,
             ContentType=file.content_type)
         return jsonify({'result': 'success'})
     
     if __name__ == '__main__':
         app.run()​

   • 자바스크립트 코드

     function order() {
         var form_data = new FormData($('#upload-file')[0]);
         $.ajax({
             type:"POST",
             url:"/fileupload",
             data: form_data,
             processdata: false,
             contentType: false,
             success: function (data) {
                 alert('저장이 완료되었습니다!');
             },
         });
     }​

   • 에러코드를 보면 자바스크립트 내 var(변수)의 FormData 구조가 잘못된 것 같은데.. 아무리 구글링하고 수정해도 답이 나오지 않았다..
2. 오늘 아쉬운 점
   • 타임어택 테스트 관련해서 코드를 분석해보지 못했다. 대단히 아쉬운 하루다. 내일은 꼭 해봐야지~

# To-do List

1. 타임어택 테스트 복기하기(상세 코드 분석) + 한 번 더 코드 짜보기
2. AWS 강의 예습(2주차) 진행하기