[23] 포스트 작성 페이지에서 이미지를 S3에 올리는 기능 및 유동적인 UI 구현 #62

leehwarang · 2019-11-22T17:15:25Z

구현사항

사용자가 1개~5개 사이의 이미지를 선택하고 포스트 업로드 페이지의 제출 버튼 누를시 AWS S3에 업로드 되는 기능 구현 -> useS3 hooks 생성
5개 이상의 이미지 업로드시 alert 기능 구현
이미지 왼쪽 상단의 별 버튼을 누르면 대표 이미지로 선택되는 기능 구현
이미지 오른쪽 상단의 닫기 버튼을 누르면 삭제되는 기능 구현
아무 이미지도 올리지 않았을 시의 input type="file" 태그와, 1개 이상의 이미지를 올렸을 시의 input type="file" 태그의 디자인을 다른 스타일 적용

참고사항

용량이 커서 시연 영상이 안올라가네요. feat/23-upload-image-s3-redesign 브랜치에서 실행 후 테스트해주세요. S3 로그인하면 업로드 되는 것 까지 확인할 수 있어요.
기획 당시 drag and drop 기능이 포함될 예정이였으나, input 태그와 drag and drop 을 같이 구현하는데 무리가 있어서 다음 피쳐로 미뤄두었습니다. 추후 advanced 피쳐로 추가하는게 좋을 것 같아요.
제출 버튼을 클릭하면 S3에 이미지 업로드 후, 사용자가 입력한 데이터를 서버에 POST 요청을 보냅니다. 따라서 S3에 이미지 업로드 실패시 제출이 안되는 분기 처리가 필요한데 이 부분은 post upload page 마무리 시 같이 진행할게요.
prettier singleQuote를 rebase 안하고 했더니, '가 "로 바뀌었네요. 지금 rebase하니까 충돌 나서 엘런 PR 머지후 합치면서 수정할게요.

해결된 이슈 번호

resolved [23] 포스트 작성 페이지에서 이미지를 S3에 올리는 기능 및 유동적인 UI 구현 #54

- AWS S3 인스턴스 생성 - 버킷 내에 디렉토리 생성하는 createAlbum 함수 구현 - 특정 디렉토리에 이미지를 업로드하는 addImage 함수 구현

- image의 왼쪽 상단에 버튼 추가 - 버튼 클릭 시, 대표 이미지 인덱스가 정해지고 렌더시 해당 인덱스를 가진 이미지에 스타일 적용

- button 태그에서 input type="image"로 변경

dev-allenk

헉헉.. 코드 리뷰하는 것도 힘드네요.
구현하느라 정말 많이 노력했겠어요. 저도 aws문서도 가끔 들여다봤지만 정말 알수없는 말 투성이더라구요 😅
발번역과 적은 레퍼런스, 여러 시행착오를 뚫고 구현해낸 미셸 정말 많이 칭찬합니다! 대단해요!😄👏👏👏

AWS객체 노출되는 것 관련해서 얘기해봐야 할 것도 있고 작은 버그도 있어서 일단 체인지 리퀘스트해요.
코멘트 참고하고 몇가지 질문 답변 부탁해요!

bug:

첫 이미지가 대표이미지일 때, 첫 이미지를 삭제하면 대표이미지 설정이 사라져요.(representativeIndex가 -1이 돼요)

dev-allenk · 2019-11-24T14:45:15Z

package.json

