웹 코딩 처음 배운지 3년 가까이 됐으니까

슬슬 가벼운 마음으로 도전해봐야지라고 했던건데


고전적인 웹서버 구조가 아니라

최근에 가장 주로 쓰이는 웹 서비스 환경 구조는

1. 백엔드의 인프라와 DB조작과 API제공을 해주는 백엔드 서버가 있고

2. 프론트엔드에서 react나 vue로 웹페이지를 띄워주는 주체(?)가 있는데

3. 그거를 사용자는 웹브라우저로 url 입력하고 접속해서 보는건데


근데 여기서 모순이랄까 희한한 한계점이 있더라고요

프론트엔드에서 html과 JS 코드로

사용자가 원하는 파일을 사용자 본인의 컴퓨터로 "다운로드" 받게 하는게 가능하고요(3에서 다운로드)

사용자가 웹브라우저에 올린 파일을 "백엔드" 서버에 저장하는 것도 가능합니다(1에 저장)


여기까지는 당연한건데 이제 뜻밖의 문제가 생기더군요.

중간에 있는 2번

프론트엔드 환경을 구동하는 주체의 내부 경로에는

사용자가 올리려는 파일을 저장하는 것이 불가능하다는 것을 알게 되었는데

이게 받아들이기가 너무 힘들더라고요

정말 이게 말이 되는가?


사용자가 업로드 하고싶어서 직접 선택한 파일은

html의 <input type="file">과 같은 인터페이스에 첨부되고

그거를 new formData();에 append 하고 서버로 요청 날리면 1번의 백엔드에서 서버 내부 경로에 저장하잖아요

그런데 예를 들어서

vue나 react에 

/public이라는 폴더 경로가 있다면,

만약에 그 /public이라는 폴더에

사용자가 올리려는 이미지 파일을 저장할수있다면

프론트엔드에서는 어디에서나

src에 "@/public/이미지파일.png"를 넣으면

그 파일을 간단하게 보여줄수있는데

그렇게 할수있는 방법을 최대한 찾아봤는데도 없더라고요.


근데 파일을 백엔드 서버에 저장하거나

사용자가 본인 컴퓨터에 다운로드 받는건 가능한데

왜 중간에 프론트엔드쪽 경로에는

사용자가 올린 파일을 저장하지 못하는걸까요?

이게 잘 납득이 되지않는데

그냥 그러려니 하고 받아들이고는 있습니다만

아직도 이게 왜 안되는것인지가 굉장히 궁금하네요

그리고 진짜 실제로 이게 불가능한건 맞는지도 여전히 의심되는데

아무튼 이게 어떻게 된건지 설명 좀 해주시면 고맙겠습니다.