React.js & Node.js 21일차

위와같이 작성해서 화면에 따라서 모달이 달라지도록 만들었다.

 

그리고 Main을 키우고 내용을 중앙으로 정렬하기 위해서 다음의 속성들을 추가해주자

 

하면 위와같이 비슷한 형태가 된다. 이제 인스타그램처럼 아이콘을 삽입해서 모양을 보다 이쁘게 만들어보자

 

 

참고로 src 폴더명이 안나오게 만들고 싶다면 위와같이 ./src를 추가해주면 된다.

 

 

컴퓨터에서 선택을 바꾸어주자

 

이제 디자인은 되었으니 실재로 컴퓨터에서 파일을 선택하고 올리는 작업을 만들어 보자

 

현재는 파일을 클릭해도 파일이 들어간것을 확인할 수 없다.

 

그래서 onChange를 통해 해당 파일이 어디로 들어갔는지 확인해보자. 추가적으로 InputFile에 accept = "image/*"로 해놓았다. 이게 뭔지는 또 공부해야겠다.

 

실재로 파일을 삽입하고 정보를 출력하는 위와같이 나온다.

 

 

먼저 onChange를 위와같이 바꾸어보았다.

 

이렇게 받아온 파일을 화면에 출력해주기 위해서는 img src 부분을 바꾸어 주면 된다.

하니 위와같이 생기기는 했는데 이미지 위치가 이상하고 글자도 이상하고 버튼도 이상하고 암튼 여러가지로 수정을 해주어야겠다.

 

결국에는 선택한 이미지를 서버에 전달해주어야 한다.

 

이 preview 대신에 imageList를 만들자.

 

 

위와같이 서버로 전송하기 위한 객체를 준비하자. 서버에 파일을 업로드하기 위해서는 위에서 file에 받은 데이터 전체가 필요해진다.

 

문제는 useState를 사용한 imageList이기 떄문에 펼침연산자를 한번쓴다음에 데이터를 넣어주어야 한다.

 

그 다음 map 함수로 되어 있는 부분에 새로운 컴포넌트를 선언해주자.

 

위와같이 만들어서 파일이 계속 추가가 될 수 있도록 해주자

 

사실 추가는 되는데 이미지가 짤린다. 

 

마지막 쯤에 Textarea를 선언해서 넣고자 하는 문자도 받아오자

 

그리고 추가되는 내용은 useState 변수에 저장해주자

 

이제 포스트 업로드 버튼을 만들자.

 

포스트 업로드 버튼 클릭

0. 이미지 업로드하면 -> s3에 업로드하여 이미지 주소를 return 하는 api 작성

1. 이미지 리스트에있는 이미지들을 0의 api에 호출하여 이미지주소 배열얻기

2. content와 이미지 주소 배열을 post 업로드 api에 담아서 호출

 

form과의 차이점은 e.prevent required라던가 Enter 첬을때 업로드하는걸 

 

 

하고 uploadRouter을 추가해놓자

 

이제 express에서 1. aws와 연결할 수 있는 라이브러리 2. express에서 파일 업로드할때 필요한 라이브러리 두가지가 필요하다.

```

npm install aws-sdk multer multer-s3

```

 

이제 중요한건 aws를 연결하기 위한 key 값이다. 이건 외부에 공개하면 안되기 때문에 각자의 aws에서 긁어오자.

 

multer는 express에서 파일업로드할떄 쓰는 것이고 multerS3는 multer을 이용하면서 s3에 저장할때 사용하는 라이브러리이다.

bucket이 접근 공간 이름

acl이 접근 권한

metaData는 파일의 정보

key는 파일 이름이다.

 

 

위와같이 하면 /image로 매개변수중에서 파라미터 일므이 file인것을 upload해서 postUploadImage라고 부른다. 이러한 upload.single을 middleware라고 부른다.

 

그래서 업로드된 파일 정보를 client에게 보내주면 파일 업로드 완성이다.

 

다시 클라이언트 측으로 와서 handleSubmit 부분을 처리해보자

 

지금까지는 데이터를 그냥 보냈지만 이제는 formData에 넣어서 보내주어야 한다.

 

 

이제 위와같은 부분을 명렬로 처리할 수 있도록 Promise.all을 사용해보자.

이걸 사용하면 uploadImage의 비동기 함수를 비동기식으로 싹다 한번에 서버로 보낼 수 있게 된다. 그리고 마지막 업로드가 끝나면 주소를 반환받으면 된다.

 

배열에 비동기 함수들을 넣어주자. 이걸위해 따로 map을 돌리어서 List를 만들어주고 Promise.all을 이용해서 리스트를 전체다 보내주자.

 

이걸 처리할때 서버에서는 객체형태가 아닌 그냥 받은 데이터를 반환해주자

 

업로드된 파일을 가지고 새롭게 포스트를 추가해주는 부분도 만들어보자.

 

api폴더 안에 addPost를 추가했다. 이쪽으로 보내면 Rest API로 따지면 posts를 생성하는 api로 짐작이 된다. 이 경로로 라우터를 추가해주자

 

위와같이 /routes/posts 에 경로를 추가해주었다.

 

참고로 아까전에 uploadImage의 정확한 함수 내부를 안만들어주어서 이것부터 시작하자

import axios from "../../node_modules/axios/index";
import { Instance } from ".";

export const uploadImage = async ({ file }) => {
  const formData = new FormData();
  formData.append("file", file);
  const {data} = await Instance.post("/upload/image", formData);
  return (data);
};

들어올때 사용자 검증을 위해 jwt의 verify 함수를 사용해주었다.

이때 성공했다면 payload를 뽑아낼 수 있다. 해당 payload를 뽑아내어 사용해보자.

 

여러가지 이슈를 해결하고 payload를 확인할 수 있었다.

 

보면 위와같이 이미지 추가를 성공한 것을 확인할 수 있다.

 

여기까지만 만들고 이제부터는 BLIND를 정리하면서 Express와 Vue관련 개발을 이어나가고 개발이 끝나는데로 이곳으로 돌아와 REACT를 공부할 것이다.