[패스트캠퍼스X야놀자] 프론트엔드 개발 부트캠프_Javascript 과제

 

이번에 패스트캠퍼트X야놀자 부트캠프 프론트엔드 과정의 Javascript 과제로

직원 사진 관리 서비스 라는 주제로 프로젝트를 하게 되었습니다.

| 설명

간단한 유저의 정보와 사진을 앨범 형식으로 관리할 수 있도록 만들었습니다.

| 중점사항

사진을 관리하는데 있어서 AWS s3를 사용하였습니다. 이 과정에서

AWS s3 를 제대로 이용해보고 싶은 마음이 생겨서 프로젝트의 방향을

AWS s3의 학습에 초점을 두고 진행을 해보았습니다.

| 구현 내용

1. 유저 생성

프로필 사진을 등록하고(안 하면 기본 사진) 간단한 정보를 입력 후 유저를 생성합니다.

💡 유저를 생성하면 AWS s3 버킷에 유저의 고유한 id 값을 이름으로 한 폴더가 생성되고, s3 버킷 안에 전체 유저의 데이터가 담겨 있는 json 파일을 가져온 후 유저를 업데이트, 저장합니다.

2. 프로필 정보 변경

유저의 정보나 프로필 이미지를 변경합니다.

💡 유저의 정보는 s3 버킷 안에 json 파일을 가져와 업데이트합니다. 또한 프로필 사진은 유저가 생성될 때 만들어진 유저의 고유한 id 값을 이름으로 가진 s3 버킷 안 폴더의 첫번째 경로에 저장이 됩니다. 만약 기존의 프로필 사진을 다른 사진으로 변경하면 s3 버킷의 폴더의 첫번째 경로에 저장된 기존 프로필 사진 데이터가 삭제되고 새로운 사진으로 교체되도록 코드를 작성하였습니다.

3. 유저 삭제

등록된 유저를 삭제합니다.

💡 s3 버킷 안에 json 파일을 가져와 해당 유저를 삭제한 후 업데이트합니다. 또한 유저가 생성될 때 만들어진 s3 버킷 안에 고유한 id 값을 가진 폴더도 같이 삭제됩니다.

4. 유저 검색

등록된 유저를 이름으로 검색합니다.

💡 s3 버킷 안에 json 파일을 가져와 유저의 이름에 검색어가 포함되면 화면에 출력해 줍니다.

5. 앨범 생성 및 삭제

자신이 관리하고 싶은 이미지를 넣을 앨범을 생성하고 삭제할 수 있습니다.

💡 s3 버킷 안에 해당 유저의 고유한 id 값을 가진 폴더의 첫번째 경로에 생성하고자 하는 이름을 가진 폴더를 생성합니다. 앨범을 삭제하면 고유한 id 값을 가진 폴더의 첫번째 경로에 생성되었던 앨범을 삭제합니다.

6. 앨범 커버 이미지 변경

생성한 앨범의 커버 이미지를 변경합니다.

💡 앨범의 커버 이미지는 생성될 때 기본 이미지로 생성이 되고, 앨범 내부의 이미지를 추가하면 앨범의 커버 이미지가 앨범 내부 첫 이미지로 변경이 됩니다.

7. 이미지 추가 및 삭제

앨범 내부에 이미지를 업로드하고 삭제 합니다.

💡 앨범 내부에 이미지를 추가 및 삭제할 수 있습니다. 이미지를 추가하면 s3 버킷 내부 해당 유저의 고유한 id 가진 폴더를 찾고, 그 폴더 내부에 해당 앨범을 찾은 후 그 앨범 폴더 내부에 이미지 데이터를 저장합니다. (이미지는 박스 안에 드래그하면 미리보기가 생성된 후 Add 버튼을 누르면 추가, Cancel 버튼을 누르면 취소됩니다.)

| AWS s3 버킷 데이터 저장 구조

이번 과제를 하면서 s3를 데이터베이스 느낌(?)으로 사용을 하였기 때문에

데이터 저장 구조를 만들어 봤습니다.

s3 bucket
  ├─user1 id 폴더
  │       user1프로필사진.jpg
  │
  │       album1 - 이미지들 저장
  │       album2 - 이미지들 저장
  │      
  ├─user2 id 폴더
  │       user2프로필사진.jpg
  │
  │       album1 - 이미지들 저장
  │       album2 - 이미지들 저장
  │
  ├─user3 id 폴더
  │       user2프로필사진.jpg
  │         
  │       album1 - 이미지들 저장
  │       album2 - 이미지들 저장
  │
  └─user.json - 유저 정보 저장

| 반응형 구조

완벽하진 않지만 반응형 구조도 만들어 봤습니다.