반응형

Front 24

css/js 파일 캐시 방지

css, js 파일을 수정 후 반영을 하면 브라우저에서 css,js파일은 캐시로 저장하기 때문에 참조하는 파일 url이 동일 하다면 수정 되기 전 앞서 저장되어 있는 파일을 사용하기 때문에 수정된 부분이 작동하지 않게 된다 이를 일시적으로 해결하기 위해 브라우저 캐시 비우기 및 강력 새로고침 작업을 진행 하게 되면 해결 된다. 하지만 이는 일회성 해결 방법이고, css, js파일 경로 끝에 버전정보, 날짜정보와 같이 반영할때마다 해당 파일이 변경되었다는 점을 알 수 있게 파라미터로 넘겨주는 방법이 있다 아래와 같이, importDate라는 변수로 화면이 로딩 될 때마다 날짜데이터를 넘겨주는 형태 이다.

Front/JavaScript 2021.01.22

for await of

for await of 구문은 반복문 내부에서 실행되는 비동기 서비스들에 대한 순서를 보장해준다. 예를들어, 아래의 상황에서의 결과는 const names = ['a', 'b', 'c', 'd']; names.forEach(async (name) => { const result = await service.asyncTest(name); console.log(result.json()); }); console.log('서비스 종료'); 맨 마지막에 찍혀 있는 '서비스 종료' 라는 로그가 처음 찍히게 된다 모든 api 통신 완료 {"a":"end"} {"b":"end"} {"c":"end"} {"d":"end"} * forEach에서의 모든 비동기 작업에 대한 순서를 보장 하지 않는다. 때문에 for awai..

Front/JavaScript 2020.11.12

특정일로 부터 날짜 계산 (JavaScript)

/* 특정일로부터 일 계산 1) date - 기준 날짜 2) calDay - 계산 일 */ function getCalculateDay(date, calDay) { var d = new Date() if(date != null && date != ''){ var d = new Date(date); } var dayOfMonth = d.getDate() d.setDate(dayOfMonth - calDay) return getDateStr(d) } /* 특정일로부터 월 계산 1) date - 기준 날짜 2) calDay - 계산 월 */ function getCalculateMonth(date, calMonth) { var d = new Date() if(date != null && date != ''){..

Front/JavaScript 2020.07.28

Multi Select Box (SumoSelect)

사용하기 괜찮은 Jquery Multi Select Box 플러그인이라 간단하게 정리 하려고 한다. 우선 아래의 URL에 접속 하여 소스 세팅. http://hemantnegi.github.io/jquery.sumoselect/ Jquery.sumoselect by Hemant Negi jquery.sumoselect jquery.sumoselect.js - A cross device Single/Multi Select jQuery Select plugin. LIVE DEMO HERE Sumoselect full : jquery.sumoselect.js Minified : jquery.sumoselect.min.js A jQuery plugin that progressively enhances an HT..

Front/Jquery 2020.07.28

D3.js 마인드맵 차트

var nodeArray = new Array(); var linkArray = new Array(); var nodeColorArray = d3.scale.category20(); data = { nodes: [ {keyword: '미스트롯', id:'1', tag:'1'} ,{keyword: '김호중', id:'2', tag:'2'} ,{keyword: '편의점 샛별이', id:'3', tag:'3'} ,{keyword: '방탄소년단', id:'4', tag:'4'} ,{keyword: '미스터 트롯', id:'5', tag:'5'} ,{keyword: '전지적 참견 시점', id:'6', tag:'6'} ,{keyword: '(아는 건 별로 없지만) 가족입니다', id:'7', tag:'7'} ,{..

Front/Chart 2020.07.01

computed vs watch

computed 보통 value에 대한 validation. Hello Hello data의 isError값에 따라 태그에 warning클래스 여부가 변경됨. Hello isError값이 true일 경우 warning 표시. watch computed보다 상대적으로 무거운 로직. Vue 인스턴스의 특정 프로퍼티가 변경될때 지정한 콜백함수가 실행. {{ num }} 위의 예제를 보면 num라는 프로퍼티가 변경될때 마다 fetchUserByNumber라는 method가 실행 되는걸 확인 할 수 있음. 특정 프로퍼티의 변경시점에 특정 액션(call api, push route …)을 취하고자 할때 적합해보임. * 만약 computed로 구현가능한 것이라면 watch가 아니라 computed로 구현하는것이 보통..

Front/Vue 2020.03.11

Spring + Vue.js 세팅(2)

앞에서 작업한 내용은 Spring따로 Vue.js(Node.js) 따로 구성하였다. 이런 구조를 뷰로작성한 코드들에 대해서 build를 통해 번들링된 코드들을 지정한 경로에 저장하여 실제로는 Spring프로젝트의 Web Server만으로 화면 기동을 시키려 한다. 우선, 프로젝트 디렉토리 구조와 추가 작성내용을 살펴보면 src경로 하위에 frontend라는 vue프로젝트가 위치해있고 frontend/config/index.js 파일 build부분의 경로를 위의 화면 내용처럼 수정한다. frontend프로젝트 경로로 접근하여 해당 프로젝트를 build한다. npm run build build가 정상적으로 끝나면 아래의 보여지는 내용처럼 해당 경로에 번들링 된 파일들이 생성된다. 추가로 html파일경로와 r..

Front/Vue 2020.03.09

Spring + Vue.js 세팅(1)

Spring boot(gradle) + vue.js 조합의 테스트 프로젝트를 진행하려고 한다. Spring boot 세팅 시 Spring Web과 Lombok만 추가 하여 가벼운 프로젝트로 생성 시켜준다. 그 이후 Vue.js 를 설치하는 과정은 아래와 같다. 1. Node 설치 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. vue-cli 설치 npm i -g @vue/cli 3. spring boot 프로젝트 경로 하위에 해당 vue프로젝트 설치 frontend라는 이름으로 vue프로젝트를 생성 시키기 앞서 np..

Front/Vue 2020.02.11
반응형