[내일배움캠프] #211013-211014 💻 TIL 💻

TIL

어제 장염에 걸려 배가 너무 아파서 개발일지도 못올리고 바로자서 어제거랑 오늘거랑 같이 올려야겠다 .. ㅠ
아프지말자 !

aws s3

나는 클라이언트가 업로드한 파일을 저장하기 위해 s3를 사용했고 버킷을 만들엇다.
버킷을 설정하기 위해서는 cors 정책 등 꽤 많은 것들을 설정해야했다.

• 내가 설정한 것들

브라우저의 script를 통해 Amazon S3 Bucket에 접근하려면 우리는 S3 Bucket의 CORS를 설정
CORS란 Cross Origin Resource Sharing의 줄임말로, Cross-Site Http Request를 가능하게 하는 표준 규약입니다. 간단히 이야기하면 다른 도메인에서 어떤 http request가 들어왔을 때 이에 어떻게 반응할지를 결정해주는 규칙 문서라고 생각하시면 됩니다.

또한 우리는 “자격 증명 풀"을 통해 우리가 만든 애플리케이션에 접속한 사용자가 우리의 S3 Bucket에 접근할 수 있는 권한을 부여하려고 하는 것입니다. 이를 위해선 먼저 Amazon Cognito console에서 자격증명 풀을 생성해야합니다.

링크보기

나는 위방법대로 하지는 않고 iam 사용자를 생성하여 키와 비밀키를 얻고 그것을 이용했다.

const putFile = file => {
  const albumBucketName = ''; // S3의 버킷 이름
  const region = 'ap-northeast-2'; // 서울
  const accessKeyId = ''; // IAM에서 생성한 사용자의 accessKeyId
  const secretAccessKey = ''; // IAM에서 생성한 사용자의 secretAccessKey

  AWS.config.update({
    region,
    accessKeyId,
    secretAccessKey
  });

  const upload = new AWS.S3.ManagedUpload({
    params: {
      Bucket: albumBucketName,
      Key: file.name,
      Body: file,
      ACL: "public-read"
    }
  });

  const promise = upload.promise();

  promise.then(
    function(data) {
      console.log("Successfully uploaded photo.");
    },
    function(err) {
      return console.log("There was an error uploading your photo: ", err.message);
    }
  );
};

위 코드를 사용하여 파일을 s3에 업로드했고 s3의 내가 만든 버킷에서 직접 확인해보면 파일이 올라와있었다.

s3이미지 불러오기

우리는 클라이언트가 업로드한 사진을 s3에 올리고 이것을 필요에 맞게 불러와야했다.
클라이언트가 리뷰를 작성할 때 업로드한 사진또한 review db에 저장해서 그 명소에 대한 리뷰를 불러올 때 이미지를 같이 불러와야했다,

• Q. 이때 이 사진을 어디서 불러와야할까 ?
  A. s3에 업로드한 사진을 보면 url이 존재한다. 앞에는 버킷이름으로 되어있고 뒤에는 파일명인데 이 url을 db에 저장해야한다. 하지만 클라이언트가 사진을 업로드하면 경로가 fakepath로 떠서 db에는 앞서 말한 url이 저장되는것이아니라 fakepath 경로 \파일명 이 저장되었다.
  나는 먼저 fakepath 경로를 없애준 파일명을 서버로 보냈고 버킷 url에 파일명을 더해주어 서버 db에 저장하였다

파일경로에서 fakepath 없애기

let filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, '')

글자누르면 데이터를 전달하며 다음페이지로 이동

• 글자를 누르면 onclick 함수를 실행시켜 다음페이지로 이동해야하는 생각이 들었는데 이렇게 서버 임의의 url로도 데이터와 함께 전송시킬 수 있었다.

<a href="/reviewpage?place={{ place[0].name }}" class="more"> 리뷰작성 및 더보기 ></a>

3page에서 최신리뷰 3개만 보여주기

• reg_date 라는 column을 만들어서 역순으로 정렬한 후

@app.route('/3page',methods=['GET'])
def show_detail2():
     name = request.args.get('name')
     #명소에 대한 정보 불러오기
     places = db.sample.find({"name": name}, {'_id': False})
     #명소에 대한 리뷰 불러오기
     # reviews= db.reviews.find({"where": name}, {'_id': False})
     #최신리뷰 3개만 3페이지에 나타나게
     reviews = list(db.reviews.find({"where": name}, {'_id': False}).sort([("reg_date", -1)]))
     places=list(places)
     reviews=list(reviews)
     if len(reviews)>3:
         reviews=reviews[0:3]
     print(reviews)
     return render_template('3page-.html',place=places,reviews=reviews)