전체 글 83

Vuetify - select에 검색기능을 추가하려면? autocomplete

개인서비스의 select 컴포넌트에 데이터가 많아져서 조회기능을 넣으면 좋지 않을까 하여 개선해보았다. vuetify의 기존 select 컴포넌트는 다음과 같은데 ... ... 위와 같은 모습으로 나오게 된다. 항목이 적을 경우는 편리하긴한데 조회기능이 없어서 많아지면 불편하다. 이를 Autocomplete 컴포넌트가 해결할 수 있다. ... ... v-select 를 v-autocomplete로만 변경해주면 완료 위와 같이 검색도 되는 select 컴포넌트로 개선 가능하다. 여담 직접 만들기 전에 제공되는 api, 컴포넌트를 조회 후, 라이브러리를 찾아보고, 그리고 없으면 구현하는게 좋다. 거인의 어깨는 서비스 개발 속도에 아주 큰 도움이 되니까..

Vue.js 2021.03.03

RSS Parse

RSS 피드를 파싱 해보자 rss-parser 라이브러리를 사용하겠다. 이유는 작고 가볍고 편하다. 그리고 주간 다운로드 수가 현재 17만을 육박한다.(등록일 기준) www.npmjs.com/package/rss-parser rss-parser A lightweight RSS parser, for Node and the browser www.npmjs.com node v14.15.0 환경에서 실시 1. 설치 npm install --save rss-parser 2. 사용 샘플로 연합뉴스의 최신피드를 파싱할 예정, 최대한 샘플 코드를 따라해보았다. (샘플주소: www.yonhapnewstv.co.kr/browse/feed/) import RssParser from 'rss-parser' async pars..

Node.js 2021.02.24

컴퓨터 화면 녹화 하는 방법 - 윈도우 10 기본기능

프로그램 별도 설치 없이 윈도우 10 기본기능으로 녹화 하는 방법 바로 설명 들어갑니다. 1. Win key + G 를 누릅니다( 윈도우 로고 키 + G ) "게임바를 여시겠습니까?" 라는 메세지가 나오면 체크하시면 됩니다. 위와 같은 화면에서 빨간 화살표가 위치한 버튼이 영상 녹화 버튼입니다. 2. 누르게되면 다음과 같이 녹화 상태 패널이 생깁니다. 마이크 버튼을 누르면 마이크 기능도 사용할 수 있습니다. 녹화 영상은 내 PC > 동영상 폴더에서 확인 하실 수 있습니다.

IT Tip 2021.02.17

객체는 인터페이스를 사용해 참조하자

객체는 인터페이스를 사용해 참조하라 이전에 매개변수 타입으로 클래스가 아닌 인터페이스를 사용하라고 하였다, 이를 확장하면 객체는 클래스가 아닌 인터페이스로 참조하라고 할 수 있다 즉 적합한 인터페이스만 있으면 매개변수뿐 아니라 반환값, 변수, 필드를 전부 인터페이스 타입으로 선언하라. // 좋은 예, 인터페이스를 타입으로 사용 Set itemSet = new LinkedHashSet(); // 나쁜 예, 클래스를 타입으로 사용 LinkedHashSet itemSet = new LinkedHashSet(); 인터페이스를 타입으로 사용하는 습관을 길러두면 프로그램이 훨씬 유연해진다, 나중에 구현 클래스를 교체하고자 한다면 그저 새 클래스의 생성자(혹은 다른 정적 팩터리)를 호출해주기만 하면 된다. Set i..

Java 2021.02.10

메서드 시그니처를 신중히 설계하라.

메서드 시그니처를 신중히 설계하라 개별 아이템으로 두기 애매한 API 설계 요령들을 모아 놓았다. 배우기 쉽고, 쓰기 쉽고, 오류 가능성이 적은 API를 만들기 위함이다. 메서드 이름을 신중히 짓자. 항상 표준 명명 규칙(아이템68)을 따라야 한다. 이해할수 있고, 같은 패키지에 속한 다른 이름들과 일관되게 짓는 게 최우선 목표다. 그다음은 개발자 커뮤니티에서 널리 받아들여지는 이름을 사용하는 것이다. 긴 이름은 피하자. 애매하면 자바 라이브러리의 API 가이드를 참조하라. 자바 라이브러리가 워낙 방대하다 보니 일관되지 않은 이름도 제법 많지만 대부분은 납득할 수준이다. 편의 메서드를 너무 많이 만들지 말자 모든 메서드는 각각 자신의 소임을 다해야 한다. 메서드가 너무많으면 익히고 사용하고 문서화하고 테..