@@ -14,6 +14,7 @@
  "license": "MIT",
  "dependencies": {
    "@babel/runtime": "^7.6.2",
+    "aws-sdk": "^2.574.0",


링크 에 따르면 aws-sdk 패키지는 node.js를 위한 패키지라고 나와있네요. 브라우저 환경에서는 script 태그를 이용해야하나봐요.

그렇군요! 근데 왜 지금 aws-sdk 패키지를 사용했는데 정상적으로 동작할까요?
이 글에 따르면 aws-sdk패키지를 브라우저에도 사용하게 하려면 Browserify를 사용해야 한다고 하는데요. 뭔가 잘 돌아가니 스크립트 방식으로 변경할 필요가 잘 안 느껴져요. 😅

리액트에서 스크립트 동적으로 삽입하는 걸 한 번도 안해봐서 이 번 기회에 한 번 시도해 보는 건 의미가 있을 것 같고요.

좀 헷갈리는데 AWS사용방법을 이해한대로 정리해보자면, 아래 2가지 방법이 있겠네요.

1. 브라우저에서 AWS를 사용

스크립트를 삽입해서 전역에 AWS객체를 추가하고, 해당 객체를 사용한다.

2. Node.js 환경에서 AWS를 사용

aws-sdk 패키지를 설치하고 const AWS = require('aws-sdk') 를 통해 패키지에서 export한 AWS객체를 사용한다.

언급된 Browserify는 대충 보니까 require문을 해석할 수 있는 번들러네요.
그러니까 결국, 우리가 작성한 js 파일에서 AWS객체가 접근가능하면 되는것이라고 이해했어요.
우리는 지금 웹팩을 사용하고 있기 때문에 aws-sdk 패키지에 있는 AWS객체가 우리가 작성한 js파일에 번들링되어서 포함되겠죠. 마치 AWS 스크립트를 삽입한 것과 동일한 상태가 되는 거에요. 그러니까 문제없이 잘 돌아가나봐요.

스크립트와 패키지의 차이에 대해서는 공식 문서 상으론 이정도로 언급되어 있어요.

Node.js에 SDK를 사용하는 것은 웹 브라우저에서 JavaScript에 SDK를 사용하는 방법과 다릅니다. SDK를 로드하고 특정 웹 서비스에 액세스하는 데 필요한 자격 증명을 얻는 방법에서 차이가 비롯됩니다. 특정 API 사용이 Node.js와 브라우저 간에 다른 경우 해당 차이점이 표시됩니다. 출처

요약하자면 1) SDK를 로드하는 방법, 2) 자격증명 얻는 방법, 3) 특정 api간의 차이, 이 3가지 차이점이 있다는 말인가봐요.
그런데 1) SDK를 로드하는 방법은 웹팩을 사용하기 때문에 aws-sdk패키지를 사용해도 문제가 없다고 생각돼요. 2) 자격증명 얻는 방법은 브라우저 방식을 사용하고 있는 듯한데 이 부분은 잘 모르겠고, 3) api간의 차이는 아마 거의 없겠지만 혹시 aws-sdk의 AWS객체가 브라우저에서 지원하지 않는 api로 구현되어있다면 에러가 발생하겠네요. (근데 차이가 있긴한가 잘 모르겠어요. node.js도 js 스펙에 맞게 똑같이 구현하지 않나요 😅)

제 결론은, 그냥 써도 되겠다! 입니다.😃

dev-allenk · 2019-11-24T14:57:20Z

src/components/PostUploader/ImageUploader.jsx

-import './ImageUploader.scss';
+import React, { useState } from "react";
+import "./ImageUploader.scss";
+import { PRE_SIGNED_URL } from "../../configs";


이 변수는 이제 없어도 되는거겠죠?

네 삭제했어요.

dev-allenk · 2019-11-24T14:57:33Z

src/components/PostUploader/ImageUploader.jsx

