Vue3 Sample Project 생성 vue2가 23년 12월 31일 EOL 됨에 따라 vue3 공부를 하기 위해 샘플 프로젝트를 만들어 봤다. 깃헙에 vue3-boilerplate로 검색하면 더 많은 정보를 얻을 수 있다. 내가 참고로 했던 프로젝트는 https://github.com/Jamie-Yang/vue3-boilerplate 이다. boilerplate(보일러 플레이트)란? 최소한의 변경으로 여러 곳에서 재사용, 반복적으로 비슷한 형태를 띠는 코드를 말한다. version vue 3.3.4 node 18 npm 8.19.3 axios 0.21.1 vuex 3.3.4 vue-router 4.0.3 @vue/cli-service 5.0.6 bootstrap 4.6.2 디렉터리 구조 ├─ public │ └─ favicon.ico └─.. amCharts.js 워터마크 삭제 amCharts.js 버전 : 4 라이선스 O (*워터 마크 삭제 기능은 라이선스를 구매해야 한다고 한다.) 다음과 같이 그래프 좌측 하단에 워터마크가 보여서 삭제하고 싶었다. 변경한 소스코드는 다음과 같다. // Create chart instance let chart = am4core.create("chartdiv", am4charts.XYChart); // amchart 로고 삭제 if (chart.logo) { chart.logo.disabled = true; } 아래와 같이 워터마크 삭제된다. 참고 https://github.com/amcharts/amcharts4/issues/2703 Removed logo amcharts · Issue #2703 · amcharts/amcharts4 Good.. [JavaScript] 마지막 문자열 제거 vuetable에서 전달받은 데이터를 파싱 했다. 테스트 1, 테스트 2, 테스트 3, 과 같이 마지막 요소에도 , 이 붙길래 마지막 문자 , 을 제거하였다. formatter(value){ let result,tmp = "" let tmpArr = []; tmpArr = value for(let i = 0; i < tmpArr.length; i++){ tmp += tmpArr[i] + ","; } result = tmp.slice(0,-1); return result; } 이때 전달되는 데이터는 배열이기 때문에 value는 배열이 담긴다. 새로운 배열을 생성해서 value를 tmpArr에 담아준다. 배열의 길이만큼 반복문 돌면서 tmp에 해당 요소들을 이어준다. 핵심은 이거! result = tmp.s.. [Vue/Vuetable] field 데이터가 html 형식일 경우 html 태그로 인식해버리는 현상 해결 버전은 다음과 같다. vue.js 2 vuetable 2 Sonarqube의 rules 목록 조회 테스트 페이지를 만들기 위해 vuetable를 사용했다. vuetable 적용 방법은 아래 포스팅 참고! https://seongeun-it.tistory.com/286 [Vue.js] vuetable-2 적용 3차 과제 프로젝트 리뷰를 받으며, vuetable-2에 대해 알게 되었다. JSON 데이터 세팅하면 내부적으로 v-for 데이터를 필드에 맵핑할 수 있다. 예를 들어 data-path=”issues”로 설정하면, 응답받는 데이터 seongeun-it.tistory.com https://seongeun-it.tistory.com/299 [Vue.js] Vuetable pagination 적용 Sona.. [Vue.js] Vuetable pagination 적용 Sonarqube API 기능 분석을 위해 테스트 화면을 개발을 했다. 주어진 시간은 이틀..! 간단한 조회성 기능 테스트 화면이라 따로 화면 개발 안하고, 3차 과제 프로젝트에 테스트 화면을 개발했다. Vuetable 적용 방법은 아래 포스팅을 참고 [Vue.js] vuetable-2 적용 3차 과제 프로젝트 리뷰를 받으며, vuetable-2에 대해 알게 되었다. JSON 데이터 세팅하면 내부적으로 v-for 데이터를 필드에 맵핑할 수 있다. 예를 들어 data-path=”issues”로 설정하면, 응답받는 데이터 seongeun-it.tistory.com Vuetable-2 pagination 적용 1. vuateble 컴포넌트에 @vuetabe:pagination-data ~ 옵션 추가 2. vu.. [Cypress] 로컬에서 Cypress 설치 및 Demo Application (RWA) 구동하기 Cypress는 웹 애플리케이션용 프런트 엔드 테스트 도구이며, 오픈소스이다. 공식 문서가 잘 정리되어 있으니 꼭 읽어보는 것을 추천한다. 이번 포스팅은 로컬에서 Cypress 설치 및 Demo Application을 구동하는 방법을 소개하고자 한다. Cypress 공식문서 https://docs.cypress.io/guides/overview/why-cypress/ Why Cypress? | Cypress Documentation What you'll learn docs.cypress.io Cypress Real World App Cypress Real World App(RWA)은 Cypress 테스트 방법, 패턴 및 워크플로의 실제 사용을 보여주기 위해 결제 애플리케이션을 구현하는 오픈 소스 프로젝트.. [Vue.js] vuetable-2 적용 3차 과제 프로젝트 리뷰를 받으며, vuetable-2에 대해 알게 되었다. JSON 데이터 세팅하면 내부적으로 v-for 데이터를 필드에 맵핑할 수 있다. 예를 들어 data-path=”issues”로 설정하면, 응답받는 데이터의 index를 기준으로 v-for 해준다. -> 짱 편함 데이터를 처리하는 방식은 1)api-mode 2)data모드가 있는데, 나의 경우 api-mode를 사용하였다. api-mode를 사용했을 때 지원되는 기능이 더 많기 때문이다. 만약 data모드를 사용한다면, data모드를 지원하는 기능인지 확인해야한다. 설치 방법 공식 문서를 참고하면 된다. Document ratiw.github.io 완성되는 화면은 다음과 같다. (* 변경일시는 필드는 아직 파싱 작업을 안했으니 참.. [Vue.js] vue2에서 vue-simple-context-menu 사용 배경 설치 방법과 예제는 아래 깃헙을 참고하였다. GitHub - johndatserakis/vue-simple-context-menu: 📌 Simple context-menu component built for Vue. Works well with both left and 📌 Simple context-menu component built for Vue. Works well with both left and right clicks. Nothing too fancy, just works and is simple to use. - GitHub - johndatserakis/vue-simple-context-menu: 📌 S... github.com 에러 메세지 공식 사이트에 나온 대로 npm i vue-s.. CSR과 SSR이란? 해당 포스팅은 하단의 아티클을 재구성하여 만들었습니다. 클라이언트 사이드 렌더링과 서버 사이드 렌더링의 차이점 클라이언트 사이드 렌더링 서버 사이드 렌더링 페이지의 내용을 그리는 곳 브라우저 서버 페이지 로딩 최초로 한 번 페이지 전체 로딩 -> 데이터만 변경하여 사용 페이지를 로딩할 때마다 서버로부터 리소스 전달 받음 -> 이를 해석하고 화면에 렌더링 사용자의 요청에 따라 필요한 부분만 읽음 새로고침이 일어남 클라이언트 사이드 렌더링 = Single Page Application(SPA) SPA는 최초 한 번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 애플리케이션을 의미한다. 기본적으로 페이지 로드가 없고, 모든 페이지는 단순히 HTML5 History에 의해 렌더링 될 뿐! 그래서 언.. [JQuery] 제이쿼리 기본 개념 정리 참고 블로그 https://coding-restaurant.tistory.com/187 jQuery 이벤트 등록 메서드 (단독, 그룹, 강제, 제거, 로딩, 마우스, 키보드) 사용자가 웹사이트에 방문해서 동작을 취했을 때 제이쿼리 코드가 실행되도록 만드는 방법을 다루는 단원입니다. 이벤트 : 사이트에서 방문자가 취하는 모든 행위 이벤트 핸들러 : 이벤트가 발 coding-restaurant.tistory.com 요소 탐색 관련 http://www.devkuma.com/books/pages/224 프로그램 개발 지식 공유, devkuma 데브쿠마는 프로그래밍 개발에 대한 지식을 공유합니다. www.devkuma.com [JQuery] 모달창에서 버튼 이벤트 발생 시 해당 값 넘기기 console.log($(event.target).parent().siblings("input[type=hidden]").val()); function modifyEvent(){ // console.log($(event.target).parent().siblings("input[type=hidden]").val()); $("#eventNo-id").val($(event.target).parent().siblings("input[type=hidden]").val()); } $(event.target).parent().siblings("input[type=hidden]").val() 이벤트가 발생한 요소의 부모 요소를 선택해서, 형제 요소들 중 hidden인 요소의 값을 뽑는다 == EventNo 그리고 그.. [JavaScript] 순차적으로 접근한 input 요소의 value값이 interest에 포함되어 있을 경우 해당 input 요소 선생님께서 알려주신 Tip! 순차적으로 접근한 input 요소의 value값이 interest에 포함되어 있을 경우 해당 input 요소에 checked 속성 부여하기 == DB에 입력되어 있는 요소들이 checked 되어 마이페이지에 나타날 수 있게하기 indexOf search 를 사용해보라고 하셨음 나의 로직 5/4 indexOf 메소드는 index의 순번을 나타내는 메소드, search 메소드는 모르겠다. 대략적으로는 순서별로 조건 검사를 한 후에 checked 속성을 주는 것 같은데, 일단 내일 다시 도전해봐야겠다 5/5 indexOf() 요약 https://electronic-moongchi.tistory.com/13 [javascript] IndexOf() 문자열에 특정 문자 포함 여부 확인.. 이전 1 2 다음