Java 2021.02.09

문자열 연결을 고민한다면 String 보다는 StringBuilder

성능을 생각한다면 String 대신 StringBuilder 문자열 연결 연산자(+)는 편리하지만, 성능 위주의 환경에서는 성능 저하를 감내하기 어려울 것이다. 문자열 연결 연산자로 문자열 n개를 잇는 시간은 n^2에 비례한다. 문자열은 불변이라서 두 문자열을 연결할 경우 양쪽의 내용을 모두 복사해야 하므로 성능 저하는 피할 수 없다. public String statement() { // 문자열 연결을 잘못 사용한 예 - 느리다! String result = ""; for (int i = 0; i < numItems(); i++) { result += lineForItem(i); // 문자열 연결 } return result; } 성능을 포기하고 싶지 않다면 StringBuilder를 사용하자 publ..

Java 2021.02.08

윈도우10 배경화면 이어지게 설정

듀얼모니터나 더블모니터, 트리플, 쿼드모니터에서 윈도우10에서는 배경화면을 그냥 설정하면 양쪽에 나뉘어서 적용되죠 이어지게 설정하는 방법을 공유하겠습니다. 1. 작업표시줄 좌측 하단의 [시작버튼(윈도우로고)]를 누릅니다. 2. 배경 이미지 설정을 입력하여 검색한 후 클릭합니다. 3. 설정 화면에서 원하는 이미지에 마우스 우클릭 합니다. 4. [모든 모니터에 대해 설정]을 누르면 모든 모니터에 동일한 배경화면이 설정됩니다.

IT Tip 2021.02.03

박싱 타입보다 기본 타입을 사용하라

박싱된 기본 타입보다는 기본 타입을 사용하라 자바의 데이터 타입 기본타입 - int, double, boolean ... 참조타입 - String, List ... 박싱된 기본 타입 - Integer, Double, Boolean ... 오토박싱과 오토언박싱 덕분에 두 타입을 크게 구분하지 않고 사용할 수는 있지만 차이는 있다. 어떤 타입을 사용하는지는 상당히 중요하다. 기본타입과 박싱된 기본 타입과의 차이 기본 타입은 값만 가지고 있으나, 박싱된 기본 타입은 값에 더해 식별성이란 속성을 갖는다. 즉 두 인스턴스의 값이 같아도 다르다고 식별 될 수 있다. 기본 타입의 값은 언제나 유효하나, 박싱된 기본 타입의 값은 null(유효하지 않은 값)을 가질 수 있다. 기본 타입이 시간과 메모리 사용면에서 유리하..

Java 2021.02.01

Thymeleaf - 표준 표현식

${...} : Variable expressions - OGNL 표현식, 스프링환경에서는 Spring EL ${shop.product.name} *{...} : Selection expressions - 변수 표현식과 동일하지만, 전체 컨텍스트 맵이 아닌 이전에 선택한 객체가 기준이됨 *{product.name} ... ... ... #{...} : Message (i18n) expressions - .properties 같은 파일에서 값을 읽어 표현 할 수 있다. Spring 환경에서는 MessageSource과 통합됨 (docs.spring.io/spring-framework/docs/4.3.30.RELEASE/spring-framework-reference/htmlsingle/#context-fu..

Spring 2021.01.27

Node.js - File system

파일목록 읽기 ( fs.readdir ) const fs = require('fs') fs.readdir('/file', (err, data) => { if (err) { console.error(err) } else { console.log(data) } }) const fs = require('fs') - fs 모듈 사용 readdir(path[, options], callback) - 비동기로 디렉토리안의 파일들 이름을 읽음 path | | - 파일 경로 options | - 옵션 encoding Default: 'utf8' - 문자열 인코딩 방식 withFileTypes Default: false - true일 경우 파일들이 fs.dirent 객체로 반환됨(참고) callback - 콜백 err ..

Node.js 2021.01.21