+  const { selectedImages, previewUrls } = images;
+
+  const getImage = ({ target }) => {
+    const files = Array.from(target.files);


배열로 변환해서 사용하니까 좋네요 👍

dev-allenk · 2019-11-24T14:57:46Z

src/components/PostUploader/ImageUploader.jsx

+    const representativeClassName =
+      index === representativeIndex ? "representative" : "non-representative";
+    return (
+      <div className="image-uploader-preview-wrapper" key={index}>


https://ko.reactjs.org/docs/lists-and-keys.html#keys

key값을 index로 두는건 권장할만한 방법은 아니지만 지금 상황에서는 뾰족한 수가 없어보이네요.
image값을 쓸 수도 있겠지만 너무 긴 감이 있어서..
나중에 이미지의 순서를 변경하는 기능이 들어간다면 고려해봐야 할 것 같아요.

네 drag and drop 이랑 이미지 드래그해서 순서 변경하는 걸 이미지 업로더 advanced feature 로 두면 되겠네요.

dev-allenk · 2019-11-24T15:17:18Z

src/components/PostUploader/ImageUploader.jsx

    <div className="image-uploader">
-      <input type="file" className="image-uploader-input" />
+      {previewImages}
+      {0 < selectedImages.length && selectedImages.length < maximumCnt && (
+        <div className="image-uploader-second-input-wrapper">
+          <label
+            className="image-uploader-second-input-label"
+            htmlFor="second-input"
+          >
+            +
+          </label>
+          <input
+            className="image-uploader-second-input-btn"
+            id="second-input"
+            type="file"
+            accept="image/*"
+            onChange={getImage}
+            multiple
+            name="filename[]"
+          />
+        </div>
+      )}
+      <div
+        className="image-uploader-first-input-wrapper"
+        style={{
+          display: !previewUrls.length ? "inline-block" : "none"
+        }}
+      >
+        <img
+          className="image-uploader-first-input-icon"
+          src={`${IMAGE_BUCKET_URL}/image-upload-icon.png`}
+        />
+        <label
+          className="image-uploader-first-input-label"
+          htmlFor="first-input"
+        >
+          이미지 선택
+        </label>
+        <input
+          id="first-input"
+          type="file"
+          accept="image/*"
+          className="image-uploader-first-input-btn"
+          onChange={getImage}
+          multiple
+          name="filename[]"
+        />
+      </div>


return ( <div className="image-uploader"> { hasSelectedImages ? <PreviewImages /> <SecondInputButton /> : <FirstInputButton /> } </div> )

이런식으로 작성하는 건 어때보여요?
지금은 한눈에 너무 많은 정보가 들어오는 것 같아서 보는데 조금 벅찬 기분이 들어서요.

좋네요 ! 재사용 컴포넌트에 사로잡혀 있어서 지금까지 한 번만 사용하는 컴포넌트들을 분리 할 생각을 안했던 것 같아요. 가독성도 중요한데 말이죠. 의견 준대로 변경할게요. 👍

dev-allenk · 2019-11-25T03:56:04Z

src/pages/PostUploadPage/PostUploadPage.jsx

+    const represenTativeImage = e.target.previousSibling.previousSibling.src;
+    const represenTativeIndex = images.previewUrls.findIndex(
+      el => el === represenTativeImage


이 부분도 위와 마찬가지로.. DOM 구조가 변경된다면 이 부분도 같이 수정이 필요할 것 같아요.
위에서 말했듯이 dataset을 활용하는 것도 가능하겠어요!

dev-allenk · 2019-11-25T03:59:55Z

src/hooks/useS3.jsx

+    ).then(
+      uploadedUrl => {
+        console.log("Successfully uploaded photo.");
+        return uploadedUrl;


여기 uploadedUrl 배열에서 각 item의 Location 값만 리턴해줘야할 것 같아요.

useS3 내에서 reduce 돌리는게 안되서 받는 쪽에서 파싱 작업 했어요. 왜 안되는지는 좀 알아보고 알려줄게요!

).then( uploadedUrl => { return uploadedUrl.reduce((acc, cur) => { return acc.concat(cur.Location); }, []); },

받는 쪽 코드를 그대로 then으로 옮겨도 되겠네요 👍

dev-allenk · 2019-11-25T04:02:37Z

src/pages/PostUploadPage/PostUploadPage.jsx

+
+    // TODO : 브라우저의 토큰에 저장되어 있는 쿠키에서 user nickname 가져오는 코드 추가
+    const albumName = await createAlbum("michelle", YYYYMMDDHHMMSS(new Date()));
+    const uploadedUrl = await addImage(images.selectedImages, albumName);


이 uploadedUrl을 서버로 전송하면 되는거겠죠?
이부분 async/await 쓰는게 어색하다고 했던 것 같은데 createAlbum함수랑 addImage함수를 콜백함수를 받게끔 수정할 수는 있을 것 같아요. 근데 지금 이대로가 가독성은 더 좋을 것 같은 느낌!

넵 사용하는게 어색할 뿐 가독성은 훨씬 좋죠 ㅎㅎ 더 익숙해져야 겠어요.

dev-allenk · 2019-11-25T04:10:21Z

src/pages/PostUploadPage/PostUploadPage.jsx

+            addImageHandler={addImageHandler}
+            deleteImageHandler={deleteImageHandler}
+            representativeImageHandler={selectRepresentativeImage}
+            representativeIndex={representativeIndex}


핸들러함수를 PostUploadPage 에 위치한 이유가 궁금해요.
저는 얼마전까지는 별 생각없이 아무데나 두고 작성했는데 요즘 들어서는 이벤트가 발생하는 하위컴포넌트에 두는게 자연스럽다는 생각이 들더라구요. useReducer로 코드 수정하기에도 용이하고요.ㅎ

음 일단 PostUploadPage에서 제출 버튼을 클릭하니까, 관련된 데이터와 데이터를 다루는 함수들을 가지고 있어야 한다고 생각 했어요. 저는 일반적으로 단독으로 사용하는 컴포넌트들은 걔가 관리하고, 상위 컴포넌트가 있으면 상위 컴포넌트가 관리하는 것 같아요!

dev-allenk · 2019-11-25T04:12:10Z

src/utils/utils.js

@@ -17,3 +17,17 @@ export const throttle = (callback, delay = 200) => {
    }
  };
 };
+
+export const YYYYMMDDHHMMSS = dateObj => {


요 함수 이름 직관적이고 재밌네요 ㅋㅋ
처음 Date() 를 제안했을 땐 ms 단위로 나오는 알아보기 힘든 숫자를 사용할 생각이었는데
이렇게 사용하니까 읽기도 쉽고 좋네요! 👍

dev-allenk · 2019-11-25T04:32:57Z

아참! 디자인 이쁘게 잘 나왔네요!😻
별모양 버튼, 삭제 버튼, 아이콘 들어간 버튼 전부 예뻐요!ㅎㅎ

- FirstInputButton, SecondInputButton, PreviewImages 컴포넌트 생성

- image input button에서 name="files[]" 삭제 - PreviewImage의 margin 스타일 수정 - useS3에서 var, let을 const로 변경 - PostUploadPage에서 e.preventDefault() 삭제

leehwarang

리뷰 다 확인했어요. 꼼꼼한 피드백 고마워요 ~
일단 남은 건

aws-sdk 를 script 불러 오는 것으로 변경하기
config 변수가 노출되는 부분 해결하기
previewImage에서 이미지가 먼저 보여지고, 대표 이미지 선택과 닫기 버튼 불러올 때 렌더링 시간 차이 생기는 부분 해결하기

이 세 가지인데요.
1번 -> require 로 불러오는 방법과 script 로 불러오는 방법이 어떤 차이가 있는지 좀 더 알아볼게요.
2번 -> 이건 같이 방법을 좀 더 찾아봐야 할 것 같고, 우리 코드 전반적으로 수정해야 하는 부분이니까 피쳐로 따서 진행하는거 어때요?
3번 -> 이것도 아까 이야기 한 것 처럼 버튼 이미지를 컴포넌트로 작성하고 React.memo 활용하는 방법으로 시도해볼게요. 크리티컬한 부분 아니여서 피쳐로 따서 진행할게요.

leehwarang · 2019-11-26T07:20:14Z

src/components/PostUploader/ImageUploader.jsx

+            accept="image/*"
+            onChange={getImage}
+            multiple
+            name="filename[]"


이 글 을 참고 했어요~

저는 저 글 보고 input 태그를 이용해 여러개의 데이터를 올리려면 multiple name="filename[]" 이 두 가지 속성을 함께 사용해야 하는 줄 알았는데요. 테스트 해보니 multiple 은 필수적이고 name 은 없어도 되네요. name은 아마 form 태그 안에 있는 input 태그에서 여러개의 데이터를 서버에 보낼 때 사용해야 하는 것 같은데, 이 코드에서 이미지 올리는 부분은 input 태그로 받은 값을 바로 서버에 보내지 않고, 후처리해서 Promise로 S3 에 올리는 거라 name이 없어도 되는 듯 해요.

leehwarang · 2019-11-26T15:04:42Z

package.json

@@ -14,6 +14,7 @@
  "license": "MIT",
  "dependencies": {
    "@babel/runtime": "^7.6.2",
+    "aws-sdk": "^2.574.0",


그렇군요! 근데 왜 지금 aws-sdk 패키지를 사용했는데 정상적으로 동작할까요?
이 글에 따르면 aws-sdk패키지를 브라우저에도 사용하게 하려면 Browserify를 사용해야 한다고 하는데요. 뭔가 잘 돌아가니 스크립트 방식으로 변경할 필요가 잘 안 느껴져요. 😅

리액트에서 스크립트 동적으로 삽입하는 걸 한 번도 안해봐서 이 번 기회에 한 번 시도해 보는 건 의미가 있을 것 같고요.

leehwarang · 2019-11-26T15:21:28Z

src/components/PostUploader/ImageUploader.scss

+    &-wrapper {
+      padding: 0 1.5rem;
+      height: 4rem;
+      line-height: 3.5rem;


div 안에 있는 텍스트를 수직 정렬할 때 line-height 를 사용해요. 이 글 을 살펴보면 좋을 것 같아요. 폰트 사이즈 보다 조금 더 큰 값을 line-height 으로 주면, line-height - fontsize 만큼의 여백을 폰트의 상하로 나눠 가진다고 이해하고 있어요.

leehwarang · 2019-11-26T15:23:54Z

src/components/PostUploader/ImageUploader.scss

+      border: 1px solid $main-color;
+      border-radius: 2rem;
+      background-color: $main-color-light;
+      display: flex;


display: flex; align-items: center; justify-content: center;

요 코드 다 삭제할게요.

leehwarang · 2019-11-26T15:40:42Z

src/components/PostUploader/ImageUploader.scss

+      & + & {
+        margin-left: 2rem;
+      }


미세한 스타일 버그가 있었군요. margin: 0 1rem 주는 방식으로 변경했어요.
다만 "첫번째 엘리먼트는 그대로인데 두번째부터는 margin-left? 왜 두번째부터 margin-left가 필요한거지?" 이 질문에 대해서는 코드를 작성한 사람의 의도를 좀 더 이해해보려고 했으면 좋을 것 같아요. 정답은 없으니까요.

저는 연속적으로 보여지는 요소들이 있을 때, 첫 번째 요소의 위치는 그대로 두고 두 번째와 세 번째 요소에 margin-left 를 줘서 간격을 띄우는 방법을 꽤 자주 사용하더라구요. 전체적으로 margin: 0 1rem 을 주면 첫 번째 요소도 왼쪽 공간을 가져서 원하지 않는 공간이 생기니까요.

leehwarang · 2019-11-26T15:55:05Z

src/components/PostUploader/ImageUploader.scss

+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      border: 0;


더 간단하게 표현이 가능하네요! 제시해준 걸로 변경했어요. 땡큐 ~

leehwarang · 2019-11-26T16:04:30Z

src/pages/PostUploadPage/PostUploadPage.jsx

  };
+
+  const selectRepresentativeImage = e => {
+    e.preventDefault();


deleteImageHandler 함수와 selectRepresentativeImage 함수에서 e.preventDefault() 삭제했어요.
이벤트 발생으로 호출되는 부분에서는 e.preventDefault()를 습관적으로 사용하고 있었네요.

dev-allenk

리뷰 다 확인했어요. 꼼꼼한 피드백 고마워요 ~
일단 남은 건

aws-sdk 를 script 불러 오는 것으로 변경하기

config 변수가 노출되는 부분 해결하기

previewImage에서 이미지가 먼저 보여지고, 대표 이미지 선택과 닫기 버튼 불러올 때 렌더링 시간 차이 생기는 부분 해결하기

이 세 가지인데요.
1번 -> require 로 불러오는 방법과 script 로 불러오는 방법이 어떤 차이가 있는지 좀 더 알아볼게요.
2번 -> 이건 같이 방법을 좀 더 찾아봐야 할 것 같고, 우리 코드 전반적으로 수정해야 하는 부분이니까 피쳐로 따서 진행하는거 어때요?
3번 -> 이것도 아까 이야기 한 것 처럼 버튼 이미지를 컴포넌트로 작성하고 React.memo 활용하는 방법으로 시도해볼게요. 크리티컬한 부분 아니여서 피쳐로 따서 진행할게요.

1번은 별도로 코멘트 달았으니 한번 확인해보아요. 결론적으론 그냥 이대로 사용해도 될 것 같아요.
2, 3번에는 이견 없습니당. 일단 이 PR은 이 정도로 마무리해요. 잘 동작하니 ㅎㅎ

dev-allenk · 2019-11-27T04:38:25Z

package.json

@@ -14,6 +14,7 @@
  "license": "MIT",
  "dependencies": {
    "@babel/runtime": "^7.6.2",
+    "aws-sdk": "^2.574.0",


좀 헷갈리는데 AWS사용방법을 이해한대로 정리해보자면, 아래 2가지 방법이 있겠네요.

1. 브라우저에서 AWS를 사용

스크립트를 삽입해서 전역에 AWS객체를 추가하고, 해당 객체를 사용한다.

2. Node.js 환경에서 AWS를 사용

aws-sdk 패키지를 설치하고 const AWS = require('aws-sdk') 를 통해 패키지에서 export한 AWS객체를 사용한다.

언급된 Browserify는 대충 보니까 require문을 해석할 수 있는 번들러네요.
그러니까 결국, 우리가 작성한 js 파일에서 AWS객체가 접근가능하면 되는것이라고 이해했어요.
우리는 지금 웹팩을 사용하고 있기 때문에 aws-sdk 패키지에 있는 AWS객체가 우리가 작성한 js파일에 번들링되어서 포함되겠죠. 마치 AWS 스크립트를 삽입한 것과 동일한 상태가 되는 거에요. 그러니까 문제없이 잘 돌아가나봐요.

스크립트와 패키지의 차이에 대해서는 공식 문서 상으론 이정도로 언급되어 있어요.

Node.js에 SDK를 사용하는 것은 웹 브라우저에서 JavaScript에 SDK를 사용하는 방법과 다릅니다. SDK를 로드하고 특정 웹 서비스에 액세스하는 데 필요한 자격 증명을 얻는 방법에서 차이가 비롯됩니다. 특정 API 사용이 Node.js와 브라우저 간에 다른 경우 해당 차이점이 표시됩니다. 출처

요약하자면 1) SDK를 로드하는 방법, 2) 자격증명 얻는 방법, 3) 특정 api간의 차이, 이 3가지 차이점이 있다는 말인가봐요.
그런데 1) SDK를 로드하는 방법은 웹팩을 사용하기 때문에 aws-sdk패키지를 사용해도 문제가 없다고 생각돼요. 2) 자격증명 얻는 방법은 브라우저 방식을 사용하고 있는 듯한데 이 부분은 잘 모르겠고, 3) api간의 차이는 아마 거의 없겠지만 혹시 aws-sdk의 AWS객체가 브라우저에서 지원하지 않는 api로 구현되어있다면 에러가 발생하겠네요. (근데 차이가 있긴한가 잘 모르겠어요. node.js도 js 스펙에 맞게 똑같이 구현하지 않나요 😅)

