ヨハネ

이제 vue에서 java api를 불러오려고 합니다. 일단 자바 소스를 rest api용으로 수정해야하는데, 자바쪽 컨트롤러를 수정합니다. /** * 화면 컨트롤러 */ @RequiredArgsConstructor @Controller public class IndexController { // 알리미 추가 및 수정 화면 요청 @GetMapping("/menuInfoRegister") public String menuInfoRegister(Model model) { // 화면에 돌려주는 모델에 리스트 데이터를 담음 model.addAttribute("posts", listLoadService.getInfoRegisterList()); return "menuInfoRegister"; } } 현재 자바 컨트..

기존에 작성했던 프로젝트는 java springboot 로 만들어진 프로젝트로, mustache라는 스프링부트 내장 템플릿으로 간단히 구현한 프로젝트였습니다. 이번에 Vue.js로 웹페이지를 리빌딩하고, 겉모습을 완성했으므로 이제 만들어 둔 것을 기존 프로젝트에 이식하려고 합니다. 방법 자체는 구글링을 하면 많이 나오며, 대부분의 글이 SpringBoot + Vue.js의 초기 프로젝트 세팅인데... 그냥 그걸 따라해도 되긴 되더군요. 전제 조건 기존 스프링 프로젝트가 있음 따로 만들어둔 Vue.js 프로젝트가 있음 (Vue.js가 있으므로, Node.js도 깔려져있다는 전제) 이러면 이 뒷 단계는 정말 쉽게 이식 할 수 있습니다. 1. node_modules를 제외한 나머지 파일을 전부 복사. 2. S..

이제 남은 화면을 만들려고 합니다. 이 전에 등록한 정보를 토대로, 트위터 api 검색을 통해 원하는 정보를 추출한 뒤, 그 내용을 보여주는 페이지입니다. 여기서 보여지는 저 템플릿은, 남은 화면 모두 사용하는 템플릿입니다. 그래서, 이 부분을 vue의 컴포넌트로 분리하게 되면 나머지 화면은 한번에 다 만들 수 있겠다~ 싶었습니다. 뭐, 기존 화면도 import로 통합할 수 있었으나, 소스 복붙을 해서 다른부분 살짝 수정을 하고 그랬는데.. 이번엔 컴포넌트 통합을 하고, vue의 기능을 사용해 소스 길이를 줄이기로 했습니다. 각 화면의 vue 파일은 템플릿에 LiveInfoComp라는 컴포넌트를 불러오게 해서, 그 컴포넌트의 내용으로 화면을 채우도록 했습니다. 처음엔 LiveInfoComp에 직접 v-f..

이런 화면을 만들려고 합니다. 기존 프로젝트에서 윗부분은 form을 쓰고, 아랫부분은 table을 써서 만들었으므로, 똑같은 방식으로 한번 만들어보고 적당히 수정하려고 합니다. 계정명 검색 기준 단어 기존 소스. 새로 만든 소스 div의 q-pa-md 라는 클래스는 해당 div에서 어떤 부위 (padding또는 border, margin) 어느 방향 (all, top, bottom, left, right) 어느만큼 (xs, sm, md, lg ... ) 공백을 주려고 하는지를 지정해 줄 수 있습니다. q-form은 기존 form과 같이 action을 줄 수 있고, 기존 프로젝트에서는 ajax로 api를 불러왔었기에, axios로 api를 부르거나 action으로도 메서드 부르는게 가능한 거 같아서, vu..

메뉴를 만든 김에, 바로 국제화를 적용 시키기 위해서 MainLayout.vue에 다음 코드를 적용시켰더니, 에러가 나기 시작했습니다. title: '문자열' 이었던 것을, this.$t를 써서, i18n의 문자열을 받는 형태로 바꾸려고 했는데, this는 undefined 에러, $t로 불러온 데이터는 any, 그러니까 타입이 지정 되지 않은 불안정한 형태로 들어온다고 에러를 뿜고 있네요. 아 (...) 24일 심야부터 25일, 지금시간에 이르기까지 git에 커밋도 하나 못한채 하루종일 구글링 하며 이것저것 적용을 해보았으나, 검색을 정말 못한건지 진짜 기본을 몰라서 그런건지 에러 해결법에 대해서 짐작 가는 게 안나오는 문제가 생겨버렸네요. 해결 될 때 까지 붙잡고 있어도 되지만, 애초에 타입스크립트도..

Quasar로 웹페이지 만들기. 이번엔 메뉴쪽을 건들어보려고 합니다. 앱에서 이렇게 생긴 부분으로, 타이틀 부분의 문구는 수정했지만 문구만 수정한 상태. 이걸 이제 수정 해 볼 생각인데, 어떤 모양새로 수정하려고 하냐면... 원래 이런 녀석을, 퀘이사 템플릿에 맞춰서 수정해 넣으려고 합니다. 일단 타이틀은 맞춰서 수정이 되어있고, 메뉴들만 손을 쓰면 되죠. 그럼 이 구조가 어떻게 되어있는지를 알아야합니다. {{ $t('menuTitle') }} # MainLayout.vue 파일의 일부분 저 리스트는 MainLayout.vue의 q-list 태그에서 만들어지고 있습니다. (상위에 닫고 여는 이벤트 역할을 하는 q-drawer이 있지만 이벤트 효과쪽이니 일단은 무시합니다.) 이 태그의 하위 엘레멘트들을 살..

프로젝트를 만들었으니, 이제 만들어야하지만.. 퀘이사를 처음 쓰기도 하고, 옵션 선택을 이것 저것 하는 바람에 공부 할 때와는 다르게 디렉토리가 많이 늘어난 상태가 되었습니다.... 그래서, 우선 개발을 위해서도 어떤 폴더, 어떤 파일에 뭘 넣어야하는지 알아야 하는 법.. 디렉토리 구조를 살펴보려고 합니다. 퀘이스 폴더와 vscode 폴더, npm 모듈들이 깔리는 폴더는 넘기고, public favicon이 들어있습니다. 이는 조만간 적절한 것으로 교체하려고 합니다. 이하 src 폴더 assets 현재는 어디 쓸지 모르는 svg가 하나 있습니다. boot api 연결을 위한 axios와 국제화를 위한 i18n 설정파일 여기서 api 연결과 관련 처리를 하면 되겠죠. components 화면의 컴포넌트 파..

퀘이사를 설치합니다. Quasar는 몇가지 설치 방법을 지원하고 있습니다. UMD/독립형(스탠드얼론) 퀘이사 CLI 퀘이사 Vite 플러그인 Vue CLI 플러그인 퀘이사에서는 자사 CLI인 퀘이사 CLI 사용을 강력하게 권장하고 있으며, 각각의 설치 방법에 의해서 어떤게 다른지를 아래에 설명하고 있습니다. https://quasar.dev/start/pick-quasar-flavour Getting Started - Pick a Quasar Flavour | Quasar Framework Get started with Quasar by picking one of its flavours: Quasar CLI, Vue CLI or UMD quasar.dev 저는 기존 프로젝트가 Vue-CLI로 설치한 것이..

이제 정했으니 vuetify를 설치해보려고 합니다. (하루가 지난건 안비밀) 알아보니, vuetify는 기존 vue-cil을 이용한 프로젝트 생성 후, vue add를 이용해 프로젝트를 설치한다고 합니다. 하지만 에러를 내뿜고있네요.. No such file or directory, open....... 에러에 대해서 찾아보니, 해당 버그는 webpack을 사용하는 옵션을 걸고 vue프로젝트를 생성 했을 때, index.html파일이 ./public/index.html이 아닌 ./index.html로 생성되어서 생기는 문제로, 문제이지만, 버그는 아니라고 합니다. 아오(..) 해당 이슈 링크 https://github.com/vuetifyjs/vue-cli-plugins/issues/65 No such ..