안녕 칭구들!
이미지 정렬순서가 섞인다고 클레임이 들어와서 며칠 고생했는데
문득 매번 업로드할때마다 섞여버리는 정렬순서땜에 개빡...
아니 불편사항이 아주쪼끔 있는 모 커뮤니티 게시판 업로드 기능이 떠올라서 글을 써봤어요 ^^
문제 : 이미지가 왜 섞여서 배치되지...?
Input type="file"로 업로드 시키는 대부분의 웹 페이지는 업로드 버튼을 누르면 이런식으로 됨미다!
얼핏 보면 4,1,2,3으로 올라갈 것 같지만,
쨔잔! 제대로 순서대로 들어갔답니다!
사실 선택할때 순서대로 선택해둔 상태, 거기에 파일명까지 순차 정렬해둔 상태에선
파일 선택창에서 이름이 어떻게 정렬되던 상관없이, 적어도 input태그의 File 배열에는 순차적으로 들어가 있게됨미다!
즉, 파일 순서가 섞이게 되는 원인은 대부분...
Case 1 File Array에 담긴 파일 데이터를 JS단에서 리사이징, 업로드, 기타등등 메챠쿠챠 하는 과정에서
비동기 처리를 해둔게 있어서 섞였다.
-> 비동기 구문이 순차적으로 끝나주면 참 좋을텐데...처리 결과가 언제 끝날지는 모르기 때문에 섞일 수 있어요!
Case 2 파일 업로드시 반복문을 돌려서 하나하나 Ajax에 실어서 보냈다.
-> Ajax 옵션에서 async : false를 암만 줘도 DB에 들어가는 이미지가 섞여서 들어감!
스크립트와 Backend단을 암만 뜯어봐도 아무튼 그럼!
Case 3 DB Order by를 이상하게 넣거나 스크립트 버그로 이상한 순서로 섞어버렸다.
-> ㅡㅡ
해결법 1 : Input에 담긴 파일채로 그대로 Backend에 보내서 Backend에서 하나하나 처리해서 넣어준다.
-> 단점 : ja__vasc__ript에서 처리하던 주요 업무를 Backend에서 처리해야 하는데다, 한번에 통으로 올리면 경우에 따라선 중간에 붙잡혀서 업로드가 안될 수 있다.
해결법 2 : 비동기 구문에 setTimeout을 넣어준다.
-> 단점 : 가뜩이나 서버 터지기만 하면 ㅂㄹ로 관리하냐고 욕먹는데 이젠 느리다고도 욕먹어야 한다.
해결법 3 : 비동기 처리를 전부 동기식으로 바꾼다.
-> 단점 : 느린건 둘째치고 동기식으로 바꾸면...
해결법 4 : DB 업로드 파일 테이블에 정렬순서를 추가해서 FileReader 들어갈때부터 정렬순서를 신주단지 모시듯이 들고가서
DB에도 같이 담아주고, 정렬순서를 Order 조건으로 조회해서 그 순서대로 뿌려준다.
-> 단점 : 귀찮다.
결론 : 적다보니 개빡치는데 그냥 쓰면 안되요?
그냥 쓸게요 ㅠㅠ
참고로 전 개약해서 해결법 4로 해결했음 ㅠㅠ
개발자분들 힘내요 ㅠㅜ
안녕하세요 좋은글 잘봤습니다 그리고 저는 빅찌찌 강도에요 얼른 마망폴더의 짤을 내놓으세요
그것보다 저 저장된 짤 올려봐라
보통은 해결법 1을 많이 씀. 이미지 전용 처리서버를 따로 두지 해결법 2, 3 하면 안되는 짓 해결법 4. 가장 일반적인 해결방법
이건 내가 만들어서 공개한 파일 선택UI 라이브러리 https://blog.danggun.net/8254 근데 이거 루리웹 이미지 업로더가 개판이라고 까는 글인거지??
"짤 > 마망" 이 너무 강하다아아아앗!!!!
그냥 배열 만들어서 파일인풋으로 받은거 순서대로 개체생성해주고 그거기준으로 작업하던가 인덱스를 넣어주던가 하면 비동기고 자시고 상관없이 순서안꼬이고 처리가능하다. 그리고 이게 원래 정석 방법인데 파일 업로드 라이브러만들어서 공개한놈들조차 이짓 안해서 파일꼬이는거 가끔보는데 짜증이 ㅋㅋㅋ 이렇게 만들어진 모델정보는 클라이언트에서 맴버 수정해가면 처리해주다가 마지막에 업로드할때만 처리하면 서버부하도 적고 반응성도 좋음
그것보다 저 저장된 짤 올려봐라
음 기억할게?
Powder Snow
찌찌 다이스키!
보통은 해결법 1을 많이 씀. 이미지 전용 처리서버를 따로 두지 해결법 2, 3 하면 안되는 짓 해결법 4. 가장 일반적인 해결방법
신주단지 모시듯이 들고간다는 표현이 너무 웃김 ㅋㅋㅋㅋ
async / await로 처리하거나.. 업로드 하는 순간 바로 이미지 서버로 업로드 시키고 그 결과를 프론트에서 잠시 가지고 있거나 백엔드를 바이패스로 사용해서 백엔드에서 이미지서버로 바로 보내고 이미지 정보를 db로 업데이트하는 작업을 백엔드의 큐에 넣거나.
"짤 > 마망" 이 너무 강하다아아아앗!!!!
JuiceRed
요새 반응형이라고 모바일 껴서 쓰다보니 input 받아온 파일데이터를 리사이징해서 새로 그려서 Base64로 바꿔서 업로드하는데가 많던데 윗 분들처럼 전용 서버로 바로 보내는거 아니면 리사이징 과정에서 비동기를 너무 많이 타서 간헐적으로 섞이더라그여 ㅠ
안녕하세요 좋은글 잘봤습니다 그리고 저는 빅찌찌 강도에요 얼른 마망폴더의 짤을 내놓으세요
그러니깐 돈없으면 순서를 신줏단지 모시듯 하고 돈많으면 이미지 서버 구축하라는거지?
내 맞워요! 그러니 혹시라도 ㄹㄹ웹 개발자가 이 글을 본다면 지니난님께 이미지 서버 사달라고 조르도록 하세요!
빨리 마망 폴더의 빅찌찌 짤을
마망 ㅋㅋㅋ
짤 공유좀 해주세영
일단 파이즈리 장인 좋아하는건 알겠다
이건 당연히 백단에서 따로 처리해야지 왜 비동기에서 동기식 처리 하려고함..
그냥 배열 만들어서 파일인풋으로 받은거 순서대로 개체생성해주고 그거기준으로 작업하던가 인덱스를 넣어주던가 하면 비동기고 자시고 상관없이 순서안꼬이고 처리가능하다. 그리고 이게 원래 정석 방법인데 파일 업로드 라이브러만들어서 공개한놈들조차 이짓 안해서 파일꼬이는거 가끔보는데 짜증이 ㅋㅋㅋ 이렇게 만들어진 모델정보는 클라이언트에서 맴버 수정해가면 처리해주다가 마지막에 업로드할때만 처리하면 서버부하도 적고 반응성도 좋음
당근천국
이건 내가 만들어서 공개한 파일 선택UI 라이브러리 https://blog.danggun.net/8254 근데 이거 루리웹 이미지 업로더가 개판이라고 까는 글인거지??
이렇게 이미지 여러 개 보내면 압축되서 서버로 전해지는 거지?
ㅋㅋㅋ 왜 짤 얘기가 더 많아 ㅋㅋㅋㅋ