{"id":23366630,"url":"https://github.com/asdf56782/Image-Management","last_synced_at":"2025-10-29T01:31:40.674Z","repository":{"id":37297572,"uuid":"497229109","full_name":"imzero238/Image-Management","owner":"imzero238","description":"사진을 업로드하고 Infinite Scroll으로 모든 사진을 보는 서비스","archived":false,"fork":false,"pushed_at":"2024-11-23T22:33:44.000Z","size":43480,"stargazers_count":1,"open_issues_count":15,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-21T14:16:50.748Z","etag":null,"topics":["aws","mongodb","nodejs","react","reactjs","s3"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imzero238.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-05-28T06:03:43.000Z","updated_at":"2024-11-23T22:35:23.000Z","dependencies_parsed_at":"2024-03-03T04:35:18.466Z","dependency_job_id":null,"html_url":"https://github.com/imzero238/Image-Management","commit_stats":null,"previous_names":["nayoung8142/image-management","imzero238/image-management"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imzero238%2FImage-Management","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imzero238%2FImage-Management/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imzero238%2FImage-Management/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imzero238%2FImage-Management/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imzero238","download_url":"https://codeload.github.com/imzero238/Image-Management/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238754970,"owners_count":19525038,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aws","mongodb","nodejs","react","reactjs","s3"],"created_at":"2024-12-21T14:16:58.218Z","updated_at":"2025-10-29T01:31:35.620Z","avatar_url":"https://github.com/imzero238.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 이미지 관리 서비스\n\n- Front-end:\bReact\n- Back-end: Node.js\n- Database: MongoDB\n- Storage: AWS S3\n\n\u003cbr\u003e\n\n\u003cimg src=\"https://user-images.githubusercontent.com/54436228/173770479-4ae612ed-3da8-4f5e-b134-f18ba1b0570e.gif\" /\u003e\n\n- 사용자가 이미지를 공개/비공개로 업로드하고\n- Cursor-based pagination 기반의 Infinite Scroll으로 업로드한 사진 확인하는 서비스\n\n\u003cbr\u003e\n\n![](/_img/service_architecture.png)\n\n- 사용자가 이미지 **GET** 요청하면 서버를 거치지 않고 AWS S3에 접근해 이미지를 가져옴\n- 사용자의 이미지 **POST** 요청은 **해당 서비스에 권한이 있어야 하므로** 서버에게 **Pre-signed Url**을 받아와 AWS S3에 접근해 저장\n- 원본 이미지를 raw 폴더에 저장하고 **AWS Lambda**를 사용해 원본 이미지를 2가지 사이즈로 규격화\n- 사용자가 이미지 **POST** 요청하면 서버는 MongoDB에도 저장\n\n\u003cbr\u003e\n\n## 🛠 기능\n\n### 계정\n\n- 회원 가입, 로그인 그리고 로그아웃\n- 회원 가입을 하면 **password 암호화**\n- 회원 가입과 로그인 후 사용자 상태가 유지될 수 있도록 session 적용\n\u003cbr\u003e\n\n### 이미지\n\n- 이미지 업로드되는 상태를 출력하기 위한 Percentage bar 기능 추가\n- 이미지 업로드하면 Main Page에 바로 출력\n- 이미지 공개/비공개로 구분\n\u003cbr\u003e\n\n### 이미지 관리\n\n- **MongoDB**와 **AWS S3**에서 이미지를 관리\n- **AWS S3**에서 원본 이미지를 2가지 사이즈로 규격화하여 관리\n\u003cbr\u003e\n\n### 이미지 출력\n\n- **데이터가 중복 로드되는 것을 막기 위해** Cursor-based Pagination 적용\n- Infinite Scroll 적용\n\n\u003cbr\u003e\n\n## ❗️ 발생한 이슈\n\n### 비동기 처리로 인해 접근 권한을 받지 못한 문제\n\n- 비공개 이미지를 가져올 때 접근 권한이 없다는 문제가 발생해 이미지 로드 불가능\n- JavaScript의 비동기 처리로 인해 발생하는 문제였으며, 접근 권한을 확인하는 작업과 이미지를 가져오는 작업의 순서를 제어해 해결함\n  - callback 함수가 실행되는 우선순위는 Microtask Queue \u003e Animation Frame \u003e (macro) Task Queue\n  - 접근 권한을 확인하는 작업에는 ```async/await``` 를 사용해 **Microtask Queue**에서 처리\n  - 이미지를 가져오는 작업에는 ```setTimeout()``` 을 사용해 **(macro) Task Queue**에서 처리\n\n\u003cbr\u003e\n\n### AWS S3 연결하고 발생한 문제들\n\n\u003e https://medium.com/@im_zero/aws-s3-pre-signed-url-%EC%82%AC%EC%9A%A9-%ED%9B%84-%EB%B0%9C%EC%83%9D%ED%95%9C-%EB%AC%B8%EC%A0%9C%EB%93%A4-feat-cors-fc5fdfe4077d\n\n- AWS S3를 연결하고 **CORS 정책 문제**가 발생했는데 구성을 추가해 해결\n- 사용자가 이미지를 업로드하면 새로고침을 해야만 화면에 출력되는 문제가 발생했고 이는 접근할 수 없는 image source에 접근했기 때문에 생긴 문제\n    - 이를 image source가 유효한지 확인하는 Component를 생성해 해당 문제를 해결\n- 사용자가 업로드하는 이미지의 크기는 다양하기 때문에 규격화하여 이미지를 가져올 때의 속도를 개선하고자 함 \n\u003cbr\u003e\n\n### Infinite Scroll 구현하고 발생한 문제들\n\n\u003e https://medium.com/@im_zero/infinite-scroll-encountered-two-children-with-the-same-key-%EC%97%90%EB%9F%AC-48c62db262e1\n\n- 스크롤을 내리면 새로운 이미지가 제대로 로드되었지만 스크로를 다시 위로 올리면 Same Key라는 문제가 발생\n    - 이는 Observer에게 기존 관찰 대상에 대한 관찰을 중지시켜 문제 해결\n- 특정 이미지에 대한 상태를 변경하고 Main 화면으로 돌아오면 이미지가 알 수 없는 순서로 재배치됨\n    - 이는 이미지를 불러올 때 정렬 기준을 잘못 작성해 발생한 문제\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasdf56782%2FImage-Management","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasdf56782%2FImage-Management","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasdf56782%2FImage-Management/lists"}