Thumbnail 및 DynamoDB Update 기능 구현

[oryondark]

1. Thumbnail을 구현
2. Done Button을 구현하고, Done 버튼 클릭 시 DynamoDB로 Done Update 구현

   추후 Image Selection List Box에 연동하여, Done 항목이 False List만 받아오도록 수정

[oryondark]

교수님. selection box 또한 DynamoDB로부터 먼저 현재 image 정보를 확인하고 List를 Update받도록 구현하는 것이 맞는 것 같은 생각에 DyanmoDB Table Reader 및 Thumbnail Load 기능 일부를 우선적으로 구현하였습니다.

1. 현재 상단에 Test를 위한 Button 2개가 구현되어있습니다.
   • read item = DynamoDB에서 Table 정보를 받아옵니다.
   • put item = 받아 온 Table 정보를 put item button Event를 통해 Thumbnail을 Load합니다.

     현재 받아오는 정보는 테스트를 위해 수기로 작성된 몇가지 img 이름 및 path정보가 저장되어있습니다.

image snap shot

1. button event 시작 전

   

2. button event 시작 후

   

Link DynamoDB_정리 문서<지속 업데이트 중>

[oryondark]

교수님. Slide 구현이 완성되었습니다.

우선은 슬라이드 기능만 구현해 둔 상황입니다.

1. Slide Box(노란색 테두리) 내에서 마우스 클릭 후 좌우로 이동하면, 이미지 전체가 좌우로 이동합니다.
2. 테스트를 위하여 각 이미지 클릭 시, alert함수를 호출하며, alert된 내용은 이미지 이름이 노출됩니다.

   ex) img1.jpg 현재 Preview로 이미지가 Load되는 기능은 구현이 되지 않았습니다.

[kmu-leeky]

오케이. 잘 확인함. 그럼 이게 그림이 3개보다 많으면 옆에있는 다른게 보일수도 있는건가?

[oryondark]

네 노란테두리 안에 이미지가 나열되며, overflow되는 이미지들은 보이지 않으며 드래그를 통해 확인이 가능합니다.

[kmu-leeky]

그러면 스크롤의 효과를 볼 수 있도록 샘플 그림들을 몇개더 추가해줄래?

[oryondark]

네 현재 이미지 몇가지 추가했습니다.

[oryondark]

DynamoDB 에서 각 행의 Key 값은 WorkerID이며, String 정보로 저장합니다. 각 Column은 아래와 같은 정보로 저장되어 있으며, 작업완료 상태는 Bool 타입입니다.

  "ImageName": {
    "done": true,
    "path": "Images/example_folder/ImageName.jpg"
  }

각 클라이언트마다 서로 다른 이미지가 썸네일로 Load되도록 구현했습니다.

[kmu-leeky]

"bluestripe" 는 어떤 정보인거야? 위의 예제는 어디에서 사용되는 예제인거야?

[oryondark]

네 교수님. 이미지파일 이름입니다. 예제를 수정했습니다.

[oryondark]

Thumbnail 이미지의 LazyLoading을 사용하였습니다. 따라서 사용자는 현재 볼 수 있는 썸네일 이미지를 확인할 수 있으며, 좌우로 스크롤 할 경우, 필요한 썸네일 이미지를 다운로드합니다.

이 기능을 통해 더 이상 페이지에서 썸네일 로드로 시간이 걸리는 부분을 해결하였습니다.