분류 전체보기 검색 결과

224 개의 검색 결과가 있습니다.

Frontend/JavaScript

[JS] 자바스크립트로 HTML 클래스 제어하기

const element = document.getElementById('element'); 1. 클래스 추가 - 여러개의 클래스를 추가하는 경우 클래스 사이에 ,가 들어감 element.classList.add('class1'); element.classList.add('class1', 'class2') 2. 클래스 제거 - 여러개의 클래스를 추가하는 경우 클래스 사이에 ,가 들어감 element.classList.remove('class1'); element.classList.remove('class1', 'class2') 3. 클래스 교체 element.classList.replace('oldClass', 'newClass'); 4. 클래스 존재여부 확인 (반환값: boolean) - 여러개의 클래..

2021. 7. 21. 23:33

Dev Tools

[VS CODE] 자동 줄 맞춤

Visual Studio Code에서 자동 줄맞춤을 하는 방법은 WIndows 기준으로 Ctrl + A로 전체 코드 선택 후 Ctrl + K + F 을 누르면 자동으로 줄 맞춤이 된다. (Mac 단축키도 windows와 같은 command + K + F) 또는 Beauty 플러그인을 설치하여 줄 맞춤을 할 수 있다. (단축키: Ctrl + Shift + B )

2021. 7. 21. 23:20

Backend/Java (Spring)

[JAVA] Gson Date format 변경하기

Entity나 DTO를 만들지 않고 controller-service-mapper 작업을 할 때 Date Format을 보니 yyyy-MM-dd'T'HH:mm:ss 형식이었다. private final Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd").create(); setDateFormat을 통하여 원하는 date 포맷의 값을 받아서 Date 객체로 변환할 수 있었다. 또는 아래와 같은 객체와 클래스를 만들어서 원하는 Format으로 지정하여도 된다. GsonBuilder builder = new GsonBuilder(); builder.registerTypeAdapter(Date.class, new GsonDateFormatAdapter()); ..

2021. 7. 20. 23:29

Frontend/Vue.js

[Vue] Date.now()를 통해 실시간 타임스탬프 만들기

▶ 글자를 변경할 때 마다 바뀌는 타임스탬프 [JavaScript] new Vue({ el: '#app', data: { name: 'Jinny', }, computed: { now () { return `Hi ${this.name}, now is ${Date.now()}` } } }) [HTML] {{now}} ▶ 동적으로 변경되는 타임스탬프 [JavaScript] new Vue({ el: '#app', data: { name: 'David', now: 0 }, mounted () { this.updateNow() setInterval(this.updateNow.bind(this) , 1000) }, methods: { updateNow() { this.now = Math.round(Date.now()..

2021. 7. 19. 22:18

Frontend/Vue.js

[Vue] axios를 이용하여 서버 통신하기

Front 작업에서 서버와 통신하기 위한 방법으로 Promise API를 활용하는 비동기 통신 라이브러리인 axious 가 권장되고있다. 그밖에 fetch, superagent 그리고 Vue.js 플러그인으로 개발된 vue-resource라는것이 존재한다. ▶ axios 메서드 axios.get(url[, config]) axios.delete(url[, config]) axios.psot(url[, data[, config]) axios.put(url[, data[, config]) axios.head(url[, config]) axios.options(url[, config]) ▶ axios 설치 npm install --save axios ▶ http proxy 설정 프로젝트 최상위 디렉토리에 vu..

2021. 7. 18. 00:35

Frontend/Vue.js

[Vue] export default 내부 구조

스크립트에서는 다른 모듈을 import 할수 있고, script 내에서 export를 통해 컴포넌트를 조정하거나, 컴포넌트에서 필요한 data들을 제공하기도 한다 script에서는 객체 하나를 export하고 있다. 아래 내용은 이 객체 안에 property로 들어갈 목록과 그 역할이다. ▶ data vue component에서는 무언가를 return하는 함수를 넣어줘야 한다. 만약 Vue 객체의 인스턴스를 선언한다면, 함수 대신 객체를 넣어도 괜찮다. data를 함수로 선언해야 할 때 화살표 함수를 사용하면 안된다. this 바인딩이 안되기 때문이다. ▶ methods method들을 정의한다. method 객체에는 함수들이 들어가며, 이 함수들은 다른 method에서 혹은 템플릿에서 사용될 수 있다...

2021. 7. 16. 23:51