TeamProject
좌표 이미지 등록 js, css, api(POST) 부분을 작성하였다.
동작
이미지 업로드에 있어 type='file'을 이용하여 파일을 업로드할 수 있게 하였고, 이미지 업로드할 때 선택 이미지 미리 보기, 이미지 db 저장
동작 과정
이미지 검색 및 미리보기
이미지 업로드 완료창
db에 저장된 값
작성 과정
1) file을 올리기 위한 input type='file' 이해
- 강의를 참고하여 파일을 올리기 위해 input type='file'을 이용하였다. 스타일이 마음에 안 들었고, 올리는 파일 이름까지는 알지 않아도 돼서 css를 바꿔주고 기존의 file 창은 display='none' 해 주고 for=id로 연결하여 기능만 살려 활용하였다.
2) 좌표 값 가져오기
- JavaScript에서 클릭 시 좌표값을 가져오는 것을 구현해 놓았는데, 이 값을 다시 가져와서 db에 저장하려 했는데 JavaScript로 가져오는 함수와 post 하는 함수와 따로 있어 해당 좌표값을 바로 가져오는 마땅한 방법을 몰랐다. 그래서 일단 html에 간단하게 div를 만들어 id 값을 주고 value 값을 id 값을 이용해 JavaScript에서 가져온 값(좌표)으로 지정해 주었다. 이렇게 주어진 value 값을 post 함수에서 다시 id 값으로 찾아 저장해 주었다.
3) 이미지 미리보기
- 미리 보기 과정은 방법을 잘 몰라서 검색해서 방법을 찾았다. 그런데 작성하고 이미지를 업로드해 보았는데 크기가 제각각 이어서 css에서 수정하느라 애먹었다. 결과는 이미지 가로 크기는 일정하고 세로는 max_height 값으로 지정해 줘서 넘치는 이미지를 조정해 주었는데 문제는 세로 길이가 지정해 준 길이보다 작으면 위로 정렬되어서 나오는 것이다. 원하는 것은 중앙에 배치되는 것이었지만 이것저것 정렬이나 center를 맞춰주어도 변화가 없어서 일단 내버려 뒀다. 그리고 이미지 미리 보기에 있어 원래는 3장까지만 보이고 등록 되게 하려 했지만 아직 구현이 안 됐고 지금은 여러 장 미리 보기가 가능하다.
4) db저장
- 일단 이미지를 좌표값과 시간 파일명으로 저장하였다. 내일 이 부분에 있어 좌표값을 유지시켜주고 해당 좌표값에 이미지들을 쌓는 작업을 할 예정이다. 그리고 db에 한 번에 3장 이상 저장 가능하게 리스트를 구현해 볼 예정이다.
-머릿속에서는 구현 순서나 방법이 크게 잡히는데 실제로는 쉽지 않다는 걸 느꼈다.-
