현재 작업 : 만들어진 프로젝트를 AWS에 올리는 작업 진행중. 로컬에서의 작업이 완료 되고, 서버에 업로드 중입니다. 이전 작업물에서도, 로컬에서는 정상적으로 진행되던 테스트가 에러를 뿜었고, 테스트가 제대로 끝나지 않으면 TDD형식 개발이라고 부를 수 없는 물건이 되어버리기에, 제대로 고치기로 마음 먹고 EC2의 로그를 살펴보았습니다. > Task :test SmApplicationTests > contextLoads() FAILED java.lang.IllegalStateException at DefaultCacheAwareContextLoaderDelegate.java:132 Caused by: org.springframework.beans.factory.UnsatisfiedDependencyEx..
이 글을 쓰는 시점에서, api 연결 작업이 완료 된 상태입니다. 이 포스팅은, 그간 있었던 일에 대한 기록입니다. 1. 키워드를 등록 한 후, 생방송 정보 습득 버튼을 누르면 추가된 키워드 정보는 습득해오지 않는 점. >> vuex의 문제..라기보단 특성이 문제더군요. 기본적으로 웹 페이지 접속 시, 화면 리스트들을 전부 습득해오는 형태로 되어있어서... 바뀐 정보들에 대한 새로고침이, 버튼을 눌러 router를 통해 넘어가도 되지않는 그런 문제. DB 정보를 받아오는 파트가 1 - 트위터 계정 & 키워드 리스트 2 - 생방송 정보습득 후 그 정보를 보여주기 위한 리스트 3 - 2의 정보에서 알림을 위한 정보를 (진)등록 후, 그 등록 내용을 보여주기 위한 리스트 기본 상태에서 추가 갱신 제거를 할 경..
이제 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..
vue-router 추가를 한 후, 무슨 이유인지 빌드가 되지 않는 현상이 발생핬습니다. 라우터 관련 설정을 지우고 나니, 잘 되는거 봐서는 라우터가 확신범인데... 그래서 한참 찾아보니, 이건 무한루프 관련 에러고.. 어딘가에서 무한루프의 원인이 되는 것이 있다는 것. 스택오버플로우를 뒤지다보니 이런게 보이더군요. https://stackoverflow.com/questions/56603711/npm-run-serve-gets-hang-on-98-while-building npm run serve gets hang on 98% while building I'm working on a project using vuetify. I was using "npm run serve" command to build..
메뉴를 만든 김에, 바로 국제화를 적용 시키기 위해서 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 화면의 컴포넌트 파..