환경구성 관련하여 질문드립니다.

Question

안녕하세요. 강의 잘듣고 있습니다!! 강의를 듣고 이제 프로젝트 구성하여 진행하려고 합니다.  현재 구성 설계는  front end  was spring boot + gradle + vue.js + webpack + vuecli back end was spring boot + gradle + jpa + oracle  아직 개념이 많이 안잡혀서요. 도움이 필요합니다!! 도와주세요 ㅠㅠ back 쪽은 위와같이 구성하여 api만들어서 호출하면될것같은데  front 쪽이 정확하게 개념이 안잡히네요  vuejs 만든 클라이언트 view 화면에서 front-end was 의 컨트롤러를 호출하고 그 컨트롤러에서 다시 back end was api 를 호출 하는 식으로 하는 구성하는게 옭은거죠? view에서 front-end was를 호출안하면 스크립트 조작이 가능한거 아닌가요? 검색해도 자료들도 잘 안나오고...  vue 프로젝트에서 바로 api쪽을 호출하는 예제들만 많아서요 .. 조언 부탁드립니다.  감사합니다.

캡틴판교 · Answer

안녕하세요 hwk님, 좋은 질문 주셨네요! 프런트엔드 프레임워크를 쓰는 프로젝트에서 frontend는 보통 npm run build한 파일을 웹 서버에 호스팅해서 REST API 서버를 별도로 호출하는 형태로 구성합니다. 만약 지금 프로젝트 구조에서 웹 서버 대신 WAS에 빌드한 파일(npm run build 명령어 실행 결과)을 올려서 사용하신다라고 하면 프런트엔드 쪽 스프링 컨트롤러에서 해당 URL 요청을 받았을 때 해당 경로에 해당하는 페이지만 반환해주시고 그 페이지에서의 데이터 호출은 백엔드 API를 바라보게 하시면 될 것 같아요. 그리고 여기서 주의하셔야 할 건 뷰 CLI로 생성한 프로젝트는 싱글 페이지 애플리케이션이라 HTML 파일이 하나입니다. 관련한 구성도 같이 설정해 주셔야 할 거에요! 아래 문서 같이 참고하시면 좋을 것 같습니다. https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations 수강해 주셔서 감사합니다 :)