웹서버) 이미지 첨부 관련해서 chatGPT랑 싸우고 있는데요.... 어떡하죠

Question

SPA 프로젝트에서 이미지를 src에 넣기 vs public에 넣기로 질문을 했는데src에 넣으면 추후 빌드시 base64 인코드 되고 컴파일 과정에서 에러가 잡히니 이미지를 못찾을 염려(404)가 없습니다.그리고 http요청으로 이미지를 불러오는게 아니니까, 요청수가 줄어들어서 속도적인 면에서 이득이 있죠.근데 base64는 일반적으로 인코딩 하기 전의 이미지 파일보다 용량이 크다고 합니다. 로딩속도가 느려지는거죠.그래서 이거 모순 아니냐고,결국 뭐가 더 빠른거냐 chatGPT한테 계속 물어보고 있는데 제가 잘못했습니다 하고 말을 자꾸 바꿔서....... 아직 AI의 한계를 느끼고 있습니다....예를 들어서 요청수 50개 이미지인데 5kb인거요청수 1개 이미지인데 400kb인거이거 뭐가 빠른지 알기 힘들잖아요....?그리고 실제로 요즘같은 LTE시대에는 저 두개에서 &#34;엄청난 차이&#34;를 느끼기도 힘들 것 같구요...다름이 아니라,FE구축을 할 때 기준이라는게 있어야 할 것 같아서 이렇게 질문을 드립니다.그리고 이런 부분까지, 성능적인 부분을 전부 신경쓰고 프론트를 만들고 계신분 혹시 계실까요?

껀혀 · Answer

프로젝트가 정확히 어떤 상태인지 몰라서, 답을 못하겠지만 큰 성능차이가 발생하지 않으면 굳이 보진 않습니다.다만, 성능을 신경쓴다면 사소한 것도 신경을 쓰는 것 아닐까요 ?

HJOW · Answer

맞기도 하고 틀리기도 하니 (성능 측정 관점에 따라서) 저런 결과가 나오는 겁니다.base64 / url 방식 이미지 사용 비교를 해보면base64는 프로세스 성능으로 보면 비효율적입니다. 애초에 바이너리인 데이터를 문자열로 억지로 바꿔서 (1글자당 64비트) 출력한거니 문자열 용량 자체도 크고, 출력할 때 다시 역연산을 해야하고URL방식은 그런 염려는 없죠.그러나base64 연산 주체는 사용자의 PC입니다. 요새 PC들 성능이 꽤 좋잖아요? 램도 다들 16GB 이상씩 쓰시고. 효율이 나쁘더라도 이미지 수가 많지 않다면 티가 잘 안납니다.반면 URL방식은 어찌됐든 통신을 통해 데이터를 받아와야 합니다. 인터넷 속도가 느리면 PC성능이 제 아무리 좋아봤자 소용이 없죠.반대로이미지 수가 엄청나게 많거나이미지 크기가 엄청나게 크다고 가정해봅시다. URL방식으로 첨부하면 문제가 없는 이미지이지만 Base64로 뻥튀기시키면 메모리 용량 초과하는...당연히 문제가 달라지겠지요?단순히 뭐가 &#34;빠르다&#34; 로 끝낼 문제가 아니라는 겁니다.어느부분이 빠르고 어느부분이 느리다근데 갯수가 많아지면 이 방식이 더 유리하더라

마사키군 · Answer

위앳분도 말씀하셨지만, 케바케이기 때문에 저런식으로 답변하는 겁니다. 이건 프롬프트의 이슈는 아닌거 같은데요.단순히 그때그때 HTTP 요청을 통해 가져오려고 한다면 Base64 인코딩된 결과물이 원본보다 용량이 크니(약 1.3~1.5배 정도로 알고 있습니다) 속도와 퍼포먼스 면에서 손해를 볼겁니다.하지만 속도 면에서 딱히 고려할 필요도 없을 정도로 작은 이미지라면 1.5배 한다 한들 그렇게 크지 않을 테니까 퍼포먼스 면에서 이익이겠죠.

rarity · Answer

개념에 혼돈이 있으신 걸로 보입니다.처음은일단 이미지 전송의 http 표준은 base64 인코딩 문자열이 아닌 멀티 파트를 이용한 바이너리 파일 전송입니다.표준을 안 지켰는데 에러와 이미지를 못 찾을 염려 등등 말씀하시는건멀티파트가 표준인게 잘못되었다는 말과 같습니다.다음은SPA 프로젝트에서 src 폴더를 컴파일 한다고 해서 기계어와 가까운 언어로 컴파일링 되는게 아니라JS로 컴파일 됩니다. 이 때 SRC 들어있는 파일이 bas64로 인코딩 되겠지요?클라이언트는 웹서버에 HTML/JS/CSS를 HTTP 리퀘스트를 합니다.이 때 로컬 시스템 root 디렉토리에 있는 이미지 파일은 바이너리 파일로 전송되고SRC에 있던 이미지는 base64 문자열로 HTML/JS 파일 문서에 포함되어 전송됩니다.하나의 서버에서 요청이 전달 되는데 그것도 표준방식인데 느릴리 없겠지요.다만 SPA 프로젝트 대부분 PUBLIC 폴더를 사용하는 경우PUBLIC_URL을 거치게되고 이 경우 공용 DNS(=PUBLIC_URL)이기 때문에client가 해당 DNS에서 HTML 한번 PUBLIC 한번 두 바퀴 돌게 되어서 HTTP 요청이 많아지게 됩니다.이런 경우 해결 방법으로는 리버스 프록시 서버를 사용하시면내부 DNS를 사용하여 네트워크가 크게 돌지 않고가장 좋은건 루트 디렉토리를 사용하셔서 쓰시면됩니다.그런데 이런 개념을 몰라도 SRC 넣으면 충분하 잘되니까세팅 다 해가면서 리버스 프록시 서버 만들지 마시고SRC에 넣어서 BASE 64 인코딩으로 만드시면 도비니다 !

웹서버) 이미지 첨부 관련해서 chatGPT랑 싸우고 있는데요.... 어떡하죠

4개의 답변

Q&A 목록