제 결론은, 그냥 써도 되겠다! 입니다.😃

dev-allenk · 2019-11-27T04:39:15Z

src/components/PostUploader/ImageUploader/FirstInputButton.jsx

+    <div
+      className="image-uploader-first-input-wrapper"
+      style={{
+        display: !previewUrls.length ? "inline-block" : "none"


이 코드는 이제 없어도 될 것 같아요! FirstInputButton을 사용하는 쪽에 조건이 들어있으니.

dev-allenk · 2019-11-27T04:49:11Z

src/components/PostUploader/ImageUploader/FirstInputButton.jsx

+        accept="image/*"
+        className="image-uploader-first-input-btn"
+        onChange={onChangeHandler}
+        multiple


name속성은 지웠군요.
name 속성에 대괄호 사용하는 링크 글 잘 읽었어요. 덕분에 또 새로운 사실을 알게 되었네요. 고마워요 ㅎㅎ
아직 어떻게 사용되는지는 잘 모르겠지만 필요할 때 생각날듯!

dev-allenk · 2019-11-27T04:51:19Z

src/components/PostUploader/ImageUploader/ImageUploader.jsx

+  const getImage = ({ target }) => {
+    const files = Array.from(target.files);
+
+    if (files.length + selectedImages.length > 5) {


위에 작성한 maximumCnt 변수를 여기 사용해도 괜찮겠네요.

dev-allenk · 2019-11-27T04:51:57Z

src/components/PostUploader/ImageUploader/ImageUploader.jsx

+            representativeIndex={representativeIndex}
+            representativeImageHandler={representativeImageHandler}
+          />
+          {selectedImages.length < 5 && (


여기도 maximumCnt를 사용할 수 있을 것 같아요.

dev-allenk · 2019-11-27T04:55:09Z

src/hooks/useS3.jsx

+    ).then(
+      uploadedUrl => {
+        console.log("Successfully uploaded photo.");
+        return uploadedUrl;


).then( uploadedUrl => { return uploadedUrl.reduce((acc, cur) => { return acc.concat(cur.Location); }, []); },

받는 쪽 코드를 그대로 then으로 옮겨도 되겠네요 👍

dev-allenk · 2019-11-27T04:58:47Z

src/components/PostUploader/ImageUploader/FirstInputButton.scss

+  &-wrapper {
+    padding: 0 1.5rem;
+    height: 4rem;
+    line-height: 3.5rem;


line-height 관련 글 잘 읽었어요. 고마워요!
폰트를 세로방향으로 가운데정렬할 때 간단하게 이용할 수 있는 속성이네요. 👍

dev-allenk · 2019-11-27T05:17:34Z

src/pages/PostUploadPage/PostUploadPage.jsx

+    const deletedImage = e.target.previousSibling.src;
+    const targetIndex = images.previewUrls.findIndex(
+      url => url === deletedImage


여기 코멘트가 없어서 시무룩..😥
이런 코드가 가능하다는 것도 참고..

const deleteImageHandler = e => { const targetIndex = e.target.dataset.idx; //나머지 코드 }

dev-allenk · 2019-11-27T05:19:54Z

src/hooks/useS3.jsx

+      files.map(file => {
+        const fileName = file.name;
+        const albumPhotosKey =
+          "post-images/" + encodeURIComponent(albumName) + "//";


여기 맨 뒤에 "//" 슬래시 2개가 들어가서 그런지 s3에 업로드 될 때 빈 폴더가 하나 더생겨요.

…/codesquad-project-team/frontend into feat/23-upload-image-s3-redesign

leehwarang added 24 commits November 15, 2019 21:56

feat: 파일추가시, 사용자가 선택한 이미지 파일을 더하고 화면에서 미리보는 기능 추가

5c615ad

feat: 사용자가 최대 개수보다 적은 수의 이미지를 올렸을 시 보여지는 input type="file" 추가

a2f7485

feat: 최대 개수를 초과하는 이미지를 업로드했을 때 alert 기능 추가

15e4e13

style: 이미지가 더 크게 & 3개 이상일 시 두 줄로 보여지도록 스타일 수정

7627845

style/refactor: 각 이미지에 delete 버튼 추가 및 클래스명 정리

d0a3809

feat/refactor: preview 방식을 URL.createObjectURL에서 FileReader로 변경

59edbb2

refactor: File과 previewUrl을 하나의 객체 형태로 관리하도록 데이터 타입 수정

4086408

feat: 특정 이미지를 클릭했을 때 삭제되는 기능 추가

2ce8c7c

feat: date 객체를 YYYYMMMDDHHMMSS 형태의 string으로 반환하는 함수 추가

0ff7408

feat: useS3 커스텀 훅 구현

5f0080e

- AWS S3 인스턴스 생성 - 버킷 내에 디렉토리 생성하는 createAlbum 함수 구현 - 특정 디렉토리에 이미지를 업로드하는 addImage 함수 구현

setting: aws-sdk 모듈 설치

03702c2

setting: Amazon S3 설정에 필요한 값을 불러와서 DefinePlugin으로 사용하도록 설정

dc87cbf

feat: 제출 버튼 클릭 시 S3에 디렉토리 생성 및 이미지 업로드 기능 구현

5fc1c1f

setting: aws-sdk 모듈 다운으로 인한 yarn.lock 파일 업데이트

33cfd4c

setting: .gitignore 파일 업데이트

c9ea310

feat: AWS S3에 여러개의 이미지를 업로드하는 기능 구현

66a2fa4

feat: Amazon S3에서 받은 response를 리턴하는 기능 추가

15e15c6

feat/style : 이미지 중 대표 이미지 선택하는 기능 및 스타일 추가

5697eb0

- image의 왼쪽 상단에 버튼 추가 - 버튼 클릭 시, 대표 이미지 인덱스가 정해지고 렌더시 해당 인덱스를 가진 이미지에 스타일 적용

refactor: 불필요한 코드 삭제 및 클래스명 변경으로 인한 scss 스타일 순서 조정

3489e51

refactor: 개발자가 확인하는 error message를 alert에서 console.log 로 수정

2eb142f

style: 포스트 업로드 페이지 진입시 처음에 보여지는 이미지 선택 버튼 스타일 추가

fd74e73

fix/style: previewImages 길이에 따라 show/hide 부분 버그 해결 및 미세 스타일 조정

2ba4458

style/refactor: 이미지 삭제 및 대표 이미지 선택 스타일 수정

504fcc8

- button 태그에서 input type="image"로 변경

fix/refactor: 스타일 수정으로 인한 버그 발생으로 인해 이전 스타일로 롤백

8fb362d

leehwarang added new feature New feature or request refactor/style Refactoring or styling labels Nov 22, 2019

leehwarang mentioned this pull request Nov 23, 2019

[29] 포스트 업로드 페이지의 모든 사용자 입력 데이터 관리 및 서버 업로드 기능 구현 #63

Closed

leehwarang self-assigned this Nov 23, 2019

leehwarang requested a review from dev-allenk November 23, 2019 11:06

fix: 삭제한 이미지가 대표 이미지인 경우, 그 전 이미지를 대표 이미지로 선택하는 기능 추가

8f47895

dev-allenk requested changes Nov 25, 2019

View reviewed changes

leehwarang added 4 commits November 26, 2019 12:39

refactor: PostUploadPage의 복잡한 구조를 하위 컴포넌트로 분리

662ac78

- FirstInputButton, SecondInputButton, PreviewImages 컴포넌트 생성

fix: 이미지가 5개 이하일 때만 두번째 추가 버튼이 보이도록 조건 추가

9698862

fix: 대표 이미지이면서 첫 번째 이미지일 때 삭제하면 대표 이미지 스타일이 날아가는 버그 해결

072633b

refactor: 피드백 반영

0e91cb3

- image input button에서 name="files[]" 삭제 - PreviewImage의 margin 스타일 수정 - useS3에서 var, let을 const로 변경 - PostUploadPage에서 e.preventDefault() 삭제

leehwarang commented Nov 26, 2019

View reviewed changes

Merge branch 'develop' into feat/23-upload-image-s3-redesign

c22c229

dev-allenk approved these changes Nov 27, 2019

View reviewed changes

leehwarang added 4 commits November 28, 2019 14:09

refactor: FirstInputButton 의 불필요한 조건문 삭제

fe1f970

refactor: 이미지 업로드 최대 개수 표현 중 상수를 maximumCnt 변수 표현으로 변경

695fe63

refactor: uploadedUrl 을 추출하는 reduce문을 useS3 내부 함수로 이동

2f8d954

Merge branch 'feat/23-upload-image-s3-redesign' of https://github.com…

f697e0c

…/codesquad-project-team/frontend into feat/23-upload-image-s3-redesign

leehwarang merged commit 35f5e85 into develop Nov 28, 2019

[23] 포스트 작성 페이지에서 이미지를 S3에 올리는 기능 및 유동적인 UI 구현 #62

[23] 포스트 작성 페이지에서 이미지를 S3에 올리는 기능 및 유동적인 UI 구현 #62

Conversation

leehwarang commented Nov 22, 2019 • edited Loading

구현사항

참고사항

해결된 이슈 번호

dev-allenk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

1. 브라우저에서 AWS를 사용

2. Node.js 환경에서 AWS를 사용

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

leehwarang Nov 26, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

leehwarang Nov 26, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dev-allenk commented Nov 25, 2019

leehwarang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dev-allenk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

1. 브라우저에서 AWS를 사용

2. Node.js 환경에서 AWS를 사용

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

leehwarang commented Nov 22, 2019 •

edited

Loading

leehwarang Nov 26, 2019 •

edited

Loading

leehwarang Nov 26, 2019 •

edited

Loading