프론트엔드에서 JavaScript를 사용하여 AWS S3와 연결하여 이미지 업로드, 수정, 삭제 및 관리를 할 수 있다. AWS S3는 웹 애플리케이션에서 정적 파일(이미지, 동영상, 문서 등)을 저장하고 관리하는데 매우 유용한 클라우드 스토리지 서비스이다.
간단한 가이드라인
(실제 구현시 AWS SDK 및 필요한 보안 구성을 고려해야 함)
- 업로드 : 이미지를 업로드하려면 AWS SDK를 사용하여 S3 버킷에 파일을 업로드 할 수 있다. 예를 들어, AWS JavaScript SDK를 사용하여 업로드할 수 있다. 업로드할 파일을 선택하고 JS 코드에서 해당 파일을 S3 버킷으로 업로드할 수 있다.
- 수정 : 이미지를 수정하려면 해당 이미지의 키(경로)를 알고 있어야 한다. 이를 통해 이미지를 식별하고 수정할 수 있어야 한다. 업로드와 유사하게 수정된 이미지를 새로운 키로 업로드하거나, 해당 이미지를 다운로드 하여 로컬에서 수정한 후 다시 업로드 할 수 있다.
- 삭제 : 이미지를 삭제하려면 해당 이미지의 키를 사용하여 S3 버킷에서 이미지를 삭제할 수 있다. AWS SDK를 사용하여 삭제 요청을 보내거나, 웹 애플리케이션에서 서버측 API를 호출하여 삭제 작업을 수행할 수 있다.
- 관리 : AWS S3 버킷의 이미지 목록을 가져와 사용자에게 표시하거나, 이미지에 대한 메타데이터를 관리하려면 AWS SDK를 사용하여 버킷 내 파일 목록을 가져오는 작업을 수행할 수 있다.
보안 및 엑세스 권한 관리 중요한 측면이다. AWS IAM을 사용하여 엑세스 권한을 관리하고 필요한 경우 CORS를 설정하여 웹 애플리케이션에서 S3 리로스에 접근할 수 있도록 해야 한다.
AWS 이미지 저장을 위한 S3버킷 생성하기
- 버킷 생성하고 버킷 결과 정책 생성 참고 블로그
https://jforj.tistory.com/260
이미지 파일 업로드하기
- s3에 파일을 업로드할 수 있는 방법은 여러가지이다.
1.서버에서 파일을 받아 서버에서 업로드하기
2.프론트에서 AWS SDK를 이용해서 바로 업로드하기
3.서버에서 President url을 받아서 프론트에서 업로드하기
2번 방식을 이용한 이미지 업로드
- 버킷 생성과 접근 권한 설정을 한 후에,
- CORS 설정 : 클라이언트에서 바로 s3로 업로드하려면 CORS 설정이 꼭 필요하다.
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
] CORS (Cross-Origin Resource Sharing) 구성은 모든 도메인에서의 요청을 허용하며, PUT, POST, DELETE 메서드를 허용하도록 설정한 것입니다. 따라서 모든 도메인에서 AWS S3 버킷에 접근하여 PUT, POST, DELETE 메서드로 데이터를 보낼 수 있게 됩니다.
여기서 주의할 점은, 모든 도메인을 허용하는 것은 보안적으로 좋지 않을 수 있습니다. 웹 애플리케이션에서는 필요한 도메인만을 허용하도록 구성하는 것이 좋습니다. 특정 도메인만을 허용하도록 CORS 구성을 업데이트하려면 AllowedOrigins 배열에 허용하려는 도메인을 추가하면 됩니다.
또한, AllowedMethods를 더 제한적으로 구성하여 필요한 HTTP 메서드만 허용하거나, AllowedHeaders를 조절하여 어떤 헤더를 요청에 포함할 수 있는지 제한하는 것도 좋은 아이디어입니다.
CORS 설정을 제대로 구성하는 것은 보안 및 데이터 무결성 측면에서 중요합니다. 필요한 요청만 허용하고, 출처가 신뢰할 수 있는 도메인에만 접근을 허용하도록 구성해야 합니다.
- AWS SDK
Presigned url 방식보다 더 간단한 방법으로 서버쪽 코드가 아예 없어도 된다. AWS SDK는 AWS 리소스에 엑세스하기 위한 공식 소프트웨어 개발 키트로 자바스크립트 API를 제공한다. SDK를 사용하면 클라이언트측에서 직접 AWS서비스와 상호작용할 수 있고 SDK함수를 사용해서 파일을 업로드할 수 있다.
클라이언트에서 직접 상호작용하기 때문에 엑세스키 같은 자격 증명이 필요한데, 노출되면 안되는 정보이기 때문에 환경변수 파일에 추가해서 관리해야 한다.
브라우저에서 AWS SDK를 사용하려면, 브라우저에서 실행 가능한 AWS SDK 버전을 스크립트 태그를 통해 HTML 파일에 추가해야 합니다. 이를 통해 AWS SDK의 클라이언트 측 버전이 웹 페이지에서 로드되고 사용될 수 있습니다.
Principal : 특정 사용자에 대해 권한을 제어하고 싶다면 입력한다.
(전체 : * / 특정 사용자 : arn:aws:iam:AWS-account-ID:user/IAMID)
막혔던 부분
1. async, await의 이해 부족
2. function, 함수화살표 더 이해 하기!
3. aws CLI 사용, 엑세스키 ,시크릿 키 설정해두기
4. 엑세스키..시크릿키..어케숨겨
5. 이미지 삭제 과정에서 받아온 profilImage의 name을 alt로 저장해서 이를 이용해서 사진을 삭제하는 건데, 이 때 직원을 등록할 때 사용하는 직원 이름인 변ㅇ수 name과 겹쳐서 계속 직원의 이름이 받아와져서 s3의 key값과 동일하지 않아 삭제가 되지 않았다. 겹치는 것을 알고 직원 이름을 받아오는 변수명을 다르게 하였더니 이미지의 nmae이 잘 받아와져서, s3에서 삭제가 잘 되었다.
6. js 파일에서 input요소를 직접 만들어서 추가할 때 , 바로 브라우저에 나타나는 것이 아닌, 그것은 선언일 뿐이고 실행을하려면 div에 추가하거나, 따로 실행을 시켜줄때 나타난다
전역변수로 빼기위해 먼저 선언을 한다고 나타나지 않는다
7. netlify로 배포를 하려고 하였으나, 404에러가 계속 발생해서 AWS 호스팅을 이용해서 사이트 배포를 하였다. 객체의 파일 업로드를 하였더니 정적 웹 사이트 호스팅이 되어 링크를 받을 수 있었다.
block, inline-block 등 공부
렌더링 방식이란 프로그래밍에서 콘텐츠를 화면에 그려주는 과정을 의미합니다. 이전 코드와 비교하여 새로운 렌더링 방식이 어떤 점에서 다른지 설명드리겠습니다.
기존 코드에서의 렌더링 방식:
기존 코드는 직원 등록 버튼을 클릭할 때마다 직원 정보를 생성하고 바로 리스트에 추가하는 방식입니다. 이때, 새로운 직원 정보가 생성되면 그 즉시 DOM 요소를 생성하여 리스트에 추가합니다.
이 방식은 실시간으로 리스트에 직원 정보가 추가되는 것처럼 보이지만, 실제로는 사용자가 동작할 때마다 직원 정보를 즉시 렌더링하여 화면에 표시하는 것입니다.
새로운 렌더링 방식:
새로운 렌더링 방식은 새로운 직원 정보를 employees 배열에 추가하고, 이후에 한 번에 리스트에 렌더링하는 방식입니다. 즉, 직원 등록 버튼을 클릭하더라도 바로 화면에 추가하지 않고, 사용자가 필요한 때에 리스트에 통째로 렌더링하는 것입니다.
새로운 직원 정보를 추가할 때마다 employees 배열에 정보를 추가하고, 필요한 시점에서 renderEmployeeList 함수를 호출하여 employees 배열의 모든 정보를 리스트에 렌더링합니다. 이렇게 하면 여러 개의 직원 정보가 모일 때까지 렌더링을 지연시켜 성능을 개선할 수 있습니다.
이러한 렌더링 방식의 차이점은 사용자 경험과 성능에 영향을 미칩니다. 새로운 렌더링 방식은 여러 개의 직원 정보가 추가될 때마다 한 번의 렌더링만 발생하므로 화면 갱신이 더 효율적입니다